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.
Do you want to remove the ‘powered by WordPress’ footer links on your site?
By default, most WordPress themes have a disclaimer in the footer, but this can make your site look unprofessional. It also leaves less space for your own links, copyright notice, and other content.
In this article, we will show you how to remove the powered by WordPress footer links.
Why Remove the WordPress Footer Credits?
The default WordPress themes use the footer area to show a ‘Proudly powered by WordPress’ disclaimer, which links to the official WordPress.org website.
Many theme developers take this further and add their own credits to the footer.
In the following image, you can see the disclaimer added by the Astra WordPress Theme.
While great for the software developers, this ‘Powered by….’ footer can make your site seem less professional, especially if you’re running a business website.
It also lets hackers know that you’re using WordPress, which could help them break into your site.
For example, if you’re not using a custom login URL, then hackers can simply add /wp-admin to your site’s address and get to your login page.
This disclaimer also links to an external site, so it encourages people to leave your website. This can have a negative impact on your pageviews and bounce rate.
Is it legal to remove WordPress footer credit links?
It is perfectly legal to remove the footer credits link on your site because WordPress is free, and it is released under the GPL license.
Basically, this license gives you the freedom to use, modify, and even distribute WordPress to other people.
Any WordPress plugin or theme that you download from the official WordPress directory is released under the same GPL license. In fact, even most commercial plugins and themes are released under GPL.
This means you’re free to customize WordPress in any way you want, including removing the footer credits from your business website, online store, or blog.
With that in mind, let’s see how you can remove the powered by WordPress footer links.
Video Tutorial
If you don’t want the video or need more instructions, then simply use the quick links below to jump straight to the method you want to use.
Method 1. Removing the ‘Powered by’ Link Using the Theme Settings
Most good theme authors know that users want to be able to edit the footer and remove the credit links, so many include it in their theme settings.
To see whether your theme has this option, go to Appearance » Customize in your WordPress admin dashboard.
You can now look for any settings that let you customize your site’s footer, and then click on that option.
For example, the Astra theme has a section called ‘Footer Builder.’
If you’re using this theme, then simply click on the ‘Footer’ section and select ‘Copyright.’
Doing so will open a small editor where you can change the footer text, or even delete it completely.
No matter how you remove the footer disclaimer, don’t forget to click on ‘Publish’ to make the change live on your site.
Method 2. Removing the ‘Powered by’ Credit Using Full Site Editing
If you’re using a block theme, then you can remove the footer disclaimer using Full Site Editing (FSE) and the block editor.
This is a quick and easy way to remove the ‘Powered by’ credit across your entire site, although it won’t work with all themes.
To launch the editor, go to Appearance » Editor.
Then, scroll to your website’s footer and click to select the ‘Powered by’ disclaimer.
You can now replace it with your own content, or you can even delete the disclaimer completely.
When you’re happy with how the footer looks, simply click on ‘Save.’ Now if you visit your site, you’ll see the change live.
Method 3. How To Remove the ‘Powered by’ Disclaimer Using a Page Builder
Many WordPress websites use the footer to communicate important information, such as their email address or phone number. In fact, visitors might scroll to the bottom of your site looking specifically for this content.
With that in mind, you may want to go one step further and replace the ‘Powered by’ text with a custom footer. This footer could contain links to your social media profiles, links to your affiliate partners, a list of your products, or other important information and links.
You can see the WPBeginner footer in the following image:
The best way to create a custom footer is by using SeedProd. It is the best page builder plugin and comes with over 180 professionally-designed templates, sections, and blocks that can help you customize every part of your WordPress blog or website.
It also has settings that allow you to create a global footer, sidebar, header, and more.
First, you need to install and activate SeedProd. For more details, see our step-by-step guide on how to install a WordPress plugin.
Note: There’s also a free version of SeedProd that allows you to create all kinds of pages using the drag-and-drop editor. However, we’ll be using the premium version of SeedProd since it comes with the advanced Theme Builder.
After activating the plugin, SeedProd will ask for your license key.
Once you’ve done that, go to SeedProd » Theme Builder. Here, click on the ‘Add New Theme Template’ button.
In the popup, type in a name for the new theme template.
Once you’ve done that, open the ‘Type’ dropdown and choose ‘Footer.’
SeedProd will show the new footer template across your entire site by default. However, you can limit it to specific pages or posts using the ‘Conditions’ settings.
For example, you may want to exclude the new footer from your landing pages, so it doesn’t distract from your main call to action.
When you’re happy with the information you’ve entered, click on ‘Save.’
This will load the SeedProd page builder interface.
At first, your template will show a blank screen on the right and your settings on the left. To start, click on the ‘Add Columns’ icon.
You can now choose the layout that you want to use for your footer. This allows you to organize your content into different columns.
You can use any layout you want, but for this guide, we’re using a three-column layout.
Next, you can edit the footer’s background so that it matches your WordPress theme, company branding, or logo.
To change the background color, simply click on the section next to ‘Background Color’ and then use the controls to choose a new color.
Another option is to upload a background image.
To do this, either click on ‘Use Your Own Image’ and then choose an image from the WordPress media library, or click on ‘Use a stock image.’
When you’re happy with the background, it’s time to add some content to the footer.
Simply drag any block from the left-hand menu and drop it onto your footer.
After adding a block, click to select that block in the main editor.
The left-hand menu will now show all of the settings for customizing the block.
Simply keep repeating these steps to add more blocks to your footer.
You can also change where each block appears by dragging them around your layout.
When you’re happy with your design, click on the ‘Save’ button.
Then, you can select ‘Publish’ to complete your design.
For your new footer to show up on your website, you’ll need to finish building your WordPress theme with SeedProd.
After building your theme, go to SeedProd » Theme Builder. Then, click on the ‘Enable SeedProd Theme’ switch.
Now, if you visit your website you’ll see the new footer live.
Once you’ve connected to your site, go to /wp-content/themes/ and then open the folder for your current theme or child theme.
Inside this folder, find the footer.php file and open it in a text editor such as Notepad.
In the text editor, look for a section of code that includes the ‘powered by’ text. For example, in the Twenty Twenty-One theme for WordPress, the code looks like this:
You can either delete this code entirely or customize it to suit your needs. For example, you may want to replace the ‘Proudly powered…’ disclaimer with your own copyright notice.
After making your changes, save the file and upload it to your server. If you check your site, then the footer credit will have disappeared.
Warning! Avoid the CSS Method at All Costs!
Some WordPress tutorial sites may show you a CSS method that uses display: none to hide the footer credit links.
While it looks simple, it’s very bad for your WordPress SEO.
Many spammers use this exact technique to hide links from visitors while still showing them to Google, in the hopes of getting higher rankings.
If you do hide the footer credit with CSS, then Google may flag you as a spammer and your site will lose search engine rankings. In the worst-case scenario, Google may even delete you from their index so you never appear in search results.
Instead, we strongly recommend using one of the four methods we showed above. If you can’t use any of these methods, then another option is hiring a WordPress developer to remove the footer credit for you, or you might change your WordPress theme.
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 create a custom homepage in WordPress?
By default, WordPress shows your latest blog posts on the homepage. However, you can often create a better first impression by designing a custom homepage that highlights your site’s most popular content, products, services, and more.
In this article, we will show you how to easily create a custom homepage in WordPress.
What is a Homepage?
A homepage is the first page visitors see when they type in your domain name. For many people, this homepage is their introduction to your business, blog, or website.
A good homepage will make visitors want to learn more about your WordPress website. It will also provide easy access to the links, search bars, menus, and anything else that can help visitors find interesting content.
By default, WordPress shows your latest blog posts on the homepage.
This may be a good fit for personal blogs or hobby bloggers. However, many WordPress blogs and websites can benefit by replacing the standard homepage with a custom homepage.
The good news is that WordPress makes it easy to show a custom page as your homepage, rather than the default list of recent posts.
Selecting a Custom Page to be Used as Homepage in WordPress
In this guide, we’ll show you a few different ways to create a custom homepage. However, afterward, you’ll need to let WordPress know that it should use this page as the homepage.
To do that, simply go to Settings » Reading in the WordPress dashboard.
Here, scroll to ‘Your homepage settings’ and select ‘A static page.’
You can now open the ‘Homepage’ dropdown and choose the page that you want to use as the new homepage.
Then, simply scroll to the bottom of the screen and click on ‘Save Changes.’ You can now visit your site to see the new custom homepage live.
If you have a blog, then make sure you create a separate blog page to display your posts. If you don’t, then visitors will struggle to find your latest blogs.
With that being said, let’s see how you can design a custom homepage in WordPress. Simply use the quick links below to jump straight to the method you want to use.
Method 1. Create a Custom Homepage Template Using the Block Editor
If you’re using a block theme, then you can design a custom homepage template using the full site editor.
This method doesn’t work with every theme, so if you’re not using a block-based WordPress theme then we recommend using a page builder like SeedProd or Beaver Builder instead.
To start, simply create a new page or open an existing page that you want to use as the homepage. Then, click on the ‘Page’ tab in the right-hand menu and click to expand the ‘Template’ section, if it isn’t already open.
WordPress will now show which template this page is currently using.
To create a custom homepage template, just click on the ‘New’ link.
In the popup, give your template a name. The name is just for your reference so you can use anything you want.
After that, go ahead and click on ‘Create’ to launch the full site editor.
After adding a block, make sure you click to select it in your layout. You can then configure the block using the settings in the right-hand menu and the buttons in the mini toolbar.
To build your custom homepage, simply keep adding more blocks and then configure them using the full site editor settings.
For example, you may want to add blocks such as Latest Posts, Search, Social Icons, Cloud Tag, and more.
When you’re happy with how the template looks, click on the ‘Publish’ button.
The page you created earlier will now be using the new homepage template. You can now tell WordPress to use this page as your homepage by following the process described above.
Method 2. Create a Custom Homepage in WordPress using a Page Builder (Recommended)
The WordPress block-based editor allows you to create a custom homepage using the tools you’re already familiar with. However, it doesn’t work with all themes and is limited in flexibility and features.
If you want to create a completely custom homepage that works with any WordPress theme, then you’ll need a page builder plugin.
For this method, we’ll be using SeedProd. It is the best page builder plugin on the market and allows you to create a custom homepage using a simple drag-and-drop editor.
It also comes with lots of professionally-designed templates and ready-made blocks that you can use on your homepage.
Note: There is a free version of SeedProd on available on WordPress.org but we’ll be using the Pro version since it has more templates, blocks, and features.
The first thing you need to do is install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you need to 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.
After that, it’s time to choose a template for your custom homepage. SeedProd has lots of professionally-designed templates that you can customize according to your website’s needs.
To select a template, simply hover your mouse over it and then click the ‘Checkmark’ icon.
We’re using the ‘Juicy Sales Page’ template in all our images, but you can use any design.
Next, go ahead and type in a name for the custom homepage. 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 your 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 layout.
For example, you can drag and drop standard blocks like buttons and images or use advanced blocks such as the countdown, contact form, social sharing 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 configure that block. You can also change background colors, add background images, or change the color scheme and fonts to better match your brand.
To start, you’ll want to replace any placeholder images with your own photos or custom logo. To do this, simply click to select any Image block in the live preview.
In the left-hand menu, click on the ‘Select Image’ button.
You can now either choose an image from the WordPress media library or upload a new file from your computer.
SeedProd also comes with ‘Sections,’ which are collections of blocks that are often used together. For example, SeedProd has a header, hero image, call to action, testimonials, contact form, FAQs, features, footer sections, and more. These can help you create a custom homepage, fast.
To look through the different sections, simply click on the ‘Sections’ tab. To preview any section, just hover your mouse over it and then click on the magnifying glass icon.
To add the section to your design, simply click on ‘Choose This Section.’
This will add the section to the bottom of your homepage.
You can move sections and blocks around your layout using drag and drop.
When you’re happy with how the homepage looks, don’t forget to click the ‘Save’ button to store your changes.
To do this, simply click on the ‘Connect’ tab and then select your email service provider.
SeedProd will now show you how to integrate the homepage with your email provider.
If your provider isn’t listed, then don’t worry. SeedProd works with Zapier which acts as a bridge between SeedProd and more than 3000+ other apps.
Once you’ve done that, you’re ready to publish your custom homepage. Simply click on the ‘Page Settings’ tab.
There are more options under the Page Settings tab that you may want to look at. For example, you can change the SEO settings, edit the page title, and connect a custom domain.
When you’re happy with how the page is set up, go ahead and select the ‘General’ tab.
You can now click on the ‘Page Status’ toggle to change it from ‘Draft’ to ‘Publish.’
Now, you simply need to head over to Settings » Reading and set this page as your new custom homepage.
Method 3. Manually Create a Custom Homepage in WordPress (Coding Required)
You can also create a custom homepage using code. However, this method is complicated and coding mistakes can cause all kinds of common WordPress errors.
That being said, we don’t recommend this method for beginners.
Your WordPress theme is made up of many different files. Some of these files are called templates and they control how different areas of your website look. For more information, please see our WordPress template hierarchy cheat sheet.
One of these templates is called front-page.php.
If your theme has this template, then WordPress will automatically use it to show your homepage. This means you can create a custom homepage by editing this file or replacing it with a new file.
After connecting to the server, go to /wp-content/themes/ and then open the folder for your current WordPress theme.
If this folder already has a front-page.php file, then you can go ahead and open that file in any text editor, such as Notepad. You can then make any changes you want by editing the code.
If your theme doesn’t have a front-page.php file, then you can create a new file with the name front-page.php.
After that, you just need to upload front-page.php to your current theme’s folder on your WordPress hosting account.
As soon as you upload this file, WordPress will start using it to display your homepage. However, since the file is completely empty, you will see a blank page as your homepage.
To fix this, just open the file in a text editor app and start adding HTML code.
If you’re starting with an empty file, then you can save yourself some time by using the existing code and templates in your WordPress theme.
For example, it usually makes sense to include the theme’s header and footer.
In the following sample code, we’ve removed the content and sidebars while fetching the header and navigation templates from the theme.
<?php /*
This page is used to display the static frontpage.
*/
// Fetch theme header template
get_header(); ?>
<div id="primary" <?php astra_primary_class(); ?>>
<div class="custom-homepage-container">
You custom homepage code goes here
</div>
</div><!-- #primary -->
//Fetch the theme footer template
<?php get_footer(); ?>
Tips on Making an Effective Custom Homepage in WordPress
The homepage is your site’s most important page. People will visit this page to learn more about your business, products, and services.
To help visitors find what they’re looking for, we recommend keeping your homepage design as simple as possible and avoiding any clutter.
It’s also a good idea to place your most important content at the top of the page so it’s the first thing visitors see.
Before designing your page, it may help to write down the goals you want to achieve. You can then design every part of the homepage to help you reach this clear target.
Many businesses and blogs want to convert visitors into customers. To achieve this, we recommend adding OptinMonster to your custom homepage.
OptinMonster is the best WordPress popup plugin and lead generation software. It allows you to create all kinds of popups, floating bars, full-screen welcome mats, slide-in scroll boxes, inline personalized lead forms, gamified spin to win optins, and more.
Next, you’ll want to track how your custom homepage is performing. You can then use this insight to fine-tune the page design and get even more conversions.
MonsterInsights is the best plugin for Google Analytics. It allows you to easily install Google analytics in WordPress and shows you helpful reports directly in the WordPress dashboard.
The best part about using MonsterInsights is that you can add the Google Analytics tracking code without editing code or hiring a developer. Plus, it has a Dual Tracking feature, which makes it super easy to switch to Google Analytics 4.
You should also make it easy for visitors and potential customers to contact you. For this, we recommend WPForms which is the best WordPress form plugin on the market.
Finally, it’s a good idea to look at your competitors and other popular sites in your industry or niche. While it’s never a good idea to copy, you can use them as inspiration or learn best practices that you can then apply to your own homepage layout.
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.
pic.twitter.com/r7r20GjcdS
