Note: Your site will likely be up/down during the upgrade process. If you can’t afford any down time, you might want to create a snapshot of your site and deploy it to another Droplet to perform the upgrade and switch over via IP or DNS when your done.

Backup your WordPress site

• Make a full backup of your WordPress install. I recommend using UpdraftPlus. I have instructions over here.
• In addition to a full backup, I recommend shutting your Droplet off and creating a snapshot using DigitalOcean’s snapshot feature. If something goes wrong, you can always restore your snapshot which is even easier than a rebuilding your site manually and restoring from a backup.

Check your Ubuntu Version

• Log into DigitalOcean and locate your Droplet.
• Click the “Console” link and/or button to connect to the droplet’s command line console.
• Run the command “lsb_release -a” from the console to check the OS version.
• Check the Ubuntu Release cycle here: UbuntuUbuntu release cycle | Ubuntu​
• If LTS standard security maintenance has expired for your Ubuntu version, proceed to the next section to upgrade Ubuntu.

Upgrade Ubuntu

Follow the official Ubuntu docs to upgrade your server: Ubuntu ServerHow to upgrade your Ubuntu release​

If you are using the ondrej/php PPA to get more recent version of PHP, remove it prior to the upgrade using: “sudo add-apt-repository –remove ppa:ondrej/php”

If you run into trouble, ChatGPT is your friend. Copy and paste any unexpected errors to get contextual based help. One of the Droplets I upgraded had trouble with a couple MySQL packages. After some consultations with ChatGPT I was able to fix the broken packages so I could continue my upgrade.

Upgrade PHP

PHP 8.0 → PHP 8.3 Upgrade Steps (Apache mod_php)

From the Droplet Console:

1. Update package list

sudo apt update

2. Add Ondřej Surý’s PHP repository (if not already present)

sudo apt install -y software-properties-common ca-certificates lsb-release apt-transport-https
sudo add-apt-repository ppa:ondrej/php
sudo apt update

3. Install PHP 8.3 + Apache module

sudo apt install -y libapache2-mod-php8.3 php8.3 php8.3-cli php8.3-common \
php8.3-mysql php8.3-xml php8.3-curl php8.3-mbstring php8.3-zip php8.3-gd php8.3-intl

4. Switch Apache to PHP 8.3

sudo a2dismod php8.0
sudo a2enmod php8.3
sudo systemctl restart apache2

5. Verify PHP version

php -v

You should see something like:

PHP 8.3.24 (cli) ...

6. (Optional) Remove old PHP 8.0 packages

sudo apt purge -y php8.0*
sudo apt autoremove -y

That’s it!

The post Upgrade PHP on a DigitalOcean WP install appeared first on FireflyWP.

The post My Secret Blog Entry appeared first on FireflyWP.

I think this is a larger problem as commercial marketing teams become more savvy at ranking for search, video, and mindshare in general. I have noticed lately that even Google seems to be struggling against the masters of SEO.

I just did a search on Google for “how to build a new website.” The first set of results “above the fold” (before I needed to scroll) are Google sponsored links. I fault Google for that. Their sponsored results are huge now! Next, I must scroll through the Google AI response for which, I usually have no interest.

I then finally see the first organic result. Can you guess who it is? You guessed it, Wix.com. Well done, Wix marketing team.

I continue to scroll through the other organic results and even click a few pages in. Based on the Google search results, I could imagine how a budding web developer might get the impression that you must use a commercial website builder to build a website. There is little mention of WordPress.org software in the search results, much less, opening a text editor and writing some HTML!

I am concerned that unbiased content and free, open-source software options are getting lost in the noise of the content marketing machine.

The post Jamie Marsland on Wix and WP Marketing appeared first on FireflyWP.

WordPress added support for uploading fonts via the block editor in WordPress 6.5 so we no longer need to use a kludgy workaround to upload and apply custom fonts. See the “How to install your new font on WordPress 6.5” section below.

This post will teach you how to add a custom font to your WordPress site without a plugin and minimize the performance penalty. I’ll be using my site, FireflyWP.com, as an example. I will focus on adding a font to the Twenty Twenty-Three Full-Site Editor theme for your headers (I.e., h1, h2, h3, and so on).

System Fonts are… Fast!

By default, the Twenty Twenty-Three Full-Site Editor (FSE) theme specifies the following fonts defined in the CSS font-family property:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

These are system fonts for Windows, Mac, and Linux, so the browser doesn’t need to download them. The browser will go through the list of fonts until it finds one installed on the user’s machine. I am using a Windows PC right now, so Chrome picked “Segoe UI” because it’s the first font in the list available on my machine. The “sans-serif” at the end tells the browser that we’ll take any sans-serif font if none of the prior fonts are available.

System fonts provide the fastest site load time because the browser doesn’t need to download a font from the server. The downside of using the system fonts is they are pretty common, so your website fonts will look like many other sites. That said, I am a performance geek, so if I were building a WordPress theme, I would also default to system fonts.

If you want to learn more about using system fonts take a look at Geoff Graham’s System Font Stack article on CSS-TRICKS.

Serif versus Sans Serif

There two major font categories: serif and sans serif. A “serif” is a small line or stroke attached to the end of a larger line in a letter. Serif fonts include serifs AKA “feet” and often have lines that vary in thickness. “Sans” is French for “without” so a sans serif means “without serifs.

Here is an example of a serif font, Times New Roman, and a sans serif font, Arial:

I couldn’t find any evidence that one is significantly more readable than the other, so which you choose depends on your design goals. A good article on Canva that covers serif versus san serif in much more detail. For FireflyWP.com, I will use a sans-serif system font for the paragraph text and a serif font for the headers.

The Twenty Twenty-Three theme font options

I am using the WordPress Twenty Twenty-Three full site editor theme for FireflyWP.com. When I look under the style menu in the full site editor, I see the default system font option and a few other choices:

I am looking for a Serif font, but the only one available is “Source Serif Pro.” I gave it a try. It seems too close to Times New Roman for my taste, but I thought it might work. Then I checked the network tab in the Chrome developer tools:

A 429 kB font file? Yikes! I want to keep my entire home page less than that, so I decided to look elsewhere.

Where to find fonts

After doing some searching, including Google Fonts, I landed on Fontsource.org. Certainly, check out Google Fonts, but I like that Fontsource.org provides open source fonts in WOFF2 file format. You can preview the fonts on fontsource.org here: https://fontsource.org/fonts

If you have a budget, there are some great commercial offerings from Adobe, Creative Market, and Font Shop. If you need help picking out fonts, here is an opinionated video: check out this video.

Another great way to find custom fonts for your WordPress site is to visit some websites and see what catches your eye. If you find a font you like, use your browser inspector tool to figure out what it is. If you’re using Chrome, press Ctrl + Shift + C on Windows or Command + Option + C on a Mac to activate the inspector and hover your mouse over the font you want to identify. In the screenshot below, I launched the element inspector tool while browsing WordPress.com and hovered my mouse over the font I liked:

The first font listed is “Recoleta,” so I Googled “recoleta font” and found it for sale on fontspring.com.

Another serif font caught my eye on ConvertKit.com so I inspected it:

This one is “Domine.” I Googled “Domine font” and found it on Google Fonts.

3rd party versus locally hosted fonts

Once upon a time, using Google Fonts hosted by Google was all the rage. It would save you a little bandwidth and allegedly improve site load performance. Then the German government decided that web fonts violated GDPR privacy laws because they allowed Google to track people around the web. This article over at Cookie Script covers it in more detail.

Long story short: You are probably better off locally hosting your fonts on your WordPress installation.

Convert TTF fonts to WOFF2

What’s WOFF2? It is a font file compression format supported by most modern browsers. If you need to support older browsers, you should also host your fonts in the older, lower-compression WOFF file format. You can quickly tell between the two because one has a “.WOFF” extension, and the other has a “.WOFF2” extension on the file. You can get detailed browser support info here.

Many font sources, including Google Fonts, provide fonts in a TTF format, so you will need a TTF to WOFF2 converter. Here are a couple of command line tools: fontTools and Google’s woff2 There are also a few converters on the web if you search for “ttf to woff2 converter.” I used cloudconvert, and it worked well.

I have decided to try the “Domine” from Google Fonts for the FireflyWP.com headers, so I downloaded it and unzipped the files. My input file, “Domine-VariableFont_wght.ttf,” was 99 KB. My output file, “Domine-VariableFont_wght.woff2”, is 40 KB. That’s a 60% reduction in the download size!

(New) How to install your new font on WordPress 6.5+

WordPress 6.5 added support for uploading fonts in the block theme editor, which is fantastic. Here’s how (assuming you are using a modern, block theme):

• From the WordPress dashboard, click “Appearance” -> “Editor” -> “Styles”
• Click the little Pencil icon in the upper right corner to edit your them styles.

• Click the little half-moon icon in the upper right corner and then “Typography” and then the little slider icon.
• You should see the “Fonts” dialog where you can select Upload and then drag and drop your font in.

This will add your font to the list of available fonts under Typography so you can easily apply the font to elements (I.e., Headings) at the site level or at a more granular level.

How to install your new font on WordPress prior to 6.5

Now that we have our WOFF2 file, we need to figure out how to upload it to WordPress and tell our theme to use it. Unfortunately, the WordPress Full Site Editor doesn’t provide an easy way to upload fonts. It seemed kind of silly to install a plugin or create a child theme to do a one-time upload.

If you are comfortable transferring files to your server, this will work for you: I used WinSCP to connect to my webserver and uploaded the WOFF2 font file to the most recent WordPress uploads folder (/var/www/html/wp-content/uploads/12). I then set the owner and permissions to match other files in the same folder. Why the uploads folder? Because my backup plugin, UpdraftPlus, backs it up with everything else.

Now that I have my WOFF2 file uploaded to my WordPress instance, I need to figure out how to reference it in my CSS. The theme I am using, Twenty Twenty-Three, is a full-site editing theme and currently, it is not so obvious where to add custom CSS.

I learned from Emily Wilkinson, a Facebook WordPress group moderator, that you could add custom CSS using the following URL: https://example.com/wp-admin/customize.php (replace example.com with your domain name). Here is a screenshot of what my custom CSS page looks like:

Here is the CSS I added to enable my custom font on “h” headers and the site tagline class:

@font-face {
  font-family: "fireflywp-domine";
  src: url("/wp-content/uploads/2022/12/Domine-VariableFont_wght.woff2")
    format("woff2");
  font-display: swap;
}

h1, h2, h3, h4, h5, h6, .wp-block-site-tagline {
  font-family: "fireflywp-domine", serif;
}

You can use the above CSS and swap out the “font-family” property value and source URL. The “font-family” property can be any name you like if you are consistent, but the source URL must be the correct path to your WOFF2 file. The “font-display” property is set to swap so the user’s browser will display the content using a system font before the preferred font has been downloaded. Click “Published” to save your custom CSS.

The big reveal

I pressed CTRL + F5 to do a full reload, and sure enough, I now see Domine is being used for my header font. Yay!

This is a performance-focused WordPress blog, so you might ask how quickly that font downloading:

49 ms is pretty quick! I’ll take that.

If you try to use this process to change your fonts, please feel free to comment below to let me know how you make out. Good luck!

The post WordPress custom fonts (Updated 6/3/2024) appeared first on FireflyWP.

Let’s look at TT3 from a developer’s perspective to understand how block themes perform and their structural organization.

Block themes – It’s about the blocks

The WordPress site editor allows WordPress users to add, remove, and style blocks, patterns, and media using a JavaScript React powered GUI interface. In the screenshot below you can see how a user can add a block to the home page template:

You can see there are quite a few blocks to choose from including:

• Paragraph
• Heading
• List
• Quote
• Image
• Gallery
• Audio
• Cover

So where do these blocks come from? Gutenberg, now integrated into WordPress, includes the library of core blocks. The core blocks are NOT packaged as part of the theme. If you want to look at a specific block’s source code, you can find it in the Gutenberg GitHub repo.

Themes can modify the appearance of existing blocks by registering styles but can’t add new ones. To develop and add custom blocks, you must integrate them as part of a plugin. If you could add blocks as a part of a theme, the block would break when the user switched themes. Click here to learn more about creating your custom blocks.

Twenty Twenty-Three (TT3) block theme network requests

This is a WordPress performance blog, so let’s take a look at the TT3 theme load performance. Out of the box, on a decent web host plan, TT3 will give a perfect 100-performance score on PageSpeed Insights. I opened my browser’s developer tools (F12), clicked the network tab, and used CTRL-F5 to reload the page. The network tab shows only a few assets requested:

As you can see, the TT3 theme is quite a bit lighter than traditional, non-block WordPress themes. It weighs in at 27kB transferred over the network with gzip compression. Here’s a summary of what it loads:

lab.local	This is the HTML output from WordPress
http://lab.local/wp-includes/blocks /navigation/style.min.css? ver=6.1.1	This is the CSS for the navigation block (menu)
http://lab.local/wp-includes/blocks /navigation/view.min.js? ver=c24330f635f5cb9d5e0e	JavaScript for the Navigation block
http://lab.local/wp-includes/blocks/navigation /view-modal.min.js? ver=45f05135277abf0b0408	JavaScript for responsive “hamburger” Navigation block
http://lab.local/wp-includes /js/wp-emoji-release.min.js? ver=6.1.1	This is Twemoji from Twitter to standardize emojis across systems.
http://lab.local/favicon.ico	This is the initial favicon request which results in a 302 redirect for a PNG file(next one down)
http://lab.local/wp-includes /images/w-logo-blue-white-bg.png	This is the site icon provided by WordPress

For comparison, the Twenty Seventeen theme from six years ago delivered 267kB across the network. The theme included a beautiful 115kB image of a potted plant on a desk, but the rest consisted of JQuery, JQuery components, and CSS files. Modern block themes no longer need these additional assets.

Can we make TT3 even lighter?

Navigation Block

You’ll note that three different files are needed for the navigation block in TT3, including quite a bit of JavaScript.

After a little investigation into the navigation block source code, I reached out to Ari Stathopoulos, a core WordPress developer. Ari directed me to a post he wrote in 2021, which explained that small block assets are sent in line with the HTML until they reach a 20KB limit. After the 20KB limit, assets are downloaded individually. You can change this using the “styles_inline_size_limit” filter. In the code example below, he shows how you can change the size limit to 50KB:

add_filter( 'styles_inline_size_limit', function() {
    return 50000; // Size in bytes.
});

Another alternative to reduce this clutter might be rebuilding the navigation block using pure CSS.

Emoji support script

The Twemoji script can go, please. Most systems support emojis without this script, and I am not fussy about how they look. Unfortunately, you need a plugin or custom theme to turn this off.

Favicon

To eliminate the favicon 302 redirect request, you can add a site logo block in the site editor and enable it as your site icon in the block settings.

Where’s the CSS file?

You’ll notice something missing from the network requests… there is no separate style.css download. We saw a request for the navigation CSS but where’s the rest? Traditional WordPress themes required a style.css file containing the page CSS and the theme metadata including the title, description, author, etc.

WordPress block themes also require a style.css file, but the Twenty Twenty-Three theme doesn’t link it in the HTML. If you view the source on the returned HTML, you will notice the following:

• WordPress packs much of the CSS inline in the head element.
• The CSS is modular – In the example below, you can see a CSS section for each block type, including a descriptive ID attribute.
• WordPress limits the CSS to only the blocks used on the page.

<style id='wp-block-post-excerpt-inline-css'>
    .wp-block-post-excerpt{margin-bottom:var(--wp--style--block-gap) 
    ...truncated...
</style>
<style id='wp-block-post-date-inline-css'>
    .wp-block-post-date{box-sizing:border-box} ...truncated...
</style>
<style id='wp-block-spacer-inline-css'>
    .wp-block-spacer{clear:both}
</style>
<style id='wp-block-post-template-inline-css'>
    .wp-block-post-template{list-style:none;margin-bottom:0; 
    ...truncated...
</style>

This is a highly performant way to load a page because the browser doesn’t have to stop and make a separate request to get the CSS file. Additionally, WordPress loads much of the CSS inline in the HTML head element, resulting in minimal un-styled content. I approve.

What’s this? SVG in WordPress block themes?

I am a big fan of SVG files. They are a great way to add responsive visuals to your website. Unfortunately, WordPress doesn’t support SVG in the media library for security reasons. I have to install a plugin to get my SVG support, which makes me sad.

Do you know that little hamburger menu websites display on a mobile device to access their menu? Imagine my surprise to see an SVG tag in the navigation block to render it. Come on, WordPress, can’t you let everyone in on the fun?

As I started looking around, I noticed WordPress uses SVG in a number of places. If you want to use SVG files in the media library on your WordPress site, the Safe SVG plugin works very well.

JavaScript Placement

I discovered that the Twitter emoji JavaScript library and the navigation block library are linked in the document’s head. I assume they did this to ensure the early rendering of emojis and the navigation menu, avoiding any content shifting during the page load. I prefer placing JavaScript at the end of my HTML to prevent it from blocking the page rendering.

Skip links

I found some JavaScript towards the end of the HTML to generate a “skip link.” Skip links are an accessibility feature to allow screen reader users to skip tabbing through all the header elements at the top of the page, I.e., the navigation bar, and jump right to the content. You can learn more about skip links on the Make.WordPress.org site.

I looked at the WordPress source, and all block themes get the skip link JavaScript in the footer by default. Why can’t we create the page skip link server-side while rendering the page?

Lean, Semantic HTML

The Twenty Twenty-Three theme home page HTML output is relatively lean once you get past all the JavaScript and CSS in the head element. The body is only about 60 lines of HTML. This will grow as you add more posts but isn’t nice to start off with something so lean?

The Twenty Twenty-Three theme uses semantic HTML tags appropriately and scored well on accessibility tests. Here are some examples:

• The header is in a header element.
• The menu uses the nav element.
• The main page content is inside a “main” element.
• List items using the ul/li tags.
• Footer content is inside a footer element.

These may seem like obvious choices, but I have many legacy themes that used generic div tags for everything.

Overall, the HTML appears lean, well-crafted, and well-thought-out. The organization remains consistent even when you add blocks to the page using the site editor. If early GUI page editors produced horrifying HTML that shocked you or if you struggled with exporting HTML from a Word document, the WordPress block theme output will pleasantly surprise you.

WordPress block theme files and folders

Let’s take a look at the Twenty Twenty-Three theme files and folders. I am using Local to run a local copy of WordPress so the path to the Twenty Twenty-Three theme folder is “…\Local Sites\lab\app\public\wp-content\themes\twentytwentythree.”

Here’s what you will find:

• assets
  • fonts
    • dm-sans
    • ibm-plex-mono
    • inter
    • source-serif-pro
• parts
  • comments.html
  • footer.html
  • header.html
  • post-meta.html
• patterns
  • call-to-action.php
  • footer-default.php
  • hidden-404.php
  • hidden-comments.php
  • hidden-no-results.php
  • post-meta.php
• styles
  • aubergine.json
  • block-out.json
  • canary.json
  • electric.json
  • grapes.json
  • marigold.json
  • pilgrimage.json
  • pitch.json
  • sherbet.json
  • whisper.json
• templates
  • 404.html
  • archive.html
  • blank.html
  • blog-alternatives.html
  • home.html
  • index.html *
  • page.html
  • search.html
  • single.html
• readme.txt
• screenshot.png
• style.css *
• theme.json

* style.css and templates/index.html are the only files necessary in a theme.

assets/fonts folders

The assets folder only has a fonts folder. I suspect if you built a theme with images, they would live in an images folder under assets.

The fonts folder is self-explanatory. TT3 includes four font folders for each of the four typefaces (not including the system font option). Each folder contains the font files in WOFF2 format and a text file containing the license information. The fonts included in TT3 are all licensed under the SIL Open Font License.

The included Source Serif Pro and Inter font files are giant, and I don’t know why you would want to use them. Perhaps they contain more glyphs for international use. The inter font weighs in at 785KB! I added a lighter-weight serif font to use in the FireflyWP theme headers.

parts folder

The parts folder stores HTML template parts like “header.html,” which the theme uses across multiple pages. More on templates when we get to the templates folder.

patterns folder

Block patterns are like mini themes of pre-arranged blocks you can add to a page and customize. Let’s say you have a formula for a great product landing page with excellent conversion rates. It might include a headline, product description, an intro video, and a call to action button. Instead of recreating this formula and placement on all your landing pages across all your websites, you could build a reusable block pattern to insert and update where ever you need it.

The TT3 theme contains block patterns for a call-to-action, footer, comments, and others. If you open one of these block pattern files, you will find HTML with “block markup.” I’ll go into more detail on this later in the templates section.

styles

The styles folder contains preset theme styles encode in JSON. There is a JSON file in the style folder for each style variation displayed under “Browse styles” in the global styles section of the WordPress site editor.

templates folder

The templates folder contains an HTML template for each type of WordPress page. I.e., the home page, single post, single page, and search page. The HTML template files effectively replace the PHP files used in legacy themes.

Specially formatted HTML comments, known as block markups, instruct WordPress on which blocks and style modifications to include in the HTML output. Here is a snippet from the TT3 home.html template file to give you an idea what this looks like:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main",...truncated...-->
<main class="wp-block-group" ...truncated...>
<!-- wp:heading {"level":1, ...truncated...-->
<h1 class="alignwide" ...truncated...>Mindblown: a blog about philosophy.</h1>
<!-- /wp:heading -->

Look at the first line containing “template-part.” This is pulling in the header template part in the “parts” folder. Since the header template part is utilized across multiple pages, the same line repeats in other template files.

readme.txt

The theme readme.txt file has similar content to the theme metadata in the style.css file, including the theme name and description. It also has a change log.

screenshot.png

The screenshot.png file is exactly that, a screenshot of the theme that shows up in the themes directory.

style.css

There is a style.css file in the root of the theme folder, but it doesn’t have any CSS. It only has the theme metadata (name, description, author, etc.). The CSS is all loaded into the HTML head by WordPress. You could put style information here, but I think it is more appropriate to put it in the theme.json file.

theme.json

Theme.json is new to block themes and is a central component of your theme. It defines your theme’s style, layout, and site editor options. WordPress block styles are defined by WordPress core, user changes, and the theme itself. The theme.json file manages these styles, ensuring that only the most relevant ones are enqueued.

The TT3 theme.json file has the following structure:

• Schema and version
• Custom Templates
  • Blank
  • Blog (Alternative)
  • 404
• Settings
  • Default color palettes
  • Layout properties include content width and “wide size”
  • Spacing – The TT3 theme uses clamp, rem, and vw to manage spacing
  • Typography including family, stretch, style, weight, size, and the src path in /assets/fonts
• Styles
  • Blocks (I.e., core/naviagation, core/post-author, core/post-content, etc.)
  • Color (background and text defined using CSS custom properties/variables)
  • Elements (I.e., button, h1…h6, link)
• Template Parts
  • I.e., header, footer, comments, post-metadata

Where and how WordPress site editor changes are stored

When you make changes to a WordPress block theme in the full site editor, and click “Save”, WordPress stores your changes in the the WordPress database (usually MySQL). The theme files remain untouched.

Each time you save changes to your theme, a new revision is written to the database. The part of the template you change is saved to the wp_posts table in the database. If you change the theme colors for example, it saves the block of JSON for the theme styles that includes the colors. If you add a social media icon to the home page layout it will save a snippet of that template with your change versus the entire theme.

In the MySQL Workbench screenshot below you can see the new rows created in the wp_posts table as I saved my changes in the site editor.

Building themes using the site editor export

The site editor boasts an outstanding Export feature that merges all your site editor changes from the database into the current theme and saves them as a new zipped theme package. This feature enables non-developers to create and distribute custom themes, further democratizing theme development while delivering excellent page load performance.

What’s next?

At this point, you should have a basic understanding of the Twenty Twenty-Three WordPress block theme structure. In a future post, I’ll cover creating a new theme from scratch.

The post WordPress block theme dev notes appeared first on FireflyWP.

Setup WordPress

There are several ways to set up WordPress, but I prefer the two options below.

Local is an excellent option if you want to run WordPress on your local computer for testing, following tutorials, or developing themes and plugins. Go to localwp.com, click “Download,” Choose your platform, fill in their form, and launch the installer once it’s downloaded. That’s it!

If you want to run a production version of WordPress that is available to the world, I recommend a VPS droplet on DigitalOcean. I wrote an article detailing how to setup WordPress on DigitalOcean in detail here.

Log in to WordPress

Once WordPress is running, log in using the URL domain followed by “wp-login.php,” I.e., “nature42.com/wp-login.php.” If you are using Local, it will provide a link on the console screen you can use to open the login screen. After you log in successfully, you should see the WordPress dashboard.

Create Some Posts

Before you start customizing the look and feel of your WordPress site, it helps to create at least six filler posts with featured (cover) images. These posts will help you see how your home page looks as you customize it. You can use some filler text generated by ChatGPT or loremipsum.io.

To create a new post, from the top of the WordPress dashboard, click “+ New” and then “Post.”

Give your new post a title, add your filler text, a featured image, and an excerpt. The new WordPress default theme, Twenty Twenty-Three, will use all four items when it lists each post on your home page.

Unsplash.com is an excellent resource of free-to-use photos for your post’s featured image. The lowest resolution option on Unsplash will look great on a web page. Depending on your final design, it is usually a good idea to decide if you will use landscape or portrait images and stick with one or the other. Unsplash allows you to filter on either orientation. To upload your image, drag it from the folder where you downloaded it to the gray box under “Featured image.”

Add a page

In addition to adding a few posts, it is a good idea to add at least one page, such as an “about” page. The main difference between a post and a page is that a page is attached to the navigation menu. Adding a page will allow you to see how pages and the navigation menu look in your design.

The Twenty Twenty-Three theme

Now it’s time to customize your WordPress site using the new site editor. For this how-to, we will use the WordPress Twenty-Three theme. It is the default theme for new WordPress installations at the time of this writing. It may seem a bit barebones at first, but it loads fast, aligns with best practices, and is highly customizable.

From the dashboard, click “Appearance” and then “Themes.”

Launch the WordPress Full-Site Editor

To access the WordPress full-site editor, log into the dashboard and click “Appearance” on the left-hand menu. As of this writing, the full-site editor is still in beta, but the beta flag may be removed when WordPress 6.2 is released.

By default, the editor will open your site homepage in the editor. Let’s cover a few basics before making changes.

Templates and Template Parts

Click the WordPress logo in the upper left corner of the editor to display the templates. The editor provides a template for each page type in WordPress. Here are the more important ones, including descriptions from the editor:

• Single – “The default template for displaying any single post or attachment.”
• Page – “Displays a single page.”
• Home – “Displays posts on the homepage or the Posts page if a static homepage is set.”

In addition to templates, WordPress allows you to define “Template Parts.” These template parts can be used inside of page templates so you can include and modify common elements across your entire site in one place. For example, the “Header” will be used across all the different page types and will likely contain your site logo and navigation menu.

Once you’re done looking at the templates, click “Home” on the templates menu or ”Site” to return to the home page view in the editor.

List View

The editor allows you to select and modify different elements in each template. It can be challenging to tell which item you have selected when they are nested inside each other. The list view lets you easily see the hierarchy and choose the element you need. Click “List View” icon to open it up.

Global Styles

Styles allow you to change style combinations, colors, typography, and layout across your WordPress site. To launch Styles, click the half-moon icon in the upper right corner of the editor.

The WordPress Twenty Twenty-Three theme provides a number of preset styles you can try out. Click “Browse styles” and select a few of the different preset styles to see how they change the look of your site.

If you don’t like any of the preset styles, you can customize your own using the Typography, Colors, and Layout options.

Groups, Rows, and Column(s)

The WordPress editor allows you to organize your content into groups, columns, and rows. The list view feature is really helpful when editing these layout elements. As you examine the Twenty Twenty-Three theme, you’ll notice groups are used for the top-level elements that contain rows or columns.

Time to make some changes

Add a site logo

Start by replacing the site title with your a logo. Open the list view and select the row holding the site title. Click the plus in the lower right-hand corner of the row to insert a block. Search for “logo” to locate the “Site Logo” block and click it. Select an image from your media library or upload a new one.

Once your logo is added, click the site title, the ellipsis, and “Remove Site Title.”

You can increase the size of the logo by grabbing one of the frame bubbles and dragging it out.

Remove the “Mindblown” heading and add a tagline

Add a tagline by clicking the “+” and adding a Group, Row, and Tagline, and then set the row to “Wide width.” See the screenshot below.

Delete the “Mindblow: a blog about philosophy.” heading by selecting the heading in the list view and then clicking “Remove Heading.”

Set the overlay opacity on the page template feature image to zero

In the site editor, click the logo in the upper left-hand corner, then “Templates” and the “Single” template. Select the post featured image at the top and set the overlay opacity to zero. Save your changes and open up one of the posts in a separate browser window to see your changes.

Further Customizations

WordPress provides a way to add your own custom CSS if the full site editor doesn’t provide access to a CSS property you want. In the site editor, click the block you want to add a class to in the list view, click the ellipsis, and then “Show more settings.”

This should open the block settings pane on the right. Scroll to the bottom of the settings pane and click “Advanced.” Enter any CSS class names you like separate by spaces under “Additional CSS Class(es)” and save your changes.

Open a new browser tab and enter “https://your-domain/wp-admin/customize.php” but replace “your-domain” with your actual domain. This should open a customization menu.

Click “Additional CSS” to open a text input box where you can enter any additional CSS you like.

Click the “Publish” button at the top of the page to publish your custom CSS.

The Create Block Theme Plugin

The WordPress site editor allows you to customize almost everything, but if you want to create your own theme, you can install the “Create Block Theme” plugin to create it from scratch. It also allows you to export your current theme, create child themes, overwrite the current theme, etc.

Conclusion

The WordPress site editor is a game changer. It gives you much more control over the look and feel of your website without editing your HTML and CSS manually. It will be interesting to see how this relatively new feature evolves over the next year.

The post How to build a custom WordPress site with no code appeared first on FireflyWP.

Why is Google Analytics so popular?

There is a lot to like about Google Analytics. It’s a free service loaded with features and is highly customizable. If you use other Google services, you can use a single “Google tag” to integrate those services with your website. It’s no surprise that Google Analytics owns about 75% of the web analytics market share in 2022, per Statista.

The hidden cost

Google Analytics (GA) adds quite a bit of JavaScript to your pages when you add their tags. This is also true for any WordPress analytics plugin that leverages GA. You might ask, how much is “quite a bit?”

To test Google Analytics, I installed the official “Site Kit” WordPress plugin by Google on my FireflyWP WordPress instance. Site Kit automatically adds the Google Analytics “tags” to your WordPress home page. To their credit, Google made the setup super easy.

I verified Google Analytics was set up correctly and recording traffic. I then opened my browser developer tools and fully reloaded the site. Here is a screenshot with all the Google Analytics requests outlined in red:

Site Kit combined with Google Analytics added over 130 kilobytes of JavaScript to my home page. This is hardly noticeable over a high-speed data connection but slows you down on a mobile device with cellular.

Google on Google Analytics

Google has an excellent tool called PageSpeed Insights to measure your page load performance. I used it to test FireflyWP with and without the Google Site Kit plugin activated. Here are the results:

Google Analytics Enabled

Google Analytics Disabled

When Google Analytics was added, site performance dropped 5%, and the page took an additional 300ms to load. Again, it’s alright if you have high-speed internet, but it will be an easily perceptible difference at lower data speeds.

PageSpeed Insights may suggest that Google Analytics is loading unused JavaScript on your page. This makes me chuckle a bit every time I see it:

Even Google seems to think Google Analytics is an opportunity to reduce your page load time!

If you want to learn how to use PageSpeed Insights to diagnose other performance issues, you can read my WordPress Performance Part 1 article here.

Alternatives

There are alternatives if performance is important to you and you’re willing to pay for an analytics solution. As a bonus, they are privacy-first and GDPR-compliant. The cons are they cost money and won’t be as full-featured as Google Analytics.

Simple Analytics

Simple Analytics supports event tracking “without tracing individuals.” Their script is only 3Kb which is a fraction of the size of the Google Analytics JavaScript. The user interface is simple, and they offer a WordPress plugin for easy integration.

Plausible

Plausible is super lightweight with a JavaScript footprint of less than 1Kb. Like Simple Analytics, they also provide a simple user interface and WordPress integration via a plugin. I have been using Plausible on this site for a few weeks now, and the performance overhead is imperceptible to PageSpeed Insights. When I turn Plausible on and off, there is no change in the performance score.

I am happy with the stats Plausible provides:

• General visitors and pageviews
• Where visitors are coming from
• Top pages
• Locations
• Devices

I think that’s good enough.

In addition, you can set up custom events to track when a user performs a specific function, like submitting a form or making a purchase. You can implement events by adding special classes to your buttons and other elements or trigger them directly using JavaScript. The Plausible documentation covers all of this here: https://plausible.io/docs/custom-event-goals

Plausible is open source, so you could self-host it if you wanted to. BTW, no, I don’t get any kickbacks for recommending Plausible or Simple Analytics.

Conclusion

If site performance and privacy are important, you have alternatives to Google Analytics. Did I miss any other lightweight web analytics services? Let me know in the comments below!

The post Google Analytics page performance overhead appeared first on FireflyWP.

The basics

• WordPress.org – Get WordPress here.
  • Themes – Browse free themes. You can filter on “Block Themes” that support full-site editing.
  • Patterns – Copy paste layout components for use in block themes.
  • Plugins – Browse through over 60,000 plugins.
  • Learn WordPress – Full courses on WordPress. Want to learn how to build the new block themes? Go here.
  • Forums – Self-explanatory.
  • WordPress.tv – Free WordPress tutorials in multiple languages. The State of the Word 2022 talk can be found here.
  • Showcase – Best in class WordPress Sites
• Make WordPress – Want to help make WordPress even better? Everything you need to know to help shape the future of WordPress.
• Automattic – The commercial arm of WordPress run by the founder, Matt Mullenweg.
• WordPress.com – A managed WordPress hosting service by Automattic.
• WP Tavern – A WordPress blog and podcast owned by Matt Mullenweg. Most of the recent content posted is by Sarah Gooding.
• WPBeginner – Great WordPress blog started by Syed Balkhi.

Forums and Social Media

• WordPress.org Forums – The official WordPress forums.
• Facebook WordPress. – Facebook group dedicated to WordPress. I have had good luck getting help with a couple things from this group.
• WordPress group on LinkedIn – This is the larger of the WordPress groups on LinkedIn. Matt Mullenweg is one of the admins.
• WordPress Global Community on LinkdedIn

People in WordPress (No Particular Order)

• Matthew Mullenweg – Founding developer of WordPress and CEO of Automattic Inc., the commercial entity associated with WordPress.
• Syed Balkhi – Investor, Entrepreneur that started WPBeginner.
• Allie Nimmons – WordPress evangelist and trainer. If you are new to WordPress, she has a great “WordPress Essential Training” course on LinkedIn Learning.
• Ari Stathopoulos – WordPress Core Contributor. Knowledgeable in the area of block asset loading.
• Carolina Nymark – Theme developer and WordPress Core contributor. Carolina provides full site editing tutorials on her website, fullsiteediting.com.
• Fabian Kägy – WordPress Core contributor and UX dev @10up. He was recently interviewed on the Syntax Supper Club podcast.
• Jamie Marsland – Jamie has a fantastic Youtube video series called Rapid Website Recreations where he recreates popular websites in WordPress. This a great resource to learn about practical website building with blocks and introduces some great tools. If nothing else check out his “WordPress Gutenberg Site Editing & Block Themes: Build Anything!” video.

WordPress Performance Resources

• FireflyWP – This is a shameless self-promotion and a WordPress performance focused blog.
• The WordPress Core Performance Team – “Dedicated to monitoring, enhancing, and promoting performance in WordPress core and its surrounding ecosystem.” Performance tagged posts on other make.wordpress.org blogs:
  • Core
  • Plugins
  • Themes
• Performance Lab Plugin – “A collection of modules focused on enhancing performance of your site.” Put out by the WordPress Performance Team.
• MDN on Responsive Images – Make sure your theme is picking the right image for the job.
• Google Using site speed in web search ranking – Old announcement from Google in 2010 that they started counting a site’s load performance towards its search ranking.
• WP Speed Matters – Another WordPress performance blog
• PageSpeed Insights – Google’s page load speed measurement tool. Powered by Lighthouse.
• How to Test Your WordPress Site Performance and Measure Speed Results – WP Rocket
• The Ultimate Guide to Boost WordPress Speed & Performance – From wpbeginner.
• 25 Easy Ways to Speed Up Your WordPress Site in 2022 – From Jamie Juviler at Hubspot.
• How to Speed Up Your WordPress Site (Ultimate 2023 Guide) – From Kinsta. This article has good information (a bit long actually), but keep in mind Kinsta’s business is managed hosting, so it may be a bit slanted.

Full Site Editing and Block Themes

• Twenty Twenty-Three Theme from WordPress – My favorite block theme
• Block Editor Handbook – On developer.wordpress.org
• Build a block theme – On developer.wordpress.org
• Add custom CSS to your block theme: https://yourdomainhere/wp-admin/customize.php Many thanks to Emily Wilkinson, moderator for the Facebook WP group, for showing me this.
• Full Site Editing by Carolina Nymark – All about full site editing with a cool looking theme generator.
• A Developers Guide to Block Themes – Part 1 – Course on learn.wordpress.org.
• Ollie Block Theme – A beautiful block theme by Mike McAlister.

Design

• Awwwards.com – Design awards. Inspiring designs, but many don’t have much content. It should be called the “Most incredible web backgrounds” award.
• Dribbble.com – Design portfolios. Good source of inspiration for web and mobile designs.
• Behance.net – A portfolio hosting site from Adobe. A bit more focused on illustration, photography, graphic design, etc.
• Web Design Standards vs. Website Best Practices: Our Review of 500 Sites [NEW RESEARCH] – Orbit Media Studios
• How to Design A Blog: The 13 Best Practices of the Top 100+ Marketing Blogs – Orbit Media Studios

Popular Plugins

• Advanced Custom Fields – A popular plugin for extending WordPress.
• UpdraftPlus – My preferred backup solution. You can find my tutorial here.

Fonts

• Add a custom font to WordPress without a plugin – FireflyWP
• Google Fonts – Download and convert to WOFF2 if you use these.
• Best practices for fonts – web.dev: Optimize web fonts for Core Web Vitals.
• Fontsource – Open source fonts packed in zip files with WOFF2 web font format included.

Photos, videos, illustrations, icons, etc.

• Smithsonian – The Smithsonian has thousands of photos and art pieces under creative commons. Check out their digital backgrounds.
• Unsplash.com – Excellent free to use images for your blog. Be sure to credit the photographers.
• Pixabay – Free to use photos, videos, music, illustrations, etc.
• Flaticon – Icons of course. You can either attribute the author or pay a subscription fee.
• Freepik – Good source of stock vectors and illustrations.

Interesting WordPress sites

• Vin De Syrah – A spirit and wine parlor WordPress site I stumbled upon that has cool little interactive elements.

WordPress Courses

• Tom Finley’s list of WordPress Courses – I know. I know… a link to another list but he already did all the work!

WordPress Development

• LocalWP – Develop WordPress sites locally

Domain names

• Instant Domain Search – This site will quickly tell you what variations of your keyword are available to register.
• Namecheap – Where you can get domain names. I use Route53 only because I already have an AWS account for other things.

Creating content

• Resources that will help you write great content – FireflyWP
• Copyblogger – All about writing and content marketing
• Transition words – Yoast SEO
• Claire Paniccia – Content marketing strategist. See her Yoast review.
• Orbit Media Studios Blog – “Practical tips for content marketing, analytics and web design“
• 11 Blog Images: Best Practices for Adding Great Pictures To Every Post – @Orbit Media Studios
• 15 Types Of Blog Post Titles That Get Clicked: A Beginner’s Guide – @LocationRebel
• A 3-Step Blueprint for a Brilliant Blog Launch – @Copyblogger

AI

• ChatGPT – Conversational AI
• Jasper Content Generator – Haven’t touched but I probably should at least check it out.
• DreamUp – Text driven image generator by DeviantArt

SEO (Search Engine Optimization)

• Yoast Blog – Yoast is a popular plugin for SEO. I am not super focused moving up the search engine ranks but I do like the ability to easily setup Open Graph metadata to support links previews. This allows you to set a preview image and description on each post that will show up when someone pastes your post links to social media sites. Click here to learn more.
• What is keyword research? (it has nothing to do with green lights) – by Claire Paniccia
• Yoast SEO Review: Why it’s not all it’s cracked up to be – by Claire Paniccia. I liked Yoast in general but there are a few red lights. See her notes on accidental keyword stuffing.

Analytics – How many visitors have you had?

• Plausible.io – This is what I use instead of Google Analytics. It adds less than 2k of JavaScript to your site load.
• Simple Analytics – A privacy first Google Analytics alternative
• Google Analytics – Free for many users but adds over 40k of JavaScript to your site load.
• How to Load Google Analytics 10x Faster in WordPress – From WP Speed Matters.

The post Awesome WordPress Resources appeared first on FireflyWP.

Page builders filled a gap

One of the reasons I love WordPress is that it helped democratize the web by making it easy for anyone to publish content. Unfortunately, it hasn’t been as easy to change the site design. Before full site editing, if you wanted to change your site design, you had to find another theme, build your theme, or manually add some custom CSS.

Page builders such as Elementor, Divi, and others filled this gap by providing a visual interface to customize WordPress sites without manually writing HTML, CSS, and JavaScript. They allow you to drag and drop components onto pages and change various design attributes via a GUI interface. I.e., Layout, padding, margins, backgrounds, type, etc.

Page builder cons

Page builders are great, but there are a few cons. The first is the pricing structure. Page builder vendors often charge a yearly fee to use their software. Understandably, they would like to get paid for their product, but then you are locked into a subscription fee each year long after you’re done with your customizations.

The second issue is content lock-in. Page builders may add “shortcodes” to store all the page formatting and styling data. If you switch from a page builder theme/plugin to a standard theme, your content will be littered with shortcodes. If you find yourself in this spot, here is an article that might help.

Lastly, performance can be an issue because those shortcodes must be interpreted at run time. Hopefully, you can use page caching. If not, I have seen a home page take over eight seconds to render on a shared host. You might think, “Oh well, upgrade my hosting plan,” but then you’re on the hook for the page builder yearly subscription and a premium hosting plan.

WordPress full site editing to the rescue

When I first read about WordPress full site editing, I didn’t fully grasp how transformative it was. It provides similar functionality to page builders but is built-in to WordPress. To launch the full site editor, you must have a “block theme” currently active, and then click the new “Editor” option under “Appearance” in the WordPress dashboard.

The WordPress “Twenty Twenty-Two” and “Twenty Twenty-Three” themes are both block level themes. I recommend the Twenty Twenty-Three theme to get started because it feels a bit more like a blank canvas. I built this site, FireflyWP, using the Twenty Twenty-Three theme. Note that legacy WordPress themes must be updated, or full site editing won’t be available.

The site editor is still rough around the edges, but I achieved 80% of what I wanted. The other 20% I was able to do using custom CSS. The site editor allowed me to change the background, and layout, reuse page elements, and style just about everything. There is a list view that will enable you to identify and select nested components in the page layout quickly.

You can edit page templates for the home screen, single posts, pages, etc. You can also edit template parts, such as the header, which can be used across the different page templates. There are numerous content blocks like quotes, code, media embeds, widgets, etc. You can leverage reusable patterns and define your own custom reusable blocks.

Block theme performance

As I mentioned earlier, I am using the Twenty Twenty-Three theme for this site. I made quite a few customizations to it and am running nine plugins, including a page caching plugin. It is hosted on a relatively modest $12 per month Digital Ocean shared Droplet plan.

Here are some home page load stats:

The uncached page load time, including DNS resolution, is 233ms.

The cached page load time is 51ms.

For comparison, Google.com takes 218ms on my internet connection so 51ms is excellent!

What’s missing in full site editing?

Here is my wish-list for the full site editor (Updated 12/22/2025):

• Responsive design: You currently can’t easily define how things will behave on mobile devices. It looks like this is coming in the 6.2 release.
• You can now edit the desktop, mobile, and tablet versions of your website.
• There’s not an easy way to upload and use custom WOFF2 fonts.
• Font upload support was recently added to the WordPress site editor.
• It’s sometimes confusing what you’re editing. I.e., Site versus page properties.
• Use the Site Overview/List view feature to easily see what you’re editing.
• Drag-and-drop components would be excellent, but honestly, I don’t mind just clicking the “+” to add components.
• Visual drag and drop was added in WordPress 6.9.
• Better support for custom CSS. Although I can do most things in the site editor, I will sometimes want to add some custom CSS. You can easily add additional CSS classes to each component, but it’s not obvious where you can add your custom properties.
• You can now customize all block components in the block editor and add additional custom CSS under the “Advanced” section.

As of December 2025, all my wish-list items have been added to WordPress!

Learn more

The following video from Automattic, voiced by Allie Nimmons, provides an excellent comparison between the Gutenberg block editor and page builders.

Dive in!

I encourage you to dive into full site editing if you haven’t already. Stand up a WordPress instance, install the Twenty Twenty-Three theme, and start tinkering in the editor. Once you get a feel for how everything works, you will be pleasantly surprised by how much you can do without changing your theme.

The post Will WordPress site editing replace your page builder? appeared first on FireflyWP.

Separate your marketing and app sites because…

• Your home page/marketing site and web application serve two different purposes. Your home page is there to help people discover and purchase your product. Your web app is the product.
• Initially, you may manage both, but eventually you’ll someone to help. It will be easier for a marketing pro to work on your WordPress site.
• It will become more challenging to separate the two if you don’t do it early on.
• Your marketing site and web application will likely be better off on two different technology “stacks.” Your marketing site will likely be less interactive and can be hosted using off-the-shelf technologies and services such as WordPress, Webflow, Squarespace, or Wix. Your web application will likely require custom development that should be managed separately.
• The two will require different backup strategies. You will probably depend on a code repository to back up your web application’s code (I.e., GitHub). For your marketing site, you will want to back up the content, so if you are using WordPress, a plugin like UpdraftPlus makes more sense.
• Different search engine optimization strategies: Marketing sites should be search engine friendly for SEO with a permissive robots.txt file. Dynamic web applications are rarely search engine friendly, and you usually will want to opt out of indexing.
• If your marketing site goes down, you want to avoid bringing down your web application and vice-versa.
• Your marketing and engineering teams can move faster because they won’t be stepping on each other’s toes.
• You may eventually set up a continuous integration and delivery (CI/CD) pipeline for your web application. A CI/CD solution isn’t necessary for a marketing site because only the content needs to be managed.

How to setup separate marketing and web app sites

Here’s a common pattern companies use to set up their separate marketing and web app sites. Let’s say you own the “example.com” domain. Instead of hosting your app on example.com, make it your marketing/home page. Use the app.examples.com subdomain to host your web application. Add a link in the upper right-hand page of your marketing site that says “Sign-in,” which links the user to the login page of your web application on app.example.com.

Existing customers can easily see where to sign in to your web app product, and prospects can easily find your brand and product information. By the way, WordPress is an excellent option for your marketing site. If you follow my tutorial, you can get it up and running in less than an hour.

Please comment below if you find this helpful or have a better strategy to manage your marketing and web application sites. Thanks! -Mark

The post Why separate marketing and web app sites work better appeared first on FireflyWP.