Shufflehound made a big splash in March when it released Lemmony, a free WordPress block theme with more than 30 patterns. This was the company’s first block theme on WordPress.org and it is already active on more than 1,000 websites. Building on the success of this theme, Shufflehound has created a child theme for agencies.
Lemmony Agency bears a strong resemblance to its parent theme but with more agency-specific patterns. This theme ships with 25 new custom block patterns, on top of the ones already included in Lemmony, for a total of more than 50 patterns.
The patterns unique to this theme suit agencies but would also work well for non-profits, advocacy, portfolios, or businesses of any kind. These include a hero with services, accordions for things like FAQ, counters, more pricing tables, services with icons or images, a blockified sidebar, testimonials, and more.
The theme’s creators have done an excellent job in organizing all the patterns available to users. Inside the pattern explorer/inserter, they have been separated into different panels for the patterns specific to the Lemmony Agency theme, the Lemmony patterns, and the Lemmony full-page patterns. This makes it easier to build pages, since users won’t have to hunt through all the patterns lumped together.
The Lemmony Companion plugin, recommended when users install the theme, adds a handful of custom blocks that some of the patterns rely on to work. It includes blocks for a counter, icon, post featured image caption, typing text, hero auto-slider, and accordion.
This might be the best way to ensure these features are styled exactly to match the theme and give users more creative control inside these particular blocks. Sometimes using third-party plugins to add sliders or icons can look like it’s bolted onto the design in an unsightly way. A companion plugin designated specifically for this theme makes sense in this instance.
Shufflehound made an interesting choice creating Lemmony Agency as a child theme of what is already a very flexible multi-purpose theme. This certainly could have been shipped as full-page pattern but it would have also greatly expanded the patterns packaged with the parent theme. In these early days of block theming, it’s not yet clear what users might consider “pattern bloat” or too many patterns, especially since they can easily be categorized under various panels inside the explorer.
Lemmony Agency is a solid option for building websites that need to showcase their services, display pricing, or simply maintain an informational web presence. It’s available for free from WordPress.org and will auto-install the parent theme at the same time.
WordPress is approaching its 20th anniversary, and for the majority of those years, contributors have cranked out a new default theme. Even though the structure and supported features of default themes have drastically changed over the years, contributors are still actively maintaining all 13 of the “Twenty” themes.
A new proposal on WordPress.org recommends winding down active maintenance on older themes and implementing a new system of requirements for retiring them.
“The level of effort to support 13 themes is not insignificant, especially in the times of the rapidly evolving block editor,” Bluehost-sponsored core contributor Jonathan Desrosiers said. “The burden of maintaining these themes has historically fallen on the Core team to ensure they continue to receive any needed updates.” These tasks include things like ensuring compatibility with newer PHP versions, fixing bugs, updates and deprecations of dependencies, security updates, and much more.
“Because there are so many, it’s not uncommon for it to take several months before older default themes properly support newer features added in WordPress Core,” Desrosiers said. “Additionally, themes created prior to the existence of certain APIs are often unable to fully take advantage of these new features (global styles, block patterns, etc.).”
Desrosiers contends that reducing the support burden on contributors will allow them to focus on ensuring the most modern block-based themes deliver the best experience.
“It also helps clear the path for work on new block theme-focused experiments and initiatives (such as the Community Themes Initiative) attempting to refine the role that themes will have in the block editor era,” he said.
Themes released through the WordPress.org account via the Community Themes Initiative, like the recent Stacks slide deck theme, will be officially supported, adding to the load. These themes, however, have the benefit of working with the Site Editor and all the latest features WordPress offers. When dealing with limited volunteer resources, supporting older default themes doesn’t have as much upside as spending these efforts the more modern themes.
WordPress bundles the three most recent default themes in the latest download. This proposal seeks to retire older themes after a minimum of five years of support and when usage falls to less than 1% of all WordPress sites as determined by WordPress.org data. Using this criteria the default themes Twenty Ten through Twenty Sixteen would be retired and only receive security updates. Desrosiers suggests a yearly assessment of usage data to determine which themes would be retired.
The three most recent WordPress default themes would be actively maintained and contributors would continue maintaining the following themes with bug fixes, compatibility updates, and security fixes:
Twenty Seventeen
Twenty Nineteen
Twenty Twenty
The proposal has multiple benefits, in addition to reducing the number of actively supported themes from 13 to 6, but also has the drawback of affecting an estimated 730,000 users who will no longer receive maintenance on their themes.
General reception to the proposal has been positive, as those using very old themes are usually looking for as few changes to their website as possible. With security updates still available to retired themes, these users would not be forced to update to a newer theme.
The proposal was developed based on feedback and recommendations from a group of contributors. It is now awaiting feedback from the larger community. Unless the proposal needs to be significantly modified, contributors will soon move on to the practical tasks associated with retiring themes.
The WordPress Themes Directory is now hosting more than 300 block themes, a milestone for the dedicated theme developers who have persevered through the growing pains and evolution of block theming. WP Engine is one of the newest theme authors who helped put the directory over the 300 mark with its submission of Frost.
With its clean, minimal design, 36 patterns, and impeccable attention to detail on block styles, Frost is positioned to quickly become another blockbuster multipurpose theme. It already has more than 1,000 users as it has been in testing for awhile before landing in the official directory.
Frost’s typography features Outfit, a geometric sans-serif font, for both header and paragraph text.
The default color scheme is black and white with a vibrant blue accent color but Frost comes with eight different style variations. Frost designer Brian Gardner showcases a few in the tweet below, with Gutenberg’s full-screen previews for styles.
Feast your eyes on the latest Style Variations setting in the Site Editor, now with full-screen previews. It's currently in Gutenberg and will likely make its grand entrance in #WordPress 6.3! pic.twitter.com/r7r20GjcdS
When first installing the theme on a new WordPress site, clicking Customize takes the user to the Site Editor with the homepage template pre-filled so there’s no guesswork involved. Users can immediately start customizing any of the included templates. Frost packages all the usual ones – 404, archive, home, index, page, search, and single, but also includes a blank template and a “no title” template to help users with content that works better without the requirement of a title.
Frost includes 36 patterns for building everything from pricing tables to portfolios, calls-to-action, testimonials, a grid of team members, various heroes, feature boxes, and more. Many of them have dark and light variations.
There are also four full-page layouts that users can insert to build pages and launch websites faster, including About, Pricing, Home, and Links pages.
Frost could easily be used for building agency websites, portfolios, business, sites, and more. It’s easy to see developers using it as a starter for multiple projects given its minimal design. If website builders are looking for an even more minimalist starting point, Gardner’s Powder theme is a stripped down fork of Frost.
Check out the Frost theme on its own website at frostwp.com, which includes examples of all the patterns, layouts, styles, documentation, and more. Frost is available to download for free from WordPress.org.
WordPress’ Themes Team has released a new block theme called Stacks as part of the Community Themes initiative proposed earlier this year. The goal is to bring together representatives of the team to build block themes year round, the same way that default themes are built and officially supported.
Stacks was designed for one purpose – to create slide decks that can be used for a presentation. It was designed and built by Saxon Fletcher with help from Automattic-sponsored contributor Ben Dwyer.
The theme includes a simple setup flow. After installing Stacks and clicking ‘Customize,’ the user is taken to the Site Editor where a set of five slides is already pre-filled on the home page in a warm and inviting color palette.
Slides can also be created on any post or page using the “Stacks” pattern. After creating a new page, the user is presented with the option to start the page by inserting the Stacks pattern. This loads the same five sample slides that are included on the home page by default. They can be easily edited so that any page or post contains its own unique slide deck.
The Stacks theme looks just as good on mobile as it does on desktop, making it easy to follow along from different devices.
The theme was built for a small niche use case – people who want to host their own slides – and is not likely to be widely adopted but presents an interesting use of the block editor for creating slides. Some users may find this to be more user friendly than working with a third-party application to build their presentations.
Since a different deck can be hosted on each page or post, someone who wants to create a website devoted entirely to hosting their own slide presentations could easily save them all in the same place, share links to the different decks, and avoid having to use a hosted service that may not be around forever.
Stacks is available for free on WordPress.org and users can expect these Community Themes to have some level of support as they are being hosted by the official WordPress.org account.
WordPress developer Mike McAlister has launched Ollie, his first block theme, into public beta. McAlister, whose theme company Array Themes was acquired by WP Engine in 2018, along with the Atomic Blocks plugin, recently departed from his role at the company to pursue other projects.
Ollie supports all the latest Site Editor features, including global styles, patterns, templates, and template parts. It is a beautiful, multipurpose theme of the high caliber one might expect from McAlister, a veteran developer whose past products were well known for their minimalist and clean design.
Ollie includes an impressive set of more than 50 custom block patterns, making page building a delight. There are page sections for testimonials, company logos, multiple hero designs, pricing tables, various headers and footers, calls to action, and more. Ollie includes six different full-page patterns for the homepage, about, profile, features, pricing, and a download page. They are featured on the theme’s live demo under the Patterns menu item.
Ollie includes seven style variations, with blue, green, orange, pink, red, and teal accent color palettes in addition to the default.
Like many other block themes, Ollie is speedy, getting top scores on Google’s Pagespeed Insights.
“One of the most powerful performance features is the selective loading of assets,” McAlister said. “Instead of loading a large stylesheet on every page, Ollie only loads the styles needed on the page. This results in a much smaller page size, far less page requests, and an instantly-loading page, which search engines love.”
After testing Ollie, I found the user experience to be friendly and an accurate representation of one of the taglines for the theme: “Get a 40 hour head start.” As soon as users install the theme and click “Customize,” they are taken directly to the Site Editor with the front page template pre-populated to match the demo site. This, combined with all the improvements in the Site Editor in WordPress 6.1, creates a smooth editing experience.
Although it hasn’t been officially released yet, Ollie could be one of the next majorly successful block themes, with its sheer number of patterns and flexibility for so many different use cases.
Ollie is currently on GitHub during the public beta but McAlister plans to get it approved for WordPress.org after more testing. He is not yet sure whether he will be jumping back into the commercial theme market.
“With this first block theme, my goal is simply to learn as much as possible about block themes, how users are using them, and what kind of potential there is for a premium offering,” McAlister told the Tavern. “This flagship theme will remain as an educational tool and will be free for all to use. Although I have some ideas for monetization, the reality is that we don’t know much about how users will take to block themes or what kind of premium features they’re willing to pay for yet.
“We’re very early in this new paradigm, so I’m taking the opportunity to ask lots of questions learn about the problems users are facing. What I do know is that any modern commercial WordPress product needs a supreme customer experience and a wealth of quality education to help users navigate all of these new features and drive adoption.”
WordPress.org has 286 block themes available and even the best ones have just a few thousand active installs. Building block themes that people will want to use is a new frontier, even for McAlister whose former company was a war-horse in the Classic Themes era.
“Block themes are going to be a game changer for many different personas of WordPress users,” McAlister said. “Being able to customize virtually every aspect of your site is super powerful, but it means that block themes have a lot more moving parts than classic themes. Theme.json, global styles, patterns, templates, template parts — all of these have to be accounted for and they all have to work together seamlessly for an excellent block theme experience.”
WordPress theme developers are still getting a handle on these changes but the Themes Team is putting a stake in the ground by making block theming the focus of the Theme Handbook overhaul. Although Classic Themes will still have a chapter in the handbook, the Themes Team has made it clear that block themes are “the present and future of WordPress.”
“Since a lot of the block theme building is done in the editor, it requires a new mastery of the editor that few are intimately familiar with yet,” McAlister said. “To build patterns or layouts, you need to know which blocks to use, how to structure them effectively, how to leverage your design system in theme.json, and you need a good design sense to pull it all together.
“However, when it all finally comes together, block themes provide an unmatched site building and editing experience in comparison to classic themes. I’m very optimistic about the opportunity to revitalize the WordPress theme space, but it’s going to take a lot of work and collective education to get there.”
Do you want to change the background color of the WordPress block editor for admins?
Sometimes when working on a custom client project, you may want to change the Gutenberg editor background color in WordPress to match their brand colors.
In this article, we’ll show you how to easily customize the background color of the WordPress block editor for admin area.
Note: This guide covers changing the editor color in WordPress admin. If you’re looking to change the background color in WordPress front-end, then please see our tutorial on how to change background color in WordPress.
Why Change the Background Color of the Block Editor in WordPress?
You may want to change the background color of the WordPress block editor for a number of reasons.
However, if your WordPress theme doesn’t use the same colors, then the appearance of your post inside the editor will look quite different from what your users will see on the live website.
Another reason for changing the background color could be personal preference.
For instance, by default, the block editor uses a plain white background. Some users may find it a bit stressful to look at the white screen for long hours. Eye strain can be a real issue for many people, and the default white background is not easy on the eyes.
That being said, let’s see how you can easily change the WordPress editor background color.
How to Change the WordPress Editor Background Color
You can easily change the WordPress editor background color by adding custom code to your theme’s functions.php file.
However, keep in mind that even the smallest error in the code can break your website and make it inaccessible. That’s why we recommend using the WPCode plugin. It’s the best WordPress code snippets plugin on the market and is the easiest and safest way to add custom code to your WordPress website.
Upon activation, you need to visit the Code Snippets » + Add Snippets page from the admin sidebar.
From here, you have to click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.
This will take you to the ‘Create Custom Snippet’ page where you can start by typing a name for your code snippet. This is just for you and can be anything that will help you identify the code.
Next, you need to choose ‘PHP Snippet’ as the ‘Code Type’ from the dropdown menu on the right.
After that, you need to copy and paste the following code into the ‘Code Preview’ box.
Next, you need to look for the following code in the PHP snippet you just pasted.
background-color: #bee0ec;
Then, you have to add the hex code of your preferred color next to the background color option. If you don’t want to use a hex code, you can use some basic color names such as ‘white’ or ‘blue’ instead.
After that, you need to scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ option.
Next, you need to select the ‘Location’ of the code snippet as ‘Admin Only’ from the dropdown menu.
After that, you need to scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active.’
Finally, don’t forget to click on the ‘Save Snippet’ button to save your changes.
Now, go visit the block editor from the admin sidebar.
This is how the block editor looked on our site after adding the CSS code snippet.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Do you want to fade images on mouseover in WordPress?
A simple fade-in or fade-out animation when a user moves their mouse over an image can make your site more engaging. It also encourages visitors to interact with your content, which can keep them on your site for longer.
In this article, we’ll show you how to add a fade image effect on mouseover in WordPress.
Why Fade Images on Mouseover in WordPress?
Animations are an easy way to make your website more interesting, and can even draw the visitor’s attention toward your page’s most important content, such as your website logo or a call to action.
There are lots of different ways to use CSS animations in WordPress, but adding a hover effect to images is particularly effective. The fade animation means your images will slowly appear or disappear when visitors hover over them.
This encourages people to interact with your images, and can even add a storytelling element to the page. For example, different images might fade in and out as the visitor moves around the page.
Unlike some other animations, the fade image on mouseover effect is subtle so it won’t negatively impact the visitor’s reading experience or any image optimization you’ve done.
With that said, let’s show you how to add a fade to your images on mouseover in WordPress.
Adding Image Fade on Mouseover to all WordPress Images
The easiest way to add a fade effect to all your images is by using WPCode. This free plugin allows you to easily add custom code in WordPress without having to edit your theme files.
With WPCode, even beginners can edit their website’s code without risking mistakes and typos that can cause many common WordPress errors.
In the code editor, add the following code snippet:
.post img:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
This code snippet will fade each image for 2 seconds when the user hovers their mouse over it. To make the image fade slower, simply replace ‘2s ease’ with a higher number. If you want to make the picture fade faster, then use ‘1s ease’ or smaller.
You can also make the ‘opacity’ higher or lower by changing the opacity:0.6 line.
If you change any of these numbers then make sure you change them across all the properties (webkit, moz, ms, and o), so the fade effect looks the same on every browser.
When you’re happy with the snippet, scroll to the ‘Insertion’ section. WPCode can add your code to different locations, such as after every post, frontend only, or admin only.
To add a fade effect to all your images, click on ‘Auto Insert.’ Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’
After that, you’re ready to scroll to the top of the screen and click on the ‘Inactive’ toggle, so it changes to ‘Active.’
Finally, click on ‘Save Snippet’ to make the CSS snippet live.
Now, if you hover the mouse over any image on your WordPress website, you’ll see the fade effect in action.
Adding Image Fade Animations to Individual Pages
Using a fade effect for every single image can become distracting, especially if you’re running a photography website, a stock photo store, or any other site that has lots of images.
With that in mind, you may want to use fade effects on a specific page or post only.
The good news is that WPCode allows you to create custom shortcodes. You can place this shortcode on any page, and WordPress will show fade effects on that page only.
To do this, simply create a custom code snippet and add the fade animation code following the same process described above. Then, click on the ‘Save snippet’ button.
After that, scroll to the ‘Insertion’ section, but this time select ‘Shortcode.’
This creates a shortcode that you can add to any page, post, or widget-ready area.
After that, go ahead and make the snippet live following the same process described above.
You can now go to any page, post, or widget-ready area and create a new ‘Shortcode’ block. Then, simply paste the WPCode shortcode into that block.
With that done, either click on the ‘Update’ or ‘Publish’ button to make the shortcode live. You can then visit that page, page, or widget-ready area to see the fade on mouseover effect.
Adding Image Fade Animations to Featured Images
Another option is to add fade animations to your featured images or post thumbnails. These are the post’s primary image and they often appear next to the heading on your home page, archive pages, and other important areas of your website.
By fading featured images on mouseover, you can make your site more eye-catching and engaging, without animating every single image across your WordPress blog or website.
To add a fade animation to your post thumbnails, simply create a new custom code snippet following the same process described above.
However, this time add the following code to the editor:
img.wp-post-image:hover{
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
After that, scroll to the ‘Insertion’ box and select ‘Auto Insert.’ Then, open the ‘Location’ dropdown menu and choose ‘Site Wide Header.’
After that, you can go ahead and make the code snippet live using the same process described above.
Now, you can hover the mouse over any featured image to see the fade animation in action.
Fade effects are a fun way to make images more interesting, but there are lots more ways to use animations in WordPress. For example, you might use flipbox animations to reveal text when a visitor hovers over an image, or use zoom effects so users can explore a picture in more detail.
If you want to try different effects, then SeedProd has over 40 animations that you can add to images, text, buttons, videos, and more. You can even animate entire sections and columns with just a few clicks.
Inside the SeedProd editor, simply click on the content you want to animate, and then select the ‘Advanced’ tab in the left-hand menu.
You can then go ahead and click to expand the ‘Animation Effects’ section.
After that, simply choose an animation from the ‘Entrance Animation’ dropdown, including a wide range of different fade effects.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Lemmony is a new WordPress block theme designed by the team at Shufflehound, a theme development company based in Europe with commercial products on Themeforest. This is the team’s first block theme on WordPress.org and it is a strong debut.
Lemmony is a beautifully-designed multipurpose theme that would work well for businesses, agencies, and portfolio websites. It features the Plus Jakarta Sans font face for both headings and paragraph text, a geometric sans serif style, designed by Gumpita Rahayu from Tokotype.
The homepage includes bold, full-width immersive images offset with calls-to-action and blocks featuring a variety of different ways to present information. Scrolling the page reveals tasteful (and optional) animation that brings the content to life.
Lemmony packages more than 30 custom block patterns to help users design and build pages. These include multiple heroes with lists and calls-to-action, heroes with images and titles, partner logos, query with a sidebar, services grid, services with video, team members, and more – nearly every kind of pattern that a business website might require.
Lemmony also packages five full-page patterns for services, gallery, contact, about, and the front page, making it easy to simply drop the pattern in place for the most common pages found on a brochure website.
This theme offers a solid user experience for those who are just getting started building their websites. After installing and activating Lemmony on a fresh site, it will look nearly exactly like the live demo. Everything on the front page is in place with placeholder content, including different menu items, just waiting for the user to add, remove, or edit the blocks. The user doesn’t have to start from scratch do any guesswork about where things go in the design. This is the kind of experience that all block themes should provide.
Lemmony comes with a companion plugin that includes additional customer blocks and other features, such as the custom icons seen in the demo. It will prompt the user after installing the theme to install the plugin as well to get more features. If the user is editing a page and inserts a pattern that includes icons, the theme will allow users to install the plugin directly from the editor. It’s a very smooth experience for including features that require an additional plugin. The plugin is optional and most of the designs seen in the demo work without it installed.
In the future, Lemmony’s creators plan to include more website templates, which would make it easier and faster to set up different kinds of sites. Overall, the theme feels snappy, has an unusually large variety of patterns, and is responsive and looks great on mobile. The installation experience is user-friendly and provides a good starting point for jumping into full-site editing. Check out the live demo and download Lemmony for free from the WordPress Themes Directory.
WordPress contributors have updated the legacy default themes to bundle Google Fonts locally in the theme folder, instead of loading them from Google’s servers. In years past, loading fonts from the the Google CDN was the recommended practice for performance reasons, but new privacy concerns have emerged following a German court case, which fined a website owner for violating the GDPR by using Google-hosted webfonts,Â
All of the default themes from Twenty Twelve to Twenty Seventeen have been updated. The process began nine month ago but the approach took some time for contributors to refine. Updates to default themes are usually done in coordination with major and minor releases of WordPress, as core contributor Jonathan Desrosiers explained in the ticket.
“The reason the updates are usually coordinated is that the themes are usually updated to be compatible with new versions of WordPress, so releasing at the same time makes a lot of sense,” Desrosiers said. “Also, the number of contributors that focus on the tickets within the Bundled Themes component is usually very low unless these compatibility issues are being addressed.”
A dev note to accompany these updates to the legacy default themes was published to WordPress.org. It contains code examples for serving a new stylesheet from the theme directory, fixing the editor style within a custom theme-setup function, removing the font stylesheet, and including a custom set of fonts in a child theme. This change particularly impacts those who have edited or removed the font stylesheet in a child theme of these default themes or a plugin.
Do you want to add icon fonts to your WordPress site?
Icon fonts allow you to add resizable vector icons that are loaded like web fonts, so they don’t slow down your website. You can even style them using CSS to get exactly the look you want.
In this article, we will show you how to easily add icon fonts in your WordPress theme.
What are Icon Fonts and Why You Should Use Them?
Icon fonts contain symbols or small pictures instead of letters and numbers.
You can use these icon fonts to show common images. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contests, and even in WordPress navigation menus.
Most visitors will immediately understand what a commonly-used icon means. In this way, you can help visitors find their way around your website and engage with your content.
There are several open-source icon font sets that you can use for free such as IcoMoon, Genericons, and Linearicons.
In fact, the WordPress software comes with free dashicon icons built-in. These are the icons you can see in the WordPress admin area.
In this guide, we’ll be using Font Awesome as it is the most popular open-source icon set. We use it on WPBeginner, and in all our premium WordPress plugins.
With that said, let’s look at how you can easily add icon fonts in your WordPress theme. Simply use the quick links to jump straight to the method that you want to use.
Method 1. Adding Icon Fonts Using a WordPress Plugin (Easy)
The easiest way to add icon fonts to WordPress is by using the Font Awesome plugin. This allows you to use icon fonts in your pages and posts without modifying your theme files. You’ll also get any new Font Awesome icons automatically every time you update the plugin.
The first thing you need to do is install and activate the Font Awesome plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you can add a Font Awesome icon to any shortcode block. Simply open the page or post where you want to show the icon font, and then click on the ‘+’ icon.
You can now search for ‘Shortcode’ and select the right block when it appears.
With that done, you can add any Font Awesome icon using the following shortcode:
[icon name="rocket"]
Simply replace “rocket” with the name of the icon that you want to show. To get this name, head over to the Font Awesome site and click on the icon that you want to use.
In the popup that appears, go ahead and click on the icon’s name.
Font Awesome will now copy the name to your clipboard automatically.
With that done, simply paste the name into the shortcode. You can now click on ‘Publish’ or ‘Update’ to make the icon font live.
Sometimes you may want to show an icon font inside a block of text. For example, you may need to display a ‘copyright’ symbol after a brand name.
To do this, simply paste the shortcode inside any Paragraph block.
You can then use the settings in the right-hand menu to customize the icon, similar to how you customize options for text blocks. For example, you can change the font size.
WordPress will turn the shortcode into a Font Awesome icon for visitors and show it alongside your text.
Another option is to add the shortcode to any widget-ready area.
For example, you can add a Shortcode block to your site’s sidebar or similar section.
Many websites use icon fonts in their menus, to help visitors find their way around. To add an icon, either create a new menu or open an existing menu in the WordPress dashboard.
Then, click on ‘Screen Options’ and check the box next to ‘CSS Classes.’
With that done, simply click to expand the menu item where you want to show the icon.
You should now see a new ‘CSS Classes’ field.
To get an icon’s CSS class, simply find the icon font on the Font Awesome website and give it a click. If you want, then you can change the icon’s style by clicking on the different settings.
In the popup, you’ll see an HTML code snippet. The CSS class is simply the text between the quotation marks. For example, in the following image, the CSS class is fa-solid fa-address-book.
Simply copy the text inside the quotes, then switch back to the WordPress dashboard.
You can now paste the text into the ‘CSS Classes’ field.
To add more icon fonts, simply follow the same process described above.
When you’re happy with how the menu is set up, click on ‘Save.’ Now if you visit your WordPress website you’ll see the updated navigation menu.
Method 2. Using Icon Fonts with SeedProd (More Customizable)
If you want more freedom over where you use font icons, then we recommend using a page builder plugin.
SeedProd is the best drag-and-drop WordPress page builder in the market and has over 1400 Font Awesome icons built-in. It also has a ready-made Icon box that you can add to any page using drag and drop.
The first thing you need to do is install and activate the plugin. For more details, see our beginner’s guide on how to install a WordPress plugin.
Note: There is a free version of SeedProd, but we’ll be using the Pro version since it comes with the Icon box.
Upon activation, go to SeedProd » Settings and enter your license key.
You can find this information under your account on the SeedProd website. After entering the license key, go ahead and click the ‘Verify Key’ button.
Next, you need to visit SeedProd » Pages and click on the ‘Add New Landing Page’ button.
Now, you can choose a template to use as the basis for your page. SeedProd has over 180 professionally-designed templates that you can customize according to your WordPress blog or website’s needs.
To select a template, hover your mouse over it and then click the ‘Checkmark’ icon.
We’re using the ‘Ebook Sales Page’ template in all our images, but you can use any design you want.
Next, go ahead and type in a name for the custom page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you want.
When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.
Next, you’ll be taken to the SeedProd drag-and-drop page builder, where you can customize the template.
The SeedProd editor shows a live preview of your design to the right and some block settings on the left.
The left-hand menu also has blocks that you can drag onto your design.
You can drag and drop standard blocks like buttons and images or use advanced blocks such as the contact form, countdown, social share buttons, and more.
To customize any block, simply click to select it in your layout.
The left-hand menu will now show all the settings you can use to customize that block. For example, you can often change background colors, add background images, or change the color scheme and fonts to better match your brand.
To add an icon font to the page, simply find the ‘Icon’ block in the left-hand column and then drag it onto your layout.
SeedProd will show an ‘arrow’ icon by default.
To show a different Font Awesome icon instead, simply click to select the Icon block.
In the left-hand menu, hover your mouse over the icon and then click on the ‘Icon Library’ button when it appears.
You’ll now see all the different Font Awesome icons that you can choose from.
Simply find the font icon that you want to use and give it a click.
SeedProd will now add the icon to your layout.
After choosing an icon, you can change its alignment, color, and size using the settings in the left-hand menu.
You can continue working on the page by adding more blocks and customizing those blocks in the left-hand menu.
When you’re happy with how the page looks, click the ‘Save’ button. You can then select ‘Publish’ to make that page live.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
