Blog - Amethyst Website Design

WordPress Full Site Editing

Global Styles in WordPress Themes with Theme.json

One of the best features of WordPress Full Site Editing (FSE) is the theme.json file. It can be used to easily add styles to your theme, and some of the styles will work with classic themes too. Currently you can add a palette of colors or change theme font sizes in classic themes. Normally in…
WordPress Full Site Editing

Custom WordPress Full Site Editing Theme Now Live

This site now uses a custom Full Site Editing (FSE) theme. It started as an experiment, but it came together easier than I expected, and so it’s live on this site now. There is still work to do, as there have been changes to the Block and Site Editors, since I started, and some things…
WordPress Gutenberg Blocks

Button Alignment in WordPress 5.7

WordPress 5.7 updated the CSS classes on the Buttons Block to use Flexbox. This means that existing Buttons Blocks that were previously center-aligned or right-aligned may have lost the alignment, and are all shifted to the left after the WordPress update. This affects all previously added buttons. And if your website is still using a…
WordPress Tutorials

Alternate Colors in Post and Widget Titles with CSS :nth-of-type

You can alternate colors for your post and widget titles in your WordPress theme or website. It’s easy with a bit of CSS and the :nth-of-type() pseudo selector. While this may sound a bit difficult, it’s really quite easy. Use a Four Color Palette for Every Fourth Post and Widget Title This tutorial starts by…
Genesis Tutorials

How to Use Sugar Event Calendar with Genesis Themes

Sometimes you need to have a simple calendar of events on your WordPress website. This tutorial will show you how to use Sugar Event Calendar by Pippin Williams with Genesis 3.4.0 Sample theme. I’ve used this calendar plugin on several websites, and because Pippin uses minimal styling in his plugins, the calendar just picked up…
Website Design

Resource List for Your WordPress Website

Updated December 28, 2020 This resource list for your WordPress website highlights resources I actually use for my clients or myself. There are lots of other good resources; these are just mine. Domain Name Registrars Namecheap – This registrar has good prices and customer support. Their management interface is easier to use than most. Hover…
WordPress Gutenberg Blocks

Create a Reusable Block in WordPress Gutenberg Editor

WordPress 5.0 and up has a new editor for posts and pages—the Gutenberg Editor. It’s different from the previous editor, as it puts everything into it’s own “block” — Page Titles, Headings, Paragraphs, Images, and more. Because of the blocks, the Gutenberg Editor is also referred to as a block editor. The new Gutenberg editor…
Genesis Tutorials

Center Logo and Menu in Genesis Sample 2.6

A popular option for website headers is to center logo and navigation menu. This is used for a lot of feminine and photography websites, but I’ve also seen small business websites use a centered logo. Genesis 2.6 uses the WordPress customizer to make adding different size logos really easy — no code required! And for…
Genesis Tutorials

Backstretch Image to CSS Background Image in Agent Focused Theme

The Agent Focused Genesis child theme uses Backstretch, a jQuery script, to add the large image on the theme front page. A frequently asked question is how to get more control over the position of the background image. It’s fairly easy to convert the theme to use a CSS background image, which makes positioning more…
Genesis Tutorials

Mega Menu Navigation for Genesis Themes using CSS

Sometimes the usual WordPress dropdown navigation menu doesn’t quite work because the number of items is too long. You can use any of the popular mega menu plugins, but it’s quite simple to style a multi column mega menu for Genesis themes using only CSS.
Genesis Tutorials

Customize the Read More Text in Genesis Themes with Accessibility

And Without Losing the Read More Accessibility! Accessibility support was added to the Genesis Framework with version 2.2 (Sept. 1, 2015). One of the new accessibility features added was screen reader text on the blog post read more links, so those who use a screen reader know where the read more link takes them. Instead…
Genesis Tutorials

Add New Image Section to Genesis Workstation Pro Theme

It’s straightforward to add an additional new image background section to Genesis Workstation Pro child theme. You’ll need to edit a few files, so follow the steps in this Genesis theme customization tutorial carefully. Save copies of the original files before you start editing, and be sure you have FTP access, in case something goes…