Are you looking for an easy way to find 404 error pages on your WordPress website and redirect them?
404 errors occur when users try to reach a page on your website that no longer exists. These errors create a bad user experience, which can lead to a drop in search engine rankings and lower eCommerce sales.
In this article, we will show you how to easily track 404 pages and redirect them in WordPress.
What Is a 404 Error?
A 404 error is an HTTP status code that shows that the server couldn’t reach the web page you are trying to visit.
This means that if you enter a URL of a web page that does not exist, then you will see a ‘404 Page Not Found’ error.
Now, there are many reasons why the 404 error occurs. It could be because the visitor made a mistake when entering the URL, the page was deleted from the website, or the domain name no longer exists.
Another cause of the 404 error is when a page was moved to another URL but wasn’t properly redirected, resulting in a broken link.
Finally, sometimes server malfunctions can also lead to 404 errors on a WordPress website.
Why Track and Redirect 404 Pages in WordPress?
Now that you know the different causes of 404 errors, let’s take a look at why it’s extremely important for website owners to track 404 errors and fix them.
404 errors are bad for your site’s user experience. If users can’t find the page they are looking for, then they will likely leave your site and go to your competitors.
This means you will lose potential customers and miss an opportunity to convert your visitors into subscribers.
Aside from that, 404 errors have a negative impact on your WordPress SEO rankings. Search engine ranking algorithms often penalize websites when they run into broken links.
Not to mention, these broken pages will cause you to lose valuable backlinks for your website, which results in lower domain authority and a significant drop in Google keyword rankings.
With that being said, let’s take a look at how you can easily track 404 pages and redirect them in WordPress. We will cover two different methods, so feel free to click the links below to jump ahead to your preferred method:
If you’d prefer written instructions, then just keep reading.
Method 1: Track & Redirect 404 Pages Using AIOSEO (Recommended)
The easiest way to track and fix 404 pages on your WordPress website is by using the All in One SEO plugin for WordPress, which is also known as AIOSEO. It’s the best SEO WordPress plugin that is used by over 3 million professionals.
AIOSEO allows you to easily find pages with broken links and fix them with just a few clicks using its powerful Redirection Manager.
The best thing about AIOSEO is that it helps you set up faster 301 redirects, which helps you improve search engine rankings.
For this tutorial, we will be using the AIOSEO Pro version because it includes the powerful Redirection Manager addon. There is a free version of AIOSEO, but it doesn’t include 404 monitoring or the Redirection Manager.
First, you will need to install and activate the AIOSEO Pro plugin. For more details, please see our step-by-step guide on how to install a WordPress plugin.
Activating Redirects and Enabling 404 Error Logs in AIOSEO
Once the plugin is active, you can go to All in One SEO » Redirects and click the ‘Activate Redirects’ button.
After that, you need to visit the ‘Settings’ tab under Redirects and configure the plugin to keep 404 logs and track pages with broken links.
Simply scroll down to the ‘Logs’ sections and make sure that the ‘404 Logs’ option is enabled. Next, select the time period to record the 404 logs using the dropdown menu. We recommend no longer than one month for optimal server performance.
Once you are done, go ahead and click the ‘Save Changes’ button.
You will now see a ‘404 Logs’ tab in the Redirects section in AIOSEO. When you first enable 404 logs, this page will not have any data because it only starts monitoring 404 pages after you enable the setting.
In time, it will show a list of all the URLs that have a 404 error. You will see how many times someone tried to visit the link in the ‘Hits’ column and the date when it was last visited in the ‘Last Accessed’ column.
Once you have identified the pages with broken links, you can simply redirect them by clicking the ‘Add Redirect’ button. You should redirect the URL to a relevant page on your website.
When you click the button, you will see the option to enter a target URL and select the redirection type from the dropdown menu.
For example, you can move a page permanently by selecting the ‘301 Moved Permanently’ option.
After that, click the ‘Add Redirect’ button, and your broken link will now automatically redirect to the new target URL.
Clearing 404 Error Logs in AIOSEO
With time, the size of your log file can grow and take up a lot of disk space. A lack of WordPress hosting disk space can lead to errors. To make sure that you don’t run into this problem, it’s a best practice to delete and clear 404 error logs.
With AIOSEO, you can easily delete any individual 404 error from your logs by clicking the trash can icon.
You can also bulk delete your 404 logs by going to All in One SEO » Tools and then clicking on the ‘Database Tools’ tab.
Now, just scroll down to the ‘Logs’ section and click the ‘Clear 404 Logs’ button.
Permalink Monitoring in AIOSEO
Aside from tracking 404 errors, the AIOSEO Redirect Manager also comes with permalink monitoring. This means that if you delete a page on your site, or change the URL of any blog post, then AIOSEO will automatically notify you to set up a redirect.
In some cases, AIOSEO can even set up the proper 301 redirects for you without any effort.
Bonus Tip: Set Up Faster 301 Redirects in WordPress With AIOSEO
AIOSEO also allows you to set up faster redirects by going to the ‘Settings’ tab and choosing the ‘Web Server’ redirect method.
This allows you to unlock significant speed improvements when compared to the default WordPress/PHP redirect method.
Method 2: Track & Redirect 404 Pages Using the Redirection Plugin
The next method to track and redirect 404 errors is by using the free Redirection Plugin for WordPress. This is an advanced plugin, so some beginners may find it harder to use.
First, you need to install and activate the plugin. For more details, please see our step-by-step guide on how to install a WordPress plugin.
Upon activation, go to Tools » Redirection and then scroll down and click the ‘Start Setup’ button to set up your redirects.
After that, the plugin will ask whether you would like to monitor permalink changes in WordPress and keep logs of redirects and 404 errors.
Just select the checkbox for these options and click the ‘Continue Setup’ button.
The plugin will now test the REST API status.
When the status result comes back as ‘Good’, you can click the ‘Finish Setup’ button.
After that, the plugin will set up redirection. This will take several seconds, and when it is complete, you will need to click the ‘Continue’ button and then the ‘Ready to begin!’ button.
Now, you can start to redirect your 404 pages.
Simply enter the URL of the page you want to redirect in the ‘Source URL’ column.
Next, select whether you’d like to exactly match the query parameters, ignore them, or pass them through to the target URL from the ‘Query Parameter’ dropdown menu.
Now, you need to enter the Target URL to where the 404 page will be redirected, keep the Group option as ‘Redirection’, and click the ‘Add Redirect’ button.
If you want more options to set up redirection, then just click the gear icon next to the ‘Add Redirect’ button.
You can begin by adding the old URL showing 404 in the ‘Source URL’ field, selecting the Query Parameter like before, and adding a title to describe the purpose of this redirect.
After that, select the ‘Match’ option from the dropdown. You will see multiple options, including URL only, URL and referrer, URL and user agent, and URL and login status.
In most cases, you want to use the ‘URL and referrer’ setting. That’s because if you see several 404 requests for a specific page, then those users probably clicked on the same link to the wrong URL rather than all typing the same wrong web address.
Now, whenever someone else clicks on the broken URL, it will automatically redirect them to the new location.
Next, make sure that your action is ‘Redirect to URL’. The other options are complex and require advanced technical knowledge.
For the redirection type, you need to select an option from the HTTP code dropdown. For a permanent redirection, this should be ‘301 – Moved Permanently’.
Lastly, enter the target URL in the ‘Matched Target’ field. After you have entered this information, just hit the ‘Add Redirect’ button.
You can go to the new URL to test and make sure that the redirection is working properly.
The plugin also has the option to track 404 error logs. Simply click on the ‘404s’ tab at the top, and the plugin will show you recent 404 errors that occurred on your site since you installed the plugin.
Note: If you just enabled the Redirection plugin, then the 404 log page will be empty. It only starts keeping a log of 404 errors after the plugin is activated.
Bonus: Design a Custom 404 Page With SeedProd
Setting up redirects means that visitors shouldn’t run into many 404 error pages on your WordPress website. However, if they do land on a 404 page, it’s a good idea to have a custom design that will help out your users.
Including your custom branding can make your 404 page look more reputable. Adding a contact form can allow users to tell you the address they entered that triggered the 404 error. You can even include links to your popular posts or products so that visitors will be tempted to stay on your website.
Luckily, it’s easy to design a custom 404 page with SeedProd. It’s the best WordPress landing page builder and comes with plenty of customizable templates for 404 pages.
Do you want to add your WooCommerce store to Facebook?
Facebook is one of the largest social media networks in the world. By adding your WooCommerce store to Facebook, you can send more traffic to your online store and make more sales.
In this article, we’ll show you how to add your WooCommerce store to Facebook, step by step.
Why Add Your WooCommerce Store to Facebook?
Facebook is one of the most popular social media platforms in the world today. By adding your products to Facebook, you can better promote your online store and generate more sales.
Adding your WooCommerce store to Facebook lets you reach your followers in new ways, so you can:
Simply sell more products
Expose your Facebook followers to your online store
Deepen your customer relationships
Grow your revenue
That being said, let’s show you how to add your WooCommerce store to Facebook simply.
Upon activation, you’ll need to navigate to Plugins » Installed Plugins and turn on ‘Enable automatic updates’.
This will ensure that your WooCommerce store continues to work with Facebook.
After that you’ll have a new menu item labeled ‘Marketing’ in your WordPress admin panel. Navigate to Marketing » Facebook and then click the ‘Get started’ button.
This will take you to a screen where you can connect your Facebook page and WooCommerce store.
Select the Facebook account that you want to link with your WooCommerce store.
Or, you can login to a different Facebook account and then click ‘Continue as…’.
On the next screen, you’ll be asked if you want to open your ‘Facebook Shop’, ‘Facebook Ads’, and ‘Instagram Shopping’.
For this tutorial, we recommend unchecking the ‘Facebook Ads’ and ‘Instagram Shopping’ features. If you want to add these features later on, then it’s much easier to do directly from your Facebook business account.
Next, click ‘Get Started’.
Once you’ve done that you need to select your Business Manager account and click ‘Continue’.
This is a separate profile from a personal Facebook page that lets you manage the business assets connected to your Facebook account.
If you don’t have a Facebook business account, then click ‘Create New’ and follow the steps for creating an account.
Next, you need to connect to a Facebook page.
Simply choose the Facebook page where you want to display your WooCommerce products and then click ‘Continue’.
Then, you need to choose an existing WooCommerce product catalog.
Next, you need to select a Facebook Pixel. This allows you to track your inventory between Facebook and WooCommerce.
If you don’t have one created yet, then click the ‘Create New’ button to generate a new Facebook Pixel. You need to give your pixel a name and click ‘Continue’.
Once you’ve done that, you’ll be asked to confirm your Commerce Account. This account will be used to feature your products across Facebook, and then click ‘Continue’.
Note: At this point, a lot of users report errors with continuing the integration.
Luckily, all of your account data you added so far is saved, so we will continue the integration process from within your Facebook account dashboard.
You need to click on the ‘Business Apps’ icon and then click ‘WooCommerce Integration’.
This will take you to a page where you can connect your WooCommerce store.
Next, you need to click ‘Continue’, and the app will integrate with your store.
Then, you need to enter your WooCommerce store URL and click ‘Connect’.
Make sure you enter your store URL and not your website URL (sometimes they’re different).
After that, you will confirm the linking of your accounts.
All you need to do is click ‘Approve’.
Once you’ve done that select your Facebook Business account and click ‘Continue’.
Then, you need to choose the Facebook page you want to connect your WooCommerce store with.
Next, you’ll be asked to select your WooCommerce product catalog and click ‘Continue’.
Once you’ve done that, you need to connect your account to the Facebook Pixel for tracking and click ‘Continue’.
The final option is choosing how your customers will checkout.
You can allow your customers to checkout via Facebook, Instagram, or checkout on your website.
We recommend having your customers checkout on your website, since your website have a more optimized checkout process on your online store.
You’ll need to select and then confirm the Commerce account associated with your website and click ‘Continue’.
After that, you can review your connection settings.
Once you’ve verified your connection settings are correct, click ‘Continue’.
If so, then select the domain name linked to your WooCommerce store and click ‘Continue’.
Once you’ve completed the setup wizard, your WooCommerce store will now be linked to Facebook, and your visitors will be able to browse your products to make purchases.
On the backend of your store, you’ll be able to view and manage your WooCommerce product catalog simply.
Keep in mind, Facebook will manually review your store integration, so it can take a few weeks for your store to be live on your Facebook page.
Must-Have Plugins to Grow Your WooCommerce Store
After you’ve added your WooCommerce store to Facebook, you’re probably looking for ways to further improve your traffic and revenue.
The plugins below will help you optimize your WooCommerce store and make more sales.
OptinMonster is the best lead generation software in the market. With this tool, you can easily convert abandoning website visitors into email subscribers and then into paying customers.
The drag and drop builder lets you create campaigns to improve your sales, reduce cart abandonment, show targeted website messages, grow your email list, and more.
You can even create floating bars to highlight your sales, announce free shipping, showcase your special offers, and a lot more.
All in One SEO is the best SEO plugin in the market used by over 2 million websites. It lets you simply optimize your WooCommerce store and products to improve your search engine rankings without having to learn SEO.
You can simply generate an SEO title and description for all of your products. You can also create an XML sitemap for your products to help the search engines find and index your products in the search results.
Rich snippets schema markup is also included, which will help your product listings stand out in the search results and bring you more traffic.
Google Analytics can be difficult for beginners. MonsterInsights makes it easy by displaying all of your WooCommerce data directly in your WordPress dashboard.
You can quickly see your top performing products and other important product data at a glance.
It’s fully compatible with WooCommerce and has many WooCommerce blocks you can use to customize your product pages to improve your conversions, display popular products, customize checkout pages, and more.
SeedProd works with any WooCommerce theme so that you can customize your store without any limitations.
If you’re looking for even more must-have plugins for WooCommerce, then see our expert picks on the best WooCommerce plugins for your store.
Are you looking for a way to customize your WooCommerce product pages?
By fine-tuning your WooCommerce product pages, you can get more sales and improve your store’s conversion rates.
In this article, we will show you how to customize WooCommerce product pages without having to write any code.
Why Customize WooCommerce Product Pages in WordPress?
Your product pages are some of the most valuable content in your online store. The problem is that the default WooCommerce product pages aren’t optimized for conversions.
By creating unique product pages you can often convert visitors into paying customers at a much higher rate. This means you can earn more money without needing to attract more visitors to your site or improve your WooCommerce SEO.
Before you start customizing your WooCommerce product pages, you need to make sure you have the fastest WooCommerce hosting to support your online store because speed also has a big impact on conversion rates.
Once you’ve done that, let’s take a look at how you can customize your WooCommerce product pages with no code.
How to Customize Your WooCommerce Product Pages in WordPress
The easiest way to create a custom WooCommerce product page is by using SeedProd.
Even better, you can use SeedProd’s advanced theme builder to create a custom WordPress theme without having to write a single line of code.
You can use this drag-and-drop theme builder to customize every part of your online store, including your product pages.
SeedProd even has ready-made WooCommerce templates and eCommerce blocks that allow you to create a high-converting online store, fast.
Just be aware that this method will replace your current WooCommerce theme.
Install and Activate SeedProd
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.
Note: There is a free version of SeedProd that allows you to create stunning designs no matter what your budget. However, for this guide, we’ll use the premium plugin as it comes with the WooCommerce blocks and theme builder. You’ll need to buy a Pro subscription or higher in order to use the theme builder.
Upon activation, go to SeedProd » Settings and enter your license key.
With that done, it’s time to choose the WooCommerce template kit that you’ll use for your online store. Simply head over to SeedProd » Theme Builder and then click the ‘Theme Template Kits’ button.
Since we’re creating a custom WooCommerce theme, click on the ‘WooCommerce’ tab to see all the different eCommerce kits.
To preview a design, simply hover your mouse over it and then click on the magnifying glass.
This opens the template kit in a new tab.
This is a live preview, so you can see other designs in the kit by clicking on the links, navigation menus, buttons, and other interactive content.
Since you’re creating a custom WooCommerce product page, make sure to check out the product page design.
When you find a template kit you want to use, hover over it and then click on the checkmark when it appears. In this guide, we’re using the WooCommerce Starter Theme but you can use any template you want.
Customize the WooCommerce Product Page Template
SeedProd will import the whole kit into your WordPress website, so you can use the kit to create a custom product archive, shop page, blog index, and more.
To see all these templates, head over to SeedProd » Theme Builder.
After installing your template, you’re ready to start customizing the product page.
To get started, hover over the Product Page template and then click on the ‘Edit Design’ link when it appears.
This will open the template in SeedProd’s drag-and-drop editor, with a preview of your WooCommerce template to the right and some block settings on the left.
SeedProd will show an example of how the product page will look, using content from one of your WooCommerce products.
All the WooCommerce templates come with built-in blocks, which are a core component of all SeedProd’s designs.
To customize a block, simply click to select it in the page preview and then make any changes in the left-hand menu.
For example, the template comes with a built-in Featured Product block that you can customize in a few different ways.
To start, you may want to change the block’s size and alignment using the settings in the left-hand menu.
You’ll find more settings in the ‘Advanced’ tab. Here, you can make the image really stand out by adding a border or shadow, adding a CSS animation, and more.
As you make changes, the live preview will update automatically so you can try different settings to see what looks the best on your online store.
The WooCommerce template also has an Add To Cart call to action button. This allows shoppers to buy your products, so you’ll want to make the button stand out.
To start, you can replace Add To Cart with your own custom messaging, such as Buy Now or Get Yours Today. To make this change, simply select the Add To Cart button and then type the new text into the ‘Button Text’ field.
You may also want to add an icon font to the button, to help visitors understand what this button does at a glance.
SeedProd comes with a built-in library of more than 1400 Font Awesome icons that you can use on your product pages. In the left-hand menu, click to expand the ‘Icons’ section.
You can now choose whether to show the icon before or after the button text.
Simply make your decision and then click on the ‘Choose Icon’ button.
You’ll now see all the different Font Awesome icons that you can use. When you find an icon you like, give it a click.
When you’re happy with the button’s messaging, you can change how it looks by clicking on the ‘Templates’ tab. Here, you’ll find different button templates that you can use.
To use any of these designs, simply click on the one you want.
After choosing a template, you can fine-tune how the button looks by clicking on the ‘Advanced’ tab. Here, you can change the spacing between the button and the quantity box, increase the border radius to create curved corners, and more.
Another option is to open the ‘Button Style’ dropdown and choose a new style from the list.
Most of the settings are self-explanatory so it’s worth going through them to see what different kinds of effects you can create.
With that in mind, it’s worth clicking to select the block and then seeing what changes you can make in the left-hand menu. For example, you can change the background color, text color, increase the padding, and more.
To remove any of the default blocks, simply hover your mouse over that block.
Then, click on the Trash can icon when it appears.
You can also move blocks around the page using drag and drop.
Get More Sales with a Custom WooCommerce Product Page
The template’s built-in blocks are a great start, but you may want to add your own content.
SeedProd has lots of WooCommerce blocks that you can use to create a high-converting online marketplace or store. To help you out, here are some blocks you may want to add to your WooCommerce product page.
Show Related WooCommerce Products
You may be able to get more sales and increase the average order value by showing related items on your product pages. These might be products that shoppers frequently buy together or items that complement one another.
For example, if a customer buys a laptop then they may also be interested in a laptop bag.
SeedProd comes with a ready-made Related Products block. However, to get the most out of this block you’ll need to set up linked products in the WooCommerce plugin, as you can see in the following image.
With that done, simply find the Products Related block in the SeedProd editor and then drag it onto your layout.
By default, the block shows one related product in a single column.
You can show more products by typing new numbers into the ‘Columns’ and ‘Posts Per Page’ boxes or by clicking the arrow buttons.
If you display multiple products, then you can change how these items are arranged using the ‘Order By’ box. For example, you might show the highest-rated products first, since customers seem to enjoy these items the most.
You can also open the ‘Order’ dropdown and choose whether to display the related items in ascending (ASC) or descending (DESC) order.
Add a Star Rating
Showing a star rating for each product can help reassure shoppers that your items are good quality. That said, you may want to drag the Star Rating block onto your design.
For the best results, we recommend showing the star rating towards the top of the screen, where it’s easy for customers to spot. This can help shoppers make purchasing decisions faster since they can immediately see whether other shoppers recommend a product.
Use FOMO by Showing the Product Stock
FOMO, or ‘fear of missing out,’ encourages shoppers to take action now.
If you sell limited edition items or regularly have a small amount of stock, then you may want to show the number of products remaining. This can convince shoppers to buy now, rather than wait and risk the product selling out.
To show this information, drag the Product Stock block onto your design.
By default, the block displays the number of items remaining, followed by ‘in stock.’ You may want to add your own messaging to this default text.
To do this, simply type into the small text editor in the left-hand menu. If you do add some text, then be careful not to edit the ‘[sp_product_stock]’ tag as this allows SeedProd to show the total number of items remaining.
Replace the Featured Image with a Product
A featured product image lets shoppers see what they’re buying in an online store.
However, sometimes you may want to replace a single featured image with a product galley. For example, you might show the same product from different angles. Some stores even use interactive 360-degree images so shoppers can explore a product in more detail.
If you’ve added a gallery to your WooCommerce products, then it makes sense to replace the default Product Featured Image block with a gallery block.
To do this, simply hover over the Featured Product block and then click on the trash can icon when it appears.
You can then find the Product Gallery Image block in the left-hand menu and drag it onto your page layout.
We recommend adding this block toward the top of the page, so visitors can immediately see what they’re buying.
Shoppers can zoom into the image by hovering their mouse over the product gallery.
By default, the zoom icon appears in the upper-right corner of the current featured image, but you can change this using the ‘Position Top’ and ‘Position Right’ sliders.
You can also make the magnifying glass icon bigger or smaller using the ‘Font Size’ slider or change its icon color and background color.
You can also add borders around the different images, using the ‘Image Border’ and ‘Thumbnails’ border settings.
Create a Buzz on Social Media with Sharing Buttons
If a shopper shares your product on social media, then it can drive more people to your online store. With that in mind, it’s a good idea to add social share buttons to your product pages.
SeedProd has a Social Sharing block that supports Facebook, Twitter, LinkedIn, and Pinterest. Simply drag and drop this block onto your page and it’ll add the Facebook and Twitter sharing buttons automatically.
To add more social networks, simply click on the ‘Add New Share’ button.
You can then choose a social media site from the dropdown menu.
After adding all the networks you want to use, you can change the size of the sharing buttons using the ‘Size’ dropdown.
Bigger social sharing buttons will stand out more, although it may distract from the page’s other content including the Add To Cart call to action.
Show Customer Testimonials and Business Reviews
WooCommerce lets customers review your individual products, but you may also want to show customer testimonials. These might be quotes from your best reviews, comments about your excellent customer service, or any other content that you want to highlight.
SeedProd’s Testimonials block lets you create rotating testimonials, which is a great way to show lots of information in a small amount of space.
A ‘recently viewed’ section encourages customers to revisit products they recently saw, but didn’t add to their cart. This helps customers compare products and find the item that’s right for them. It also gives them a chance to change their mind, and buy a product they recently visited but didn’t add to their shopping basket.
With that being said, you may want to add SeedProd’s Recent Products block to your design.
After adding the block, you can change the number of columns using the settings in the left-hand menu.
If you want to show lots of different products, then you can add pagination by activating the ‘Pagination’ toggle.
If you do enable ‘Pagination,’ then you’ll get access to some extra settings.
To start, you can show the total number of results at the top of the Recent Products block, by enabling the ‘Show Items Count’ toggle.
You may also want to enable the ‘Show Order By’ slider, as this allows visitors to sort through the recent products.
As you can see in the following image, this adds a ‘Default Sorting’ dropdown to the area.
Show Your Most Popular WooCommerce Products
You may want to show the best-selling or top-rated products on your product pages. Since these items are already performing well, showing them to more people can be an easy way to get more sales.
Another option is to show products that are currently on sale. This can motivate shoppers to buy these items now, in order to get the best deal.
SeedProd has a few blocks that can fetch these products automatically. If you want to show your biggest sellers, then add the Best Selling Products block to your design.
If you want to show products that have the highest star rating, then you can drag the Top Rated Products block onto the page.
Finally, there’s a Sale Products block that shows all the items that are currently on sale.
No matter what block you add, click to select it and then take a look at the settings in the left-hand menu. All of these settings are straightforward, so it’s worth going through them to see what different effects you can create.
How to Publish Your Custom WooCommerce Product Page
When you’re happy with how the product page looks, it’s time to save your changes. Simply go ahead and click the dropdown arrow next to ‘Save’ and then select the ‘Publish’ option.
The custom product page won’t appear on your online store until you activate the entire custom WooCommerce theme. This gives you the chance to look through the other designs in your theme kit, and then make any changes using SeedProd’s drag-and-drop builder.
For example, you’ll typically want to edit the header and footer templates to feature your own navigation menus, your store’s custom logo, and other content. For inspiration, please see our checklist of things to add to the footer of your WordPress site.
To edit any other template, head over to SeedProd » Theme Builder. Then, hover over the template you want to customize.
You can then click on the ‘Edit Design’ link when it appears.
Now, simply change the design by adding more blocks and then customizing them using the settings in the left-hand menu.
Just keep repeating these steps until you’re happy with how all the templates are set up.
When you’re ready to make the custom WooCommerce theme live, go to SeedProd » Theme Builder. You can then click on the ‘Enable SeedProd Theme’ toggle so it shows ‘Yes.’
Now, if you visit your online store you’ll see the custom WooCommerce product page live.
Are you trying to understand what WordPress layout terms mean?
Many beginners come across WordPress layout terms and vocabulary when working on their websites. These are words used by designers and developers, and average users may find them confusing.
In this guide, we will explain some of the most commonly used WordPress layout terms. This will help you understand the lingo used for WordPress website layouts and work on your website like a total pro.
Why Learn WordPress Layout Terms?
WordPress themes control the appearance of your website. Depending on which theme you are using, you can customize it in multiple ways.
For themes that support the full site editor, you can customize them by visiting the Appearance » Editor page.
If you use a classic theme (a theme that doesn’t currently support the full site editor), then you can customize it by visiting the Appearance » Customize page.
This will launch the theme customizer, which looks like this:
All top WordPress themes have options to modify your website design using the theme customizer or the full site editor, but your options are limited depending on the theme.
SeedProd allows you to easily create custom layouts using simple drag-and-drop tools without writing any code.
It also has dozens of templates you can use as starting points. Plus, SeedProd supports WooCommerce, which also helps you create layouts for your online store.
However, as you work on creating a layout for your website, you might come across web design terms that you may not be familiar with.
Learning these website layout terms will help you to understand the building blocks of WordPress website design so you can more easily create any design you can imagine.
Let’s demystify these common WordPress layout terms to learn what they mean and how to use them. Here is a quick list of the concepts and terms we will explain in this article:
Most websites use a very familiar layout. It looks something like this:
The top area of a website is called the header, followed by a content area, and then a footer at the bottom of the page.
Depending on which page a user views, the layout might differ.
For instance, a WordPress blog page may include a sidebar next to the content area.
This basic layout is filled with other elements, which we will discuss later in this article.
Let’s first talk about each of these main sections in more detail.
Header in WordPress Layout
The header in a WordPress layout is the top section of any page. It usually contains your website logo, title, navigation menus, a search form, and other important elements you want users to see first.
Here is how the header section looks on WPBeginner.
Custom Header in WordPress Themes
Many popular WordPress themes come with additional features to customize the header area of your WordPress layout. This feature is sometimes called a custom header.
If you use a theme with site editor support, then you can change the header by clicking on the header area in the site editor.
From here, you can customize the header to your liking. You can change colors, the navigation menu, and add blocks like search, site logo, buttons, and more.
For classic themes, you can find the custom header settings in the ‘Header Options’ tab.
Depending on your WordPress theme, you may be able to add a full-width image to the header with a tagline or a call-to-action button.
Some WordPress themes may allow you to change the logo’s position, navigation menus, and header images.
Custom Background in WordPress
Some WordPress themes also allow you to easily change the background color or use a background image for your website.
If you use a theme with site editor support, then you can change the background color by going to ‘Styles’ in the full site editor.
Simply choose the ‘Colors’ option from the Styles panel.
After that, you can click on ‘Background’ to pick a background color for your website.
For classic themes, the settings will depend on your theme features.
Many classic themes come with custom background support. You can find these settings in the ‘Colors’ or ‘Background Image’ options in the theme customizer.
Often, these options are buried inside other tabs, and you will have to look around to find them.
The content area comes right after the header part of a layout. This is where the main content of the page is displayed.
For a custom homepage layout, the content section may include a call to action followed by services or products, testimonials, and other important information.
Online stores typically use this area to promote ongoing sales, featured products, best-selling items, and more.
A WordPress blog may use a content-heavy layout with excerpts and images from recent articles, a newsletter sign-up form, and more.
Here is how WPBeginner’s homepage layout looks. It is a content-rich website, so the recent articles take up the whole content area.
By default, WordPress uses a blog layout showing your most recent blog posts as the front page of your website.
However, you can change that setting and use any page as the front page of your website.
Just go to the Settings » Reading page and choose ‘A static page’ under the ‘Your homepage displays’ option.
After that, you can choose a page you want to use for your homepage and another for your blog page.
As the name suggests, sidebars typically appear on the content area’s right or left side.
In WordPress, sidebars are also widget-ready areas. This means that you can add widgets to this area and display elements like archives, newsletter sign-up forms, categories, popular content, and more.
To edit your sidebars, you need to go to the Appearance » Widgets page. From here, you can add blocks to your sidebars and edit them to your liking.
However, not all WordPress themes come with widget-ready areas or sidebars.
If you cannot see a Widgets menu under Appearance, then your theme doesn’t support sidebars or have any widget-ready areas.
Footer Area in WordPress Layouts
The footer area appears below the content area at the bottom of a page layout.
If you use a WordPress theme with site editor support, then you can edit the footer area by clicking on it.
You can also edit the footer area by clicking on ‘Patterns’ in the site editor navigation. The footer area will appear under the ‘Template Parts’ menu item.
While editing the footer area in the site editor, you can add any blocks to display different elements.
For instance, you can add a list of your most important pages, show a navigation menu, add a contact form, and more.
If you are using a classic theme, then there is a good chance that your theme comes with a footer widget area.
Simply go to the Appearance » Widgets page and look for a footer widget area.
Like the site editor, you can use blocks to add different elements to footer widgets in your theme.
Next, we will look at some of the components of a WordPress layout that you can add to your header, content, sidebar, or footer sections. These are the building blocks that help you make a functioning layout.
Navigation Menus in WordPress
Navigation menus or menus are horizontal or vertical lists of links. Most websites have at least one primary navigation menu in the header area.
However, some websites use multiple navigation menus in the header area.
WordPress also allows you to display navigation menus as a widget. These menus appear as a vertical list of links, and you can place them in sidebars or the footer widget areas.
If your WordPress theme supports widgets, then you can use them to rearrange your website layout. Plus, with block widgets, your theme can now also use blocks in the widget areas.
You can add widgets to your WordPress website’s widget-ready areas or sidebars. Some WordPress themes come with multiple widget-ready areas to add widgets or blocks.
WordPress comes with several built-in widgets and blocks that you can use. Many popular WordPress plugins also provide their own widgets and blocks.
For example, you can use widgets/blocks to add popular post lists, a contact form, banner ads, social media feeds, and more.
You can see all these widgets by visiting the Appearance » Widgets page in the WordPress admin area.
Note: You may not see the ‘Widgets’ page in the WordPress admin area if your theme has no widget areas.
WordPress uses the block editor to write content, manage widget areas, or edit your website. It uses blocks for all common web elements, which is why it’s called the block editor.
This editor is designed to help you create beautiful layouts for your WordPress posts and pages using blocks.
There are different types of blocks for the most common elements of any type of content. For instance, you can add paragraphs, headings, images, galleries, video embeds, columns, tables, and more.
This allows you to create different layouts for each post or page on your WordPress website without installing a plugin or changing your theme.
Featured Images in WordPress Layouts
If you visit the homepage of WPBeginner, you will notice thumbnail images next to each article title. These are called featured images.
WordPress allows you to set featured images for your posts and pages. Your WordPress theme then uses these images in different areas of your website.
Patterns are collections of pre-arranged blocks that you can use to quickly add different sections to your layouts.
You can use patterns for writing content and editing posts and pages.
Similarly, you can use patterns in the full site editor in your WordPress theme and website layout.
Simply launch the site editor, and you will see patterns in the ‘Design’ options.
Each pattern is a collection of blocks arranged in a particular order for commonly used layouts.
Your WordPress theme may come with several patterns. You can also find more patterns in the WordPress Patterns Library.
Want to save your design sections? You save your own block arrangements as patterns and reuse them later.
It is a relatively new feature, so a limited set of patterns is available. However, more options will become available as more WordPress themes and plugins add their patterns to the block editor.
Buttons play an important role in modern website design and layouts. They provide users with a clear call to action, which helps you grow your business and conversions.
The default block editor comes with a Button block that you can use in any WordPress post or page or inside the site editor.
Your WordPress theme may also come with a call to action button settings in the theme customizer. Most popular WordPress page builder plugins also come with buttons in various styles that you can use.
CSS is the styling language used to create websites. Your WordPress theme and plugins come with their own CSS rules, but from time to time, you may want to change small things like text color, font size, or background color.
This is where custom CSS comes in. WordPress makes it easier for you to save your own custom CSS rules.
If you use a theme with the site editor support, then just go to the Appearance » Editor page to launch the site editor.
Click on any template to start editing, and then click on the ‘Style’ button in the top-right corner of the screen.
This will show the ‘Styles’ panel in the right column. From here, scroll down and click on the ‘Additional CSS’ tab.
This will show a text box where you can add your additional CSS code.
Don’t forget to click on the ‘Save’ button to store your changes when you are finished.
If you are using a classic WordPress theme, then you can add your custom CSS in the theme customizer.
Simply go to the Appearance » Customize page and then click on the ‘Additional CSS’ tab.
From here, you can add your custom CSS rules, and you will be able to see them applied in the live preview.
Adding Custom CSS in WordPress Using a Plugin
Normally, if you use the default methods, then your custom CSS code is saved with your theme settings. Changing your theme will disable your custom CSS code.
A better way to store your custom CSS in WordPress is by using the WPCode plugin. It is the best WordPress code snippet plugin that allows you to easily add custom code snippets without breaking your site.
Upon activation, go to the Code Snippets » + Add New from the WordPress admin dashboard.
Then, hover over the ‘Add Your Custom Code (New Snippet)’ option in the code snippets library and click the ‘Use snippet’ button.
Next, at the top of the page, add a title for your custom CSS snippet. This can be anything that helps you identify the code.
After that, write or paste your custom CSS into the ‘Code Preview’ box and set the ‘Code Type’ by choosing the ‘CSS Snippet’ option from the dropdown menu.
Then, scroll down to the ‘Insertion’ section and select the ‘Auto-Insert’ method if you want to execute the code across your entire WordPress website.
You can choose the’ Shortcode’ method if you only want to execute the code on specific pages or posts.
Finally, go back to the top of the page, toggle the switch to ‘Active’, and then click on the ‘Save Snippet’ button.
The easiest way to build custom WordPress layouts for your landing pages is by using a WordPress page builder.
We recommend using SeedProd. It is the most beginner-friendly WordPress page builder plugin on the market.
Other page builders use similar terms for common tools and features.
Using Templates in WordPress Page Builders
Templates are the quickest way to create a web page layout. All popular page builder plugins come with a bunch of ready-to-use templates that you can use as a starting point.
For instance, SeedProd has templates for different types of pages that you may need, including landing pages, sales pages, 404 pages, coming soon pages, and more.
Modules and Blocks in WordPress Page Builders
Like the blocks in the default WordPress editor, page builder plugins also use blocks.
Some page builders may call them modules or elements, but they are essentially the same thing.
However, page builder plugins come with more blocks than the default editor. For instance, SeedProd includes blocks for testimonials, WooCommerce blocks, Google Maps, contact forms, Facebook embeds, and more.
You can use blocks to create your own layouts, move them around, and play around to figure out what works best for your business.
Using Sections in Your WordPress Layouts
Similar to the ‘Patterns’ feature in the default editor, a Section is a set of blocks grouped to instantly create common areas of a website.
For instance, you can typically use a header section, hero image, pricing tables, and more.
Different WordPress page builder plugins may use different terms for them. For instance, in SeedProd, they are called sections, and Beaver Builder calls them saved rows and columns.
Do you want to create a custom landing page on your WordPress site?
If you’re running a marketing or adverting campaign, then a landing page can help you achieve your goals and get more conversions.
In this article, we’ll show you how to easily create a landing page in WordPress.
What is a Landing Page?
A landing page is a standalone page created for a specific advertising, email, social media, or marketing campaign. Users coming from these sources will land on this page first, which is why it’s called a landing page.
Landing pages are designed to get conversions, which just means that a visitor takes an action you want on your site. That might be buying a particular product from your online store, subscribing to your email list, filling in a form, or any other action that benefits your website.
What is the difference between a homepage and a landing page?
A homepage is the page that visitors see when they type your domain name into their browser. You can think of it as your website’s front page or store window.
On the other hand, a landing page is where most visitors will land when they come from paid or third-party traffic sources.
A good homepage will encourage visitors to engage with your WordPress website, explore other pages, browse products, or sign up for your email newsletter. With that in mind, a homepage typically has lots of links and gives visitors many different choices.
On the other hand, a landing page is built to get conversions. It has fewer links and typically has a single goal, which is called the call to action, or CTA. You can use any CTA you like, but a lot of landing pages encourage visitors to make a purchasing decision or share information as part of a lead generation strategy.
Your website will only ever have one homepage, but you can create as many landing pages as you want.
That being said, let’s take a look at how to create a beautiful custom landing page in WordPress.
Simply use the quick links below to jump straight to the method you want to use.
Note: To help our readers avoid choice paralysis, we haven’t included all landing page builders like Elementor, Leadpages, Instapage, Unbounce, or ClickFunnels. Instead, we’ve picked the best solutions for small businesses.
Method 1. How to Create a Landing Page in WordPress Using the Block Editor (No Plugin Required)
If you’re using a block theme, then you can design a custom landing page using the full site editor. This allows you to create a landing page using the tools you’re already familiar with.
Unfortunately, this method doesn’t work with every WordPress theme. If you’re not using a block-based theme, then we recommend using a page builder plugin instead.
To start, simply create a new WordPress page, which we’ll turn into our landing page.
In the right-hand menu, click on the ‘Page’ tab. Then, simply find the ‘Template’ section and click on ‘New.’
In the popup that appears, give your landing page template a name and then click ‘Create.’
The name is just for your reference so you can use anything you like.
This launches the template editor. You can now design your landing page in exactly the same way you build a page in the standard block editor.
To add blocks to the landing page, just click on the blue ‘+’ button. You can now drag different blocks onto your design.
You can add content to a block or change its formatting using the familiar WordPress tools.
For example, you can type text into a ‘Paragraph’ block, add links, change the text alignment, and apply bold or italic effects.
You can also create a landing page using patterns, which are collections of blocks that are often used together. Patterns can help you create a landing page with a nice layout, fast.
To see the patterns that are included in your WordPress theme, go ahead and click on the blue ‘+’ button and then select the ‘Patterns’ tab.
You can either drag and drop a block pattern onto your layout or click on the pattern, which will add it to the bottom of your template.
After adding a pattern, you can click to select any block within that pattern and then make your changes. For example, you can replace any placeholder text or add links so the call to action points to different areas of your WordPress blog.
When you’re happy with how the custom landing page looks, click on the ‘Publish’ button and then select ‘Save.’
Now, your page will be using this new template. You can simply update or publish the page to make your landing page live.
Method 2. Creating a WordPress Landing Page using SeedProd (Recommended)
The easiest way to make a landing page is by using SeedProd. It is the best page builder on the market and allows you to create any type of landing page without writing code.
First, you need to install and activate the SeedProd plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Note: There is a free version of SeedProd available on WordPress.org, but we will be using the Pro version since it has more templates and blocks, including eCommerce blocks.
Upon activation, head over to SeedProd » Settings and enter your license key.
Next, simply go to SeedProd » Landing Pages and click on ‘Add New Landing Page.’
You can now choose a template for your landing page.
SeedProd has lots of designs that are organized into different campaign types such as coming soon and 404 pages. You can click on the tabs at the top of the screen to filter templates based on campaign type.
Since we’re creating a landing page, you may want to take a look at the Sales, Webinar, or Lead Squeeze tabs.
To preview a design, simply hover your mouse over it and then click on the magnifying glass.
Choosing a design that matches the type of landing page you want to create will help you build the page faster. However, every template is fully customizable so you can change every part of the template and create any landing page you like.
When you find a template that you want to use, simply click on ‘Choose This Template.’
We’re using the Fitness Sales Page template in all our images, but you can use any design.
Next, go ahead and type in a name for your landing page. SeedProd will automatically create a URL based on the page’s title, but you can change this URL to anything you like.
For example, you may want to add some extra keywords to improve your WordPress SEO.
When you’re happy with the information you’ve entered, click on the ‘Save and Start Editing the Page’ button.
This will take you to the drag and drop editor, where you can build your landing page. The SeedProd editor shows a live preview of your template to the right, and some block settings on the left.
Blocks are a core part of SeedProd, and you can use them to create any kind of landing page.
Most templates already come with built-in blocks. To customize a block, simply click to select it in the page preview and then make any changes in the left-hand menu.
For example, if you want to replace a placeholder image then start by selecting the Image block. Then, click on the ‘Select Image’ icon in the left-hand menu.
You can now either choose an image from the WordPress media library or upload a new file from your computer.
Similarly, you can replace any placeholder text with your own words. Simply select any Text or Headline block and then type into the small text editor.
You can also completely change how the landing page looks using the settings in the left-hand menu, including changing the color scheme, font choice, link color, buttons, and more.
Most of these settings are fairly self-explanatory, so it’s worth selecting different blocks in your layout and then looking through the settings.
You can also drag and drop blocks to move them up or down in your layout.
To add more blocks to your landing page, simply drag and drop them onto your design.
Even better, SeedProd has lots of blocks that are perfect for creating a high-converting landing page.
For example, you may want to add a countdown timer that will count down the minutes until the visitor can no longer convert. This can add a sense of urgency to sales, free gift coupons, pre-orders, and other campaigns.
Simply find the ‘Countdown’ block and drag it onto your landing page.
You can then set a time and date when the timer will expire.
SeedProd also comes with ‘Sections,’ which are blocks that are often used together. This includes lots of sections that can help you build a landing page including a header, hero image, call to action, testimonials, contact form, FAQs, features, footer sections, and more.
To take a look at the different sections, simply click on the ‘Sections’ tab. To preview any section, hover your mouse over it and then click on the magnifying glass.
If you want to use the section, then just click on ‘Choose This Section.’
SeedProd will add the section to the bottom of your landing page, but you can move it around using drag and drop.
SeedProd is also fully compatible with WooCommerce so you can easily create new landing pages to promote your products, services, sales, and other events.
Even better, SeedProd comes with special WooCommerce blocks including add to cart, checkout, recent products, and more. This allows you to create custom WooCommerce checkout pages, custom cart pages, and more, so you can build a high-converting online store without being limited by your WooCommerce theme.
If you’re building a landing page to get more sales on your online store, then we recommend creating popular products or recommended products sections.
To create this section, simply drag a ‘Best Selling Products’ block onto your page.
The block will show your most popular products by default, but you can also show products that are on sale, your newest products, and more.
Simply open the ‘Type’ dropdown and choose any option from the list.
Simply click on the ‘Connect’ tab and then select your email service provider.
SeedProd will then show you exactly how to integrate this landing page with your email marketing services.
If you don’t see your email provider listed, don’t worry. SeedProd works with Zapier which acts as a bridge between SeedProd and more than 3000+ other apps.
Just scroll to the ‘Other’ section and hover over ‘Zapier.’ When the ‘Connect’ button appears, give it a click and then follow the onscreen instructions to connect SeedProd and Zapier.
Using a Custom Domain for Your Landing Page
By default, SeedProd will publish the landing page under your website’s domain. However, sometimes you may want to use a custom domain instead.
This will give your campaign its own distinct identity, separate from the rest of your website. It’s also much easier to track each page’s performance in Google Analytics to see if you’re getting good results.
Instead of creating a WordPress multisite network or installing multiple websites, you can easily map a custom domain to any landing page you create in SeedProd.
Before you get started, make sure your WordPress hosting provider allows you to use multiple domains, and add the domain name to your hosting dashboard, if you haven’t already.
First, you need to install and activate the plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, go to Settings » Beaver Builder. Then, click on the ‘License’ tab.
Here, simply enter the license key, which you’ll find in your account on the Beaver Builder website. You can then click on ‘Save License Key.’
To create a custom landing page, head over to Pages » Add New in your WordPress admin dashboard. You’re now ready to build your landing page, by clicking the ‘Launch Beaver Builder’ button.
This will open the Beaver Builder editor.
In the right-hand menu, you’ll see all the modules and rows that you can add to your landing page. If this menu doesn’t open automatically, then click on the ‘+’ in the top-right corner to open it.
Since we want to create a landing page, choose ‘Templates’ and then open the ‘Group’ dropdown menu.
After that, select ‘Landing Pages’ to see all the templates you can use.
When you find a template that you like, simply click on it.
Beaver Builder will now apply this design to your landing page.
To edit any part of a template, give it a click.
This opens a popup containing all the settings for this particular block. For example, in the following image, we’re editing a Text Editor module.
You can add more modules to your landing page by clicking on the ‘Modules’ tab.
When you find a module that you want to use, just drag and drop it onto your landing page.
You can also add rows to your landing page, which are layouts that help organize your modules and other content.
To do this, simply select the ‘Rows’ tab and then drag and drop any layout onto your page.
You’re now ready to drag and drop modules onto this row, which will arrange them in an organized layout.
When you’re happy with how the landing page looks, simply click on the ‘Done’ button at the top of the page.
If you’re ready to make the page live, then select ‘Publish.’
You can now visit your website to see the landing page in action.
Do you want to make a link in bio page in WordPress?
A link in bio page is a popular way to send traffic from social media to multiple pages on your website. It’s commonly used by Instagram influencers and other social media celebrities.
In this article, we’ll show you how to easily make a link in bio page in WordPress.
Why Create a Link in Bio Page in WordPress?
A link in bio page lets you send social media traffic to specific pages on your WordPress website. Social media platforms like Instagram, Twitter, and Facebook only allow a single link in your profile.
But, instead of sending users to a single page, you can create a link in bio page that lets you send traffic to multiple pages.
There are services like LinkTree, ContactInBio, Bio.FM, and more that help you create link in bio pages.
By using a WordPress plugin, you can create your very own link in bio page without having to use a third party service.
Creating your own link in bio landing page gives you much more control and flexibility.
You can design a completely unique page
Match your landing page to the design of your website
Add analytics and track page performance
Avoid spam triggers with third-party services
With that said, let’s take a look at how you can create a link in bio landing page in WordPress.
How to Create a Link in Bio Page in WordPress Using SeedProd
With this plugin, you can easily create a link in bio page that offers your visitors multiple links for Instagram.
For this tutorial, we’re going to focus on making an Instagram bio link page. However, the same page design can be used for any social media network.
First thing you need to do is install the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Note: there is a free version of SeedProd that you can use, but we’ll be using the Pro version since it has more features and templates.
Once the plugin is activated, you need to navigate to SeedProd » Settings and enter your license key. This information is under your account on the SeedProd website.
To create a new landing page, navigate to SeedProd » Pages and then click the ‘Add New Landing Page’ button.
With SeedProd, you can create as many custom pages as you want.
Next, click on the ‘Lead Squeeze’ filter and select the ‘Personal Links’ page template.
All you have to do is hover over the template and click on the orange ‘Checkmark’ icon.
Once you’ve done that, you will see a popup where you can name your page.
The ‘Page Name’ won’t appear on your design, but it will set the URL for the page. So it’s important to choose a page name that makes sense when you add the link to Instagram.
After that, click the ‘Save and Start Editing the Page’ button.
This will bring up a new screen with the page builder. You can edit every single part of the page with the drag and drop builder.
The left-hand menu contains a variety of blocks that you can drag and drop onto the page.
Once an element is on your page, you can click it and bring up the options panel to customize it further.
Since we’re going to create an Instagram bio link page, we’ll delete the main image and the placeholder text.
To do this, hover over the image and click on the ‘Trash Can’ icon and then click on the ‘Yes, delete it!’ button.
After that, follow the same steps to delete the placeholder text.
Next, you can replace the header with your name, business name, or even upload your logo.
To add your logo to the top of the page, delete the text block, hover over the ‘Image’ block, and drag it to the top of the page.
Once you’ve done that, you can upload your logo by selecting ‘Use Your Own Image’ on the left-hand menu.
The menu on the left lets you resize your image, change the alignment, and more.
You can even make your image a link that goes to your homepage, or another page on your WordPress blog.
Next, you can change the links to whatever you’d like to link to.
Simply click on one of the buttons, and you can change the button text, link, size, and more.
To change the overall look of the button, click the ‘Templates’ tab.
There are a ton of button presets for you to choose from.
If you want to customize the button further, then click on the ‘Advanced’ tab.
Here you can adjust the size of the button, change the background color, and more.
Once you’re done customizing your link in bio page, make sure to click ’Save’ at the top of the page.
To publish your page live, click the arrow next to ‘Save’ and select the ‘Publish’ option.
Your link in bio page is now live, and you can add the link to Instagram and your other social media profiles.
Best of all, the custom page you created is fully responsive, so it’ll look good no matter what screen size it’s being viewed on.
Bonus: How to Add Analytics to Your Link in Bio Page
Another feature offered by services like LinkTree is page analytics. The best way to track your website analytics is with Google Analytics.
The easiest way to add Google Analytics to WordPress is by using MonsterInsights. It’s the best analytics plugin for WordPress and lets you view your website stats directly in your WordPress dashboard.
This means you can see how your link in bio page is performing at a glance.
Note: There is a free version of MonsterInsights available, but we’ll be using the pro version since it has more features and the addons we need.
Once you’ve integrated MonsterInsights and Google Analytics navigate to Insights » Addons. After that, find the ‘Page Insights’ addon and then install and activate.
Now, go to Page » All Pages and find the link in bio page you created.
Then, click the ‘Insights’ icon that looks like a traffic graph.
This will bring up your page statistics and show you the bounce rate, number of entrances, time on page, and more.
If you just added the link to your social media profiles, then it will take some time for this data to show up.
Speed is crucial for the success of an eCommerce site. It not only improves customer experience, but it directly impacts conversions and sales.
In this guide, we’ll show you how to easily speed up your eCommerce store to improve performance and conversions.
Why Speed Matters for Your eCommerce Store
Speed is extremely important when it comes to user experience. No one likes a slow website, a slow computer, or a slow app.
But for online stores, a slow website can actually costs you business.
For instance, a study found that a single-second delay in page load time results in 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction.
In simpler words, slow websites can lead to lower sales.
Now apart from user experience and sales, eCommerce site speed also affects your SEO rankings. Search engines like Google consider speed as an important user experience indicator and ranking factor.
In fact, Google’s page experience search update is solely focused on user experience metrics like bounce rate and website speed. A faster eCommerce website will help you bring more free traffic from search engines.
That being said, let’s take a look at how to easily bump up your eCommerce store speed and performance.
Here is a quick overview of the topics we’ll cover in this guide.
SiteGround servers run on Google Cloud Platform which is known for high performance. They have built-in caching and even have their own optimization plugin that automatically implements many of the performance tips that we’ll recommend later in this article.
If you are looking for alternatives, then check out our list of best WooCommerce hosting providers.
After setting up your eCommerce store on a good hosting service, you can implement the following optimization tips to boost performance.
2. Install a WordPress Caching Plugin
WooCommerce is a dynamic eCommerce platform. This means all your product data is stored in a database and product pages are generated when a user visits your website.
To do this, WordPress needs to run the same process each time. If more people visit your eCommerce store at the same time, then it will slow down and may even crash.
A caching plugin, helps you fix that issue.
Instead of generating pages each time, a caching plugin shows user a cached version of the HTML page. This frees up your server resources and allows it to run more efficiently thus improving website loading time.
There are some great WordPress caching plugins available, and popular WordPress hosting companies like SiteGround and Bluehost offer their own caching systems.
Unlike other WordPress caching solutions, WP Rocket doesn’t wait for users to visit a page to generate a cached version. Instead, it automatically prepares a cache of your website and keeps it up to date.
With the right WP Rocket settings, you can easily get near perfect scores in speed test tools like Pingdom, GTMetrix, Google Pagespeed Insights, and more.
Top WordPress hosting companies, like SiteGround and Bluehost offer their own caching solutions too.
SiteGround SG Optimizer
SiteGround allows you to easily turn on caching on your eCommerce store by using their SG Optimizer plugin.
This all-in-one performance tool includes caching, performance tweaks, WebP image conversion in WordPress, database optimization, CSS minification, GZIP compression, and more.
Upon activation, click on the SG Optimizer menu in your WordPress admin sidebar to access plugin settings. From here, you need to turn on the Dynamic Caching option.
Similarly, Bluehost also allows you to use its built-in caching system for optimizing WooCommerce. Simply login to your Bluehost dashboard and go to My Sites page. If you have multiple sites, then select your site and then switch to the Performance tab.
From here you can select a caching level for your website. For instance, you can choose eCommerce but if your website still remains slow then you can come back here and increase the caching level.
3. Use Latest PHP Version
WordPress and WooCommerce are both mainly written in the PHP programming language.
With each new version, PHP improves in performance and becomes faster. It also fixes bugs and patches security issues that may compromise your website’s stability and speed.
This is why you should always use the latest PHP version.
You can find out your eCommerce store’s PHP version by visiting Tools » Site Health in your WordPress dashboard and switching to the ‘Info’ tab.
From here, you need to click on the ‘Server’ section to expand it, and you’ll be able to see the PHP version used by your server.
If your website is running on a PHP version lower than 8.0, then you should reach out to your hosting provider and ask them to update it for you.
Note: Some managed WordPress hosting companies like SiteGround have built their own Ultrafast PHP to improve overall server response time. Others are using PHP FastCGI to help customers improve eCommerce speed.
4. Latest Version of WordPress & WooCommerce
WordPress and WooCommerce developers spend a significant amount of time on improving performance during each development cycle. This makes both apps run more efficiently and use fewer server-side resources.
Each new version also fixes bugs and strengthens security which is crucial for an eCommerce business.
As the store owner, it is your responsibility to make sure that you are using the latest version of WordPress, WooCommerce, other plugins, and your WordPress theme.
Simply go to Dashboard » Updates page to install all available updates.
5. Optimize Product Images for Performance
Product images are one of the most visually important things for an online store. Better product images keep customers engaged and can help boost sales conversion.
This is why it’s important to add high-quality product images. However, you need to make sure that large image file sizes are properly optimized.
First, you can optimize each product image on your computer before uploading it to your website. This requires image editing software like Adobe Photoshop, Affinity, Gimp, etc.
Most of them have an option to export an image for the web. You can also adjust the quality of the image before saving it for upload.
Alternately, you can use an image compression plugin for WordPress. These plugins automatically optimize your product image size for better site performance.
Aside from image compression, the image file type you choose can also help. For example, JPEG images are better for images that have a lot of color, whereas png images are better for transparent images.
6. Use a DNS Level Website Firewall
Brute force and DDoS attacks are common internet nuisances. Basically, hackers try to overload your server to break in, steal data or install malware.
Most hosting companies have basic safeguards that protect your websites from such attacks. However, one downside of these attacks is that they make your website loads extremely slow.
This is where you need a Website Application Firewall (WAF).
Now, common WordPress firewall plugins run on your own webserver. This makes them a little less efficient as they cannot block suspicious attacks until they reach your server.
On the other hand, a DNS-level firewall is able to filter your traffic on the cloud and block suspicious attacks even before they reach your website.
Sucuri also comes with a powerful CDN (content delivery network). A CDN serves your website’s static content (images, stylesheets, JavaScript) from a global network of servers. This further reduces your server load and improves overall site load time.
If you are looking for a free option, then Cloudflare free CDN gives you basic level DNS firewall protection.
7. Choose a Better WordPress Theme
WordPress themes control the appearance of your eCommerce store. However, not all of them are optimized for performance and often add too much clutter which makes your website slower.
When choosing a WordPress theme for an eCommerce store, you need to find the balance between functionality and speed. Theme features like sliders, carousels, web fonts and icon fonts can slow down your website.
We recommend going for a simple theme and then use plugins to add the features you need. This gives you better control over both the performance and appearance of your online store.
One of the most often asked questions by WordPress beginners is that how many plugins they can use on their store without affecting performance?
The answer is as many as you like.
The total number of plugins does not affect the performance of your online store. It’s the quality of code that does.
A single poorly coded WordPress plugin may load too many scripts or stylesheets that could affect page load speed.
On the other hand, a well coded plugin would use standard best practices to minimize the performance impact. We recommend testing your plugins for performance impact before and after installing them.
We also maintain a list of must have WooCommerce plugins where we hand-picked essential WooCommerce plugins used by most online stores.
For example, the SeedProd drag & drop landing page builder helps you build blazing fast eCommerce landing pages without writing any code.
For more on this topic, see our guide on how to choose the best WordPress plugins. It has a step by step process on how to evaluate WordPress plugins and picking the right one for your online store.
9. Reduce External HTTP Requests
A typical eCommerce page contains several components. For instance images, CSS and JavaScript files, video embeds, and more.
Each such component is separately loaded by users’ browsers by making an HTTP request to your server. More HTTP requests mean longer page load times.
Your server may also be fetching things from third-party tools and services like Google Analytics, social media retargeting, and other services. These are called external HTTP requests. These can take even longer to finish on a typical web page load.
It is ok to have these scripts on your WordPress website, but if they are affecting your website’s performance, then you need to consider reducing them.
You can view external HTTP requests by visiting your website and opening the Inspect tool in your browser. From here, switch to the Sources » Page tab to view all external HTTP requests.
10. Reduce Database Requests
WordPress and WooCommerce use database to store a lot of content and settings. Your WordPress theme and plugins also make database queries to fetch and display that information on screen.
Database queries are extremely fast, and your website can run hundreds of those in mere milliseconds. However, if your website is handling a traffic spike, then these queries can slow down your page load time.
You can check the database calls by using a plugin like Query Monitor in WordPress. Upon activation, the plugin will add the query monitor menu into your WordPress admin bar.
However, minimizing these requests may not be possible for beginner-level users. For instance, you may need to modify your WordPress theme to reduce database calls.
If you are comfortable editing your WordPress theme files or debug code, then you can look for database calls that can be avoided.
Other users, can try finding a better WordPress theme and alternate plugins to reduce database calls if needed.
11. Optimize WordPress Database
Over a period of time, your WordPress database may get bloated with information that you may not need anymore.
This clutter can potentially slow down database queries, backup processes, and overall WordPress performance. From time to time, it’s important to optimize your WordPress database to declutter unnecessary information.
Simply install and activate the WP Sweep plugin. Upon activation, simply go to Tools » Sweep to clean up your WordPress database.
Making changes to a live eCommerce store can cause issues. For instance, a customer may loose their order, or your site may go down during a sale event.
A staging site helps you easily try out performance optimization tips, new plugins, or a theme without affecting your live store.
Basically, a staging site is a clone of your live website that is used for testing changes before making them live.
Many popular WordPress hosting companies offer 1-click staging site set up. Once set up, you can try your changes and track your page load speed and performance.
Once you are ready to implement those changes, you can simply deploy staging site to the live version.
Emails play a very important role on an eCommerce store. They are used to deliver order confirmations, invoices, password reset emails, sales and marketing messages, and more.
However, many beginners don’t realize this and use their hosting provider’s limited email functionality for eCommerce emails.
Most hosting companies don’t support the default WordPress mail function. Some even disable it to prevent spam and abuse.
This is why you need to use a dedicated SMTP email service provider along with the WP Mail SMTP plugin. These companies specialize in sending mass emails and ensure higher deliverability, which means your emails don’t end up in the spam folder.
It is easy to set up and works with WooCommerce and all top WordPress contact form plugins. Plus, they offer a 30-day free trial with up to 50,000 emails.
If you want to look at others, then do check out Sendinblue or Mailgun.
14. Use Better Conversion Rate Optimization Tools
When it comes to eCommerce website, conversion rate optimization (CRO) is important for increasing sales.
A typical online store has many dynamic elements to increase conversions such as free shipping bar on homepage, black friday sale countdown timer in website header, exit-intent popup on checkout pages, or even spin a wheel gamification on mobile site to reduce abandonment.
Often store owners and retailers use a combination of tools and plugins to add these dynamic elements. The challenge is that not all of them are properly optimized for speed.
This is why it’s important to choose conversion optimization tools that offer a suite of features in one platform, so you’re not loading multiple external scripts.
Below is a list of popular conversion optimization tools that we use on our eCommerce websites:
OptinMonster – it’s the most powerful conversion optimization toolkit that lets you create personalized popups, gamification campaigns, floating bars, and more.
TrustPulse – it’s the best social proof software in the market that’s optimized for speed. You can use it to show real-time user activity without slowing down your site.
When it comes to analytics and A/B testing tools, we recommend only using what’s absolutely needed.
For example, if you’re launching a new landing page or website design, it’s important to run heatmap analytics. However after a short period of analysis, we recommend disabling heatmaps so it doesn’t slow down your website speed.
Similarly for A/B testing tools, you don’t need to run those scripts on every page of your website. You can selectively load A/B testing scripts on specific pages, and when you’re done with the test, don’t forget to remove the script.
We hope this article helped you speed up your eCommerce website. You may also want to see our WordPress security handbook or check out our WooCommerce SEO guide to get free traffic from search engines to your online store.
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 learn how to add popular products on your WooCommerce product pages?
Showing popular products on your online store pages is a proven way to boost sales. This is why Amazon, Walmart, and all other big stores have a best-seller widget.
In this article, we’ll show you how to display popular products on your WooCommerce product pages.
Why Should You Display Popular Products in WooCommerce?
Displaying your popular WooCommerce products is an easy way to increase sales on your online store.
These products are already proven to convert, so by getting more eyeballs on these products you’ll easily make more sales.
You can even create a separate popular WooCommerce products page, just like how Amazon has their own bestseller charts.
With that said, let’s take a look at how you can add popular products to your WooCommerce product pages.
How to Find What WooCommerce Products Are Popular
First thing you need to do is find out what products are popular and selling well. With a WordPress plugin, you can see all of your WooCommerce analytics data and which products are the most popular.
After you’ve integrated WooCommerce with MonsterInsights, you can see your most popular products by navigating to Insights » Reports and then click on the eCommerce tab.
Here you can see which products are bringing you the most revenue, how many units you’ve sold, and overall stats about your store’s performance.
Another great feature of MonsterInsights is you can simply add your popular products to the end of your blog posts to boost sales.
To do this navigate to Insights » Popular Posts and then click the ‘Popular Products’ menu option.
On this screen you can customize how your popular products will display.
You have control over the design, the layout option, how many products are featured, and more.
Once you’ve made changes make sure to click ‘Save Changes’ at the top of the screen, and your popular products will automatically display at the end of your posts.
Now, we’ll show you two of the most popular ways to display popular WooCommerce products, beyond simply adding them to your blog posts.
Use the quick links below to choose how you want to add popular products to WooCommerce.
With this plugin, you can simply add popular products to your WooCommerce product pages and create landing pages for your products to improve your conversions.
It has a handful of WooCommerce blocks that let you easily create and customize your product pages.
First thing you need to do is install the SeedProd plugin. For more details, see our step by step guide on how to install a plugin in WordPress.
Note: there is a free version of SeedProd that you can use, but we’ll be using the Pro version since it has more features.
Upon activation, you need to go to SeedProd » Settings and enter your license key. This information is under your account on the SeedProd website.
Once you’ve done that, navigate to SeedProd » Templates.
There are hundreds of pre-made page templates you can use, or you can select the ‘eCommerce Thank You Page’ template that we’re using for this tutorial.
Once you’ve found the template you want to use, hover over it and click the ‘Checkmark’ icon.
You need to give your page a name, then click the ‘Save and Start Editing the Page’ button.
After that, you’ll be taken to the page editor screen. Every element of the page can be completely customized with the drag and drop builder.
On the left-hand menu, you’ll see a block section labeled ‘WooCommerce’.
Select the ‘Products Grid’ option and drag it over to your page.
Note: you’ll see a ‘Best Selling Products’ option you can use, however, we’re going to create a custom list of products using our MonsterInsights data.
After that, click the ‘Gear’ icon to bring up the ‘Block Settings’ menu.
Next, under the ‘Query’ category, turn the ‘Select By SKU’ toggle on.
Then, select the SKUs that match your popular products.
To select multiple products that aren’t listed together, hold the ‘Command’ key on Mac, or hold the ‘CTRL’ key on PC.
Once you’ve finished adding your popular products, make sure you click ‘Save’ to save your changes. To publish this page live, click the arrow next to ‘Save’ and select ‘Publish’.
You’ve now added your most popular products to a unique popular products page.
With SeedProd, you can make nearly endless customizations to this page to improve the conversions.
You can also add this page to your WordPress navigation menu to encourage your visitors to browse your popular products.
Method 2: Using WooCommerce Shortcodes to Add Popular Products to Product Pages
WooCommerce has built-in shortcodes you can use to customize your product pages and other areas of your online store.
These shortcodes make it easy to display your popular products on your existing WooCommerce product pages.
To do this navigate to Products » All Products, then open up the product you want to customize.
In the product editor screen, you’re going to add the following shortcode. For more details, see our beginner’s guide on how to add a shortcode in WordPress.
You can use the following MonsterInsights shortcode to automatically display your popular products:
[monsterinsights_popular_posts_products]
MonsterInsights will automatically update the list as popular products change.
Alternatively, you can manually select which products to show using a built-in WooCommerce shortcode:
The shortcode above will create a row of three products. You can increase the ‘product limit’ and ‘columns’ to list more popular products on your page.
The ‘skus’ refer to the product SKUs you’ll find on your WooCommerce products page.
Make sure you replace the SKUS in the shortcode above with your own most popular products.
You can find your product SKUs by navigating back to Products » All Products.
Once you’re done editing your product page click ‘Update’.
Now your visitors will see your regular product listing and your most popular products highlighted below.
We hope this article helped you learn how to display popular products on WooCommerce product pages. You may also want to see our list of the best WooCommerce themes and our expert picks of the best WooCommerce plugins for your store.
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 see old versions of any WordPress site?
Seeing an old version of a WordPress site is not only fun, but it can provide you with design inspiration and give you access to content and media that are no longer available online.
In this article, we’ll show you how you can simply see older versions of any WordPress website.
Why See Old Versions of WordPress Sites?
The internet moves at hyperspeed. Beyond strolling through memory lane, there are many good reasons to view an older version of a WordPress website.
Most website elements will change over time. Websites go through redesigns, content gets deleted, and sometimes entire sites will go offline.
Being able to lookup an older version of a website can be very useful in a lot of situations.
You need to retrieve older content from a website
You want to recreate a resource that’s no longer online
You need screenshots for a before and after website redesign
You’re looking for design inspiration from old websites
With that said, let’s take a look at how to see older versions of any website.
How to See Old Versions of Any Website (3 Tools)
There are a few different online tools that create archives of websites. These tools take snapshots at different points in time and archive those website pages.
It works similar to your own WordPress backups except these are accessible to the entire internet.
Usually, these tools do archives by popularity and traffic. Some sites will have thousands of copies stored over time, while others might be impossible to find.
That being said, here are the 3 different tools you can use to find old versions of any website on the internet.
Oldweb.today is a unique tool that lets you browse old versions of websites using old web browsers that were around during that time.
This gives you a similar experience to what it was like using certain websites back in the day.
This tool pulls copies of websites from third-party archives like the Internet Archive and national digital libraries from around the globe.
Keep in mind, this tool will take some time to load older websites. It emulates old school browsers like Internet Explorer and Netscape navigator, but it has to find and load the websites first.
To use this tool, navigate to the oldweb.today website. Then, select a ‘Browser’ from the drop-down list and enter the URL of the website.
Make sure the ‘Browse Archives At’ radio box is checked and enter the date.
Once you click enter, the tool will automatically start generating results.
Then, after it has loaded, you’ll be able to view and navigate the WordPress blog as if it was frozen in time.
You can navigate around, click links, and even copy the text.
The Library of Congress has a massive digital collection of newspapers, books, audio recordings, and websites.
They also have a website archive search tool that operates similar to the Wayback Machine mentioned above. However, the results will be a bit different than the other two tools.
If you can’t find an old version of the website before, then give this tool a try.
To use this tool, navigate to the Library of Congress Web Archives. After that, enter the URL for the website and click the search icon.
The results page is similar to the Wayback Machine as well.
First, you will select the year from the top menu.
Next, select the date and click the time for the available snapshot.
This tool typically only gives you a single time to choose from.
When you click the date, it’ll bring up the archived website.
You can also right click to open the page in a new tab.
Hopefully, one of these three tools above has helped you find the old website you were looking for.
If you want to recreate an older page on any site, the best tool for the job is SeedProd. It’s the best drag and drop page builder for WordPress that lets you easily create any kind of website without editing any code.
We hoped this article helped you learn how to see old versions of any WordPress site. You may also want to see our guide on how to create an email newsletter to grow your traffic, and our comparison of the best WordPress membership plugins to create & sell online courses.
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.
Recently, a reader asked us if there is a difference between coming soon mode and maintenance mode?
The answer is: Yes. They are both used for different purposes and search engines treat coming soon mode differently from maintenance mode.
In this article, we’ll explain the difference between coming soon vs maintenance mode, so you can choose the best option for your needs.
What is Coming Soon Mode vs. Maintenance Mode, and Why Does It Matter?
Coming soon mode is used when your website has not yet been launched. Maintenance mode is used when your website is temporarily offline for maintenance.
It’s easy to get these 2 modes confused. Several WordPress plugins such as SeedProd’s Coming Soon and Maintenance Mode Plugin let you put your site into either coming soon mode or maintenance mode. You may not be sure about the difference.
It’s extremely important to use each mode correctly. Because if you choose the wrong option, then it can harm your WordPress site’s SEO rankings.
When to Use a Coming Soon Page
You should use a coming soon page after you have registered a domain name, but before you have finished creating your website.
A coming soon page lets you gather interest on your site before you launch it. Plus, it lets Google start sending you visitors.
It’s best practice to have an email newsletter form on your coming soon page. This allows people to sign up and get an email when your site goes live.
SeedProd lets you create great-looking coming soon pages with just a few clicks. Let’s take a look at how to create a coming soon page like this:
How to Create a Coming Soon Page
To create a coming soon page, you first need to install and activate the SeedProd plugin. For more details, see our step by step guide on how to install a WordPress plugin.
We’re using the Pro version for our tutorial, but you can also use the free version of SeedProd.
Upon activation, you should be prompted for your license key. You will find this in your account area on the SeedProd website. Simply enter it on your WordPress site and click the ‘Check License’ button:
After that, go to the Settings » Coming Soon page and click the ‘Edit Coming Soon/Maintenance Page’ button:
Then, simply pick a template for your coming soon page. There are over 50 different coming soon templates ones to choose from:
You will now be taken into SeedProd’s coming soon page editor. Go ahead and change anything you want using the tabs in the left-hand sidebar.
For instance, you can click on the Countdown tab to enable a timer. You will need to specify an end date for the timer:
If you would like to integrate your coming soon form with your email marketing service, then simply click on the ‘Email Form Settings’ tab. Next, select your email marketing service from the ‘Save Subscribers To’ dropdown:
You then need to follow the on-screen instructions to connect your coming soon page with your email list.
Go ahead and make any other changes you want. Once you’re happy with your coming soon page, click the ‘Save’ button at the top of the screen. Next, click the ‘Back to Settings’ link:
Now, simply click the ‘Enable Coming Soon Mode’ button then the ‘Save All Changes’ button.
Your coming soon page is now live. To view it, log out of your website and visit any page:
When to Use Maintenance Mode
You should use maintenance mode if you need to briefly take your site offline for changes or updates.
For instance, you might want to use maintenance mode while changing WordPress themes. This ensures that your site still functions correctly and looks good with the new theme.
Another good time to use maintenance mode is if you’re adding an online store to your site. You can leave your website online but put your store into maintenance mode.
Maintenance mode lets search engines know that your site is currently down. It does this by returning the header code 503. That way, your site’s SEO won’t be affected by the downtime.
It’s good practice to let users know that your site will be back soon, too. You can do this by putting a message on your maintenance page. You might want to add an email form so they can get an email alert once your site is back up.
Tip: When you update plugins, themes, or core WordPress, your site will automatically go into maintenance mode for a few seconds. If your site gets stuck in this mode, we have instructions on fixing the WordPress maintenance mode error.
How to Put Your Site in Maintenance Mode
To put your site in maintenance mode, first install and activate the SeedProd plugin.
Next, follow the instructions above for creating a coming soon page above to create your maintenance mode page.
When you are ready to put your site into maintenance mode, simply go to the Settings » Coming Soon Pro page in your WordPress admin. Then, select the ‘Enable Maintenance Mode’ option and click the ‘Save All Changes’ button.
Remember, maintenance mode should only be used when your site is down for maintenance. If you have not yet launched your site, use coming soon mode instead.
Do you want to add an alert bar to your WordPress site?
An alert bar or notification bar is a great way to let visitors know about important updates, special offers, new product launches, and more.
In this article, we will show you how to create an alert bar in WordPress with 3 easy solutions.
Why Create an Alert Bar in WordPress?
An alert bar is a great way to let your visitors know about something important on your website. That could be an ongoing sales event, an update to your opening times, or changes to your services.
Using an alert bar is better than just putting an announcement on your homepage. Your alert bar can appear prominently right at the top of every page across your entire site.
It’s easy to create an alert bar in WordPress. We will look at methods using the best notification bar plugins and a manual method using HTML and CSS code. Simply click the links below to jump straight to each option:
Method 1: Creating an Alert Bar Using OptinMonster
OptinMonster is the best conversion optimization and lead generation software on the market. It helps you convert more website visitors into subscribers and customers.
OptinMonster offers a drag-and-drop campaign builder. It comes with beautiful lightbox popups, welcome mats, countdown timers, and other dynamic overlays that help you increase subscribers and sales on your website.
You can also use OptinMonster to make an alert bar for your website. Their pre-built templates make it really easy to create an alert bar that looks great within minutes.
First, you need to visit the OptinMonster website and sign up for an account. You will need at least the Basic plan because it includes the Floating Bar campaign type.
This plugin lets you connect your WordPress site to the OptinMonster software.
Upon activation, you will see the welcome screen and the setup wizard. Go ahead and click the ‘Connect Your Existing Account’ button.
Next, a new window will open where you will need to connect your WordPress site to OptinMonster.
Simply click the ‘Connect to WordPress’ button to move ahead.
You can now follow the on-screen prompts to connect your OptinMonster account.
Then, simply go to OptinMonster » Campaigns in your WordPress dashboard. Go ahead and click the ‘Create Your First Campaign’ button.
This will open the OptinMonster campaign builder.
From here, you need to select the ‘Floating Bar’ as your Campaign Type to create an alert bar.
Next, you will see a choice of campaign templates. Pick a template that you want to use.
You just need to bring your mouse over it and click the ‘Use Template’ button to select it. We are going to use the Coupon Code Promo template for our alert bar.
Next, you will be asked to give your template a name. Once you have named your campaign, just click the ‘Start Building’ button.
Now, you will see the campaign editor. This is where you can design your alert bar.
OptinMonster offers different blocks that you can simply drag and drop onto the template. For instance, you can add an image, text, button, and more to your alert bar.
You will see that your alert bar appears at the bottom of your screen by default.
To move it to the top of the screen, you need to click ‘Floating Bar Settings’ on the left-hand side. Next, just click the slider to move the floating bar to the top of the page.
To change the text on the floating bar, simply click on the area you want to change and type in any text you want.
You can also change the font, the size and color of the text, and more.
To change the countdown settings, simply select the timer.
Then go ahead and enter your desired end date and time. OptinMonster also lets you choose the countdown type. You can select the ‘Static’ type if you’d like to show a standard timer with your specified end date and time.
On the other hand, there is a ‘Dynamic’ countdown type. The timer will work based on each user’s behavior on your site. The countdown is set separately for each visitor to your website.
Once you are happy with the design of your alert bar, don’t forget to click the ‘Save’ button at the top of your screen.
Next, you need to go to the ‘Display Rules’ tab to select when and where your alert bar will display on your site. The default rule is for your alert bar to display after the visitor has been on the page for 5 seconds.
We are going to change this to 0 seconds so that the alert bar appears instantly. To do that, just change the ‘sec’ value to 0.
Besides that, you can also select where the alert bar will appear. You can use the default setting, which is the ‘current URL path is any page’. This way, your alert bar will appear on all the pages of your WordPress website.
Then, click the ‘Next Step’ button to change the Action settings. You can leave the ‘show the campaign view’ settings as Optin and select whether you’d like to play a sound effect when the alert bar appears.
After you have made your changes, go ahead and click the ‘Next Step’ button once more.
Here, you will see a summary of your display rules. You can make final edits and changes to your alert bar campaign.
Once you are happy, simply click the ‘Save’ button at the top of the screen.
After that, you can go to the Publish tab at the top and change the Publish Status to ‘Publish’. Once that’s done, you will need to click the ‘Save’ button and close the campaign builder.
Next, you will see the Campaign Output Settings.
The final step is to activate the campaign on your website itself. Simply change the Status from ‘Pending’ to ‘Published’.
Don’t forget to click the ‘Save Changes’ button when you are done.
Now, simply visit any page on your website, and you will see your campaign in action.
Method 2: Creating an Alert Bar Using Thrive Leads
Another way you can add alert bars to your WordPress website is by using Thrive Leads. It is part of the Thrive Themes suite and helps you generate leads through alert bars, lightboxes, slide-in popups, and more.
First, you will need to visit the Thrive Themes website and sign up for an account. Simply click the ‘Start Now’ button to get started.
Next, you will need to install and activate the Thrive Product Manager plugin on your website. For more details, please see our guide on how to install a WordPress plugin.
You can find the Thrive Product Manager plugin in your account area.
Once you have installed the plugin, simply go to the Product Manager page from your WordPress admin area.
From here, go ahead and click the ‘Log into my account’ button.
After logging in to your account, you will see different plugins and tools offered by Thrive Themes.
Simply select the Thrive Leads plugin and then click the ‘Install selected products’ button at the bottom.
When Thrive Leads is ready to use, you will see a success message.
You can then click the ‘Go to the Thrive Themes Dashboard’ button.
Next, you will need to go to Thrive Dashboard » Thrive Leads from the WordPress admin panel.
Next to the Lead Groups heading, simply click the ‘Add New’ button.
After that, a popup window will now open.
You can enter a name for your new lead group and click the ‘Add Lead Group’ button.
Next, you will need to create a new opt-in form.
Go ahead and click the ‘Add New Type of Opt-in Form’ button.
After that, Thrive Leads will ask you to select a form type.
You can select the ‘Ribbon’ type to add an alert bar to your website.
After adding the Ribbon opt-in form type, you will now need to add a form.
Simply click the ‘Add a form’ option under Lead Groups.
On the next screen, you can choose from any of your existing forms.
Since this is your first time making a form, go ahead and click the ‘Create Form’ button.
Now, you will see a popup window appear on your screen.
You can enter a name for your form and click the ‘Create Form’ button.
Your form will be added to the Ribbon lead group.
To edit the design of the form, just click the pencil icon.
Next, Thrive Leads will show multiple templates to choose from.
Simply select a template and click the ‘Choose Template’ button at the bottom.
This will launch the visual builder with a live preview, where you can customize your alert bar.
For instance, you can select the text in the template and change it according to your needs. Or click on the image in the alert bar and change it.
Once you are done editing, click the ‘Save Work’ button at the bottom.
You can now close the visual editor and head back to the form settings. Here, you will see options for settings the alert bar trigger, display frequency, and position.
By default, the alert bar will appear at the top when a page loads. However, you can change these settings.
For instance, if you click the Trigger option, you’ll see more options, like showing the alert bar after a certain time, when a user scrolls down a certain amount, or when a user reaches the bottom of the page.
Besides that, you can also change the display frequency. The alert bar will appear all the time by default to all the users.
However, you can edit this and display your alert bar to the same visitor after a certain number of days.
Next, you can head back to the Thrive Leads page from your WordPress dashboard.
After that, simply click the cog icon to open the Display Settings.
From here, you can choose which posts and pages the alert bar will appear on.
For instance, you can show it only on the front page or choose all posts and pages. There is also an option to exclude some pages and posts from showing your alert message.
When you are done, simply click the ‘Save & Close’ button.
The last step is to click the toggles to display your alert bar on desktop and mobile devices.
Once that’s done, your alert bar is now ready to collect user email addresses and build your email list.
You can visit your website to see it in action.
Method 3: Manually Create an Alert Bar Using Custom HTML/CSS
What if you don’t want to use OptinMonster or Thrive Leads? In this method, we will show you how to create a notification bar using HTML and CSS code.
Note: We don’t recommend this method for beginners. If you are new to WordPress or don’t feel confident adding code to your site, then we suggest using either of the methods above instead.
First, you will need to copy the following custom CSS code for the alert bar:
An easy way to add CSS code to your website is by using WPCode. It is the best code snippet plugin for WordPress that helps you add custom code to your website.
Note:WPCode is one of WPBeginner’s own plugins. We created it to make it really easy to add scripts, HTML code, and more to your website pages. It comes with features like a built-in code snippets library, conditional logic, conversion pixels, and more.
Upon activation, you need to head to Code Snippets » + Add Snippet from the WordPress dashboard and select the ‘Add Your Custom Code (New Snippet)’ option.
After that, enter a title for your snippet at the top and paste the CSS code into the Code Preview area.
You will also need to change the Code Type to the ‘CSS Snippet’ option.
Next, you can scroll down to the Insertion section. This is where you can choose where the code will run.
Since we want the alert bar to appear across the entire website, you can use the default ‘Auto Insert’ method. You can also keep the ‘Run Everywhere’ setting.
Once that’s done, you can click the ‘Save Snippet’ button at the top.
You will also need to click the toggle on to activate the code.
After that, go to Code Snippets » Headers & Footer in your WordPress admin dashboard.
Just copy and paste the following line of HTML code into the ‘Header’ box:
<div class="alertbar">We are currently closed due to Covid-10.</div>
Here’s how that code should look in the ‘Header’ box in WPCode:
You can change the alert text to anything else you like. Don’t forget to click the ‘Save Changes’ button at the top of the page once you are done.
Now, you can visit your WordPress blog to see the alert bar. It should appear at the top of every page like this:
Tip: In a few WordPress themes, your alert bar may overlap your menu. You can alter the height of the bar to 40px or 30px to avoid this. You will also need to reduce the line height accordingly so that your text stays centered vertically in the bar.
Bonus: Add Custom Alert Messages to WordPress Pages
If you want to add custom alert messages to different parts of your website, such as product pages, checkout pages, and shop pages, then you can use SeedProd. It is the best website builder and landing page builder for WordPress.
The plugin offers a drag-and-drop builder to create a custom theme and website pages without editing code. It also offers an Alert block that you can place anywhere on your site.
This Alert block can warn customers that your stock is running low, particular items are on sale, or other time-sensitive warnings.
You can simply add the Alert block to your page and then add a title and description. The plugin also lets you add dynamic content, which allows you to insert dates and other query parameters.
There are also more customization options for the Alert block. For instance, you can change its alignment, adjust the font size, and edit the icon.
Are you looking for a WordPress theme for your app?
You can use WordPress app themes to promote your app or software. These themes showcase your product screenshots, features, reviews, and other useful information.
In this article, we will share some of the best WordPress themes for apps that you can use to grow your business.
Building a WordPress Website for Apps and Software
WordPress is the most popular website builder in the world. Many top brands use WordPress for their websites, including banks, enterprise businesses, and more.
There are two types of WordPress. They are WordPress.com, which is a hosted solution, and WordPress.org, which is a self-hosted platform.
For a software or app website, you will need to use self-hosted WordPress.org. It offers the most flexibility and features you need to promote your business.
Before you begin, you will also need to purchase a domain name and web hosting. A domain name is your site’s address on the web, like wpbeginner.com or google.com. Web hosting is the storage for all your website files.
We recommend using Bluehost. It’s the most popular WordPress hosting company and an official WordPress hosting partner.
For WPBeginner users, Bluehost offers a free domain name, a free SSL certificate (for your website security), and a huge discount on web hosting.
Astra is a powerful WordPress multipurpose theme for all kinds of websites. It comes with a 1-click demo content importer and a few dozen demo websites to get you started quickly.
It has multiple blog page layouts, global design options, header and footer options, and dedicated sidebars for pages. The theme is fast, lightweight, and easy to set up, even for beginners.
SeedProd is the best WordPress theme builder on the market. It isn’t a regular WordPress theme, but SeedProd makes it easier for anyone to design a custom website from scratch without writing code.
The best part is that SeedProd comes with dozens of ready-made theme layouts. You can import a pre-built theme and customize it with the powerful drag and drop builder to launch your site.
It includes WordPress themes for apps, landing pages, and more. The theme templates are built specifically for beginners with beautiful designs and complete content.
Ultra is a modern WordPress theme for any type of website. It has a built-in professional template for your app or software.
It comes with builder addons, custom page templates, pre-designed layouts, and more. Other notable features include section scrolling, a mega menu, archive layouts, image filters, and support for WooCommerce.
Divi is a popular WordPress theme and an ultimate page builder plugin. It comes with hundreds of ready-made website layouts for different business niches.
It has a highly flexible visual page builder to customize your website from the front end. The Divi theme offers multiple design elements, visual effects, fonts and text styling, and custom backgrounds.
Infinity Pro is a professional WordPress theme designed specifically for mobile apps and software. It’s built on top of the Genesis Theme framework, making it powerful and robust.
The theme has a fullscreen layout with an image slider, a call-to-action button, a navigation menu, and a custom logo. It comes with layout options and multiple custom page templates.
OceanWP is a free WordPress multipurpose theme. It comes with several demo websites and a 1-click content importer to launch your website right away.
The theme offers fast page load time, built-in SEO optimization, RTL language support, and more. It’s also fully compatible with WooCommerce to sell your apps.
Neve is a stylish WordPress multipurpose theme that you can use to create any website. It comes with a few demo sites, including one-page and multi-page templates.
It features header and footer layouts to create an engaging user experience. The theme integrates with all popular WordPress page builders for customization. It’s also eCommerce ready to start an online store easily.
Struct is a fantastic WordPress theme designed specifically for mobile apps, SaaS startups, and software websites. It lets you display screenshots, testimonials, team members, portfolios, and app features on the homepage.
Inside, you will also find backgrounds, color schemes, typography options, and more. Struct has WooCommerce integration to sell your mobile apps online.
Hestia Pro is a one-page WordPress theme for any kind of website. It comes with a sleek and modern design to let you build your app or software website easily.
It works great with all popular drag and drop page builder plugins. Hestia is easy to customize using the WordPress live customizer.
iTheme2 is a stunning WordPress apps theme. It comes with a fully customizable featured content slider on the homepage to showcase your apps and software.
It includes website templates, a header menu, a footer menu, custom footer text, and more. It also has a social media widget to add social icons in the header of your website.
Bramble is a beautiful WordPress multipurpose theme. It ships with a page builder that lets you customize your website and design custom landing pages of your own.
The theme comes with built-in homepage layouts to set up your website. It also includes an image slider plugin to display your apps beautifully.
Nozama is a classic WordPress eCommerce theme built for creating Amazon-style websites for mobile apps and software. It lets you display your apps, testimonials, and other products on the homepage.
You can use this theme to share professional screenshots of your app and maximize your sales. Besides professional shop page layouts, Nozama has unlimited color schemes, custom backgrounds, Google Fonts, and parallax effects.
Specialty is an excellent WordPress theme designed specifically for job board apps and software. It comes with flexible search functionality for instant search and complex filters.
The theme includes hundreds of customizer settings for color, typography, and layout. It supports drag and drop page builders to create custom landing pages easily.
14. Altitude Pro
Altitude Pro is a black-and-white WordPress app theme. It has a fullscreen layout with a custom background image, welcome text, and call-to-action buttons.
The theme has multiple homepage widget areas and layout options. Altitude Pro is eCommerce friendly and helps you sell your apps online.
Inspiro is a WordPress multipurpose theme built for any kind of website. It features interactive homepage elements to engage your users from the first click on your site.
The theme options include parallax scrolling, video backgrounds, 1-page and multi-page templates, page builder compatibility, and more. It’s easy to set up, even for absolute beginners.
Multi Mobile App is a free WordPress theme for apps and software. It lets you showcase your apps professionally in different categories.
If you are looking for a free multipurpose apps theme, then the Multi Mobile App theme is an ideal solution. It’s translation ready and offers powerful customization options.
Cousteau Pro is a WordPress theme for travel apps. It comes with video and image slider support on the homepage to create a powerful first impression on your visitors.
Inside, you will find a search and filtering system. The theme has a fullscreen background layout that looks beautiful and professional.
Venture is a WordPress portfolio theme to display and sell your apps. It has a dynamic homepage builder and custom widgets to set up your website quickly.
You can also use the built-in visual customizer for colors, fonts, and other settings. It includes a featured content slider to showcase your most important content on the front.
Mobile App is a free WordPress multipurpose theme designed specifically for apps and software websites. It uses bright colors that make your website highly attractive.
The theme features a fullscreen image slider, a products section, an about section, and more. It’s easy to set up using the WordPress live customizer.
Pinboard is a modern WordPress multipurpose theme. It has a Pinterest-like layout to create an app or software review website.
It supports WordPress multisite network and lets your users sign up to post reviews. The theme is fully responsive and adjusts to any screen size beautifully.
Listable is an excellent WordPress directory theme built specifically for small business websites. It has a fullscreen layout and parallax homepage sections.
The theme lets you add all your apps and allow users to submit apps from the frontend. Listable also integrates with popular WordPress page builders for easy customization.
FAQs About WordPress Themes for Apps and Software
If you are still unsure which theme is best for you, here are some frequently asked questions about WordPress themes for apps and software that can help you select the right theme for your website.
1. Which is the best WordPress theme for apps and software websites?
With so many options, picking the right theme to promote your apps and software business can confuse beginners.
We recommend Astra, SeedProd, Ultra, and Divi, as they come with multiple templates for apps, software, and technology websites.
2. Why is SeedProd included in the themes for apps and software?
SeedProd is included in the themes for apps and software because it’s a powerful theme builder for beginners. It lets you drag and drop features to design a custom theme for your apps and software website without writing code.
Moreover, SeedProd comes with ready-made coming soon and maintenance mode landing pages. You can use these pages to engage users while your website is in the development process.
SeedProd also includes hundreds of built-in theme templates that can give you a head start. You can import a template and customize it to launch your website right away.
Do you want to add a notification bar on your website? A floating bar or “hello bar” can be an effective and non-intrusive way to alert users about a sale or coupon.
However, it could also get annoying if it’s not setup properly. For instance, a notification bar that takes half the screen on mobile is not a good user experience.
In this article, we’ll help you pick the best WordPress notification bar plugins to boost traffic, get more subscribers, and increase sales.
What to look for in a WordPress Notification Bar Plugin?
There are plenty of WordPress notification bar plugins available in the market, but not all of them have the right set features you may need for getting the maximum results.
For example, some notification bar plugins are too simple and does not come with proper settings for allowing users to hide the notification. Others may not have the ability to add dynamic elements such as call to action buttons or countdown timers to boost urgency.
Basically, you need to choose a floating bar plugin that aligns with your goal: increase traffic, show announcement alert, grow your email list, increase sales conversion, etc.
Here are some of the most important factors you need to look for when choosing a notification bar plugin:
Targeting and Cookie Settings – Your notification plugin should have targeting option that allows you to customize the message for different sections, and also remember what user has seen in the past to improve user experience.
Dynamic Elements – A good alert notification plugin allows you to add dynamic elements such as countdown timers, multiple call-to-action buttons, animation effects, etc.
Newsletter Integrations – If your goal is to grow your email newsletter, then you need to make sure that the sticky bar plugin integrates with popular email marketing services.
Support options – Lastly, you need to make sure that there are support options available. Good support can save you a lot of money in the long run.
With that said, let’s take a look at our comparison of the best WordPress notification bar plugins.
OptinMonster is the best conversation optimization software that comes with several marketing tools to help you turn website visitors into subscribers and customers.
It also includes a notification bar feature with dozens of beautiful templates. Their drag and drop builder allows you to customize the design or even create completely custom templates to match your brand. You can include things like a countdown timer, too.
OptinMonster is great for notification bars that encourage action. It has advanced targeting features that allow you to personalize the message based on your goals and users’ past behavior.
You can also use OptinMonster’s notification bars to show an alert or message. If you’ve had to suddenly change your business hours, for instance, you can alert your website visitors to this.
Other use-cases include: creating a free shipping bar notice for WooCommerce, add a newsletter opt-in form, create a discount alert bar, redirect traffic to a landing page, and more.
Aside from just notification bars, you can use OptinMonster to create all sorts of different popups and alerts including spin to win gamified opt-in forms, exit-intent popups, fullscreen welcome mats, and more:
Not to mention, there is no other solution that offers more personalization and targeting features than OptinMonster. Take a look at some of their targeting rules:
SeedProd is best known for its ‘Coming Soon’ page plugin. However, they also have a floating bar plugin, called Notification Bar Pro.
You can buy Notification Bar Pro as part of the SeedProd bundle.
With SeedProd’s Notification Bar Pro, you can design your notification bar however you want. It shows a live preview of your notification bar as you design it. This makes it easy to tweak it to look however you want.
You don’t have to show your notification bar on every page of your site. Instead, you might choose to show it on just the home page. You could also allow or exclude specific pages.
It’s very quick to build and tweak your notification bar with SeedProd. If you want to go further than the wide range of built-in options, then you can also add custom CSS to style the floating bar.
There’s a limited free version available, too, called WordPress Notification Bar. This doesn’t offer all the features of the full version, but you might like to try it out if you’re just getting started.
TrustPulse is a little different from the plugins we’ve looked at so far. It offers a real-time social proof notifications, letting your users know what’s happening right now on your site.
This can be a great way to take advantage of the FOMO effect while building trust around your brand.
When someone visits your site, TrustPulse will show a small notification bar that lets them know who’s buying your product right now, or who’s bought it recently. This is a powerful form of social proof that is proven to increase conversions.
It works with all top eCommerce platforms including WooCommerce. You can also set up TrustPulse to track other types of interactions. For instance, you could use it to show a notification when someone joins your email list.
TrustPulse is incredibly easy to use out of the box. However, there are plenty of features you can customize if you want to. You can easily change the message, colors, and images used in your notifications, for instance.
It also gives you lots of useful analytics, showing you which pages are delivering the highest conversion rate.
There’s even a free version, which lets you show notifications for up to 500 sessions (visits from users).
WP Notification Bar Pro offers multiple different notification types. You can use it to build your email list, grow your social media following, advertise sales, and more.
This is a great option if you want to show something a bit unusual in your notification bar. For instance, you can use WP Notification Bar Pro to show your latest posts or even posts that are related to the one the user is on.
You can even display a search form or social media buttons in your notification bar.
WP Notification Bar Pro lets you create multiple notification bars. You can set their priority so the most important one always displays on a given page.
You can also split test your bars to see which performs best. You can track your views and clicks, too.
Hello Bar is a well known and popular notification bar plugin for WordPress. It’s easy and straightforward to use. If you’re a complete beginner, it could be a good option.
Like with OptinMonster, you can use Hello Bar to add users to your email lists, as it integrates with popular email marketing services.
As well as notification bars, Hello Bar lets you create other types of popups such as sliders and even popups that take over the whole screen.
There’s a limited free version of Hello Bar available. You’ll need to create an account with Hello Bar in order to use it.
The free version doesn’t give you as much control over your notification bars as the full version. You’ll still be able to make some basic design changes using it, though.
Note: You won’t be able to remove the Hello Bar branding unless you pay for a premium plan at which point OptinMonster is a much better option at the price.
Easy Notification Bar is a simple, free option. You can just install it on your site and get started straight away.
It doesn’t have all the options you’ll get from other plugins, but you can still do basic things like type in your text, choose a font size, add a link, and customize the colors.
Unlike many of the other plugins here, Easy Notification Bar only offers a floating bar. It doesn’t let you create other types of popup too.
If you just want to put an alert on your website, it could be a great option. For instance, if you run a restaurant and want to alert customers to a temporary closure or change in business hours, this plugin might be all you need.
It’s completely free, and there’s no premium version. If you’re on a tight budget after the other costs of building a WordPress site, then this could be a good plugin to start with.
WPFront Notification bar is another simple plugin that lets you create notification bars in WordPress. You can place the bar at the top or bottom of the page.
You can set the bar to automatically close and/or have a close button for your visitors. You can also configure when the bar appears, for example you might set a start and end date for it.
WPFront Notification Bar is completely free and regularly updated. As with Easy Notification Bar, there’s no premium version. One key drawback with this plugin is that you can only create a single notification bar at a time.
Aside from letting you create custom landing pages, Divi also allows you to easily create and add notification alerts in your pages with their easy drag & drop interface.
Although it doesn’t come with the powerful personalization and targeting features like OptinMonster, it is still a suitable solution for basic needs.
Expert Pick: Which is the Best Notification Bar Plugin for WordPress?
In our opinion, OptinMonster is the best WordPress notification bar plugin because of it’s large template selection, easy to use design customizer, advanced personalization / targeting features, and hundreds of integrations with popular email marketing services & CRMs. Not to mention, it also gives you a whole range of other marketing tools like popups, slide-ins, fullscreen welcome mats, gamified spin a wheel opt-in forms, and more.
If you’re looking to display social proof notifications, then TrustPulse is an ideal solution.
We hope this article helped you learn about the best WordPress notification bar plugins. You might also want to take a look at our expert list of the best business phone services and must have WordPress plugins for small business.
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 single post template in WordPress?
Custom single post templates allow you to use different layouts for your individual blog posts. Many WordPress themes come with a few different page templates, and you can also create your own if needed.
In this article, we’ll show you how to easily create custom single post templates in WordPress. We’ll share multiple methods, so you can choose one that works best for your needs.
When Do You Need a Custom Single Post Template?
Sometimes you may want a different look and feel for certain posts on your WordPress website. For instance, you may want to use a different layout for featured articles or stories in a particular category.
This is where you need a custom single post template in WordPress.
By default, WordPress uses the single post template based on the WordPress template hierarchy. All themes come with a single.php template, and this is used by default for all of your single posts.
Some themes may also include additional templates or layout choices that you can use.
It is very much like creating a custom page template. Most WordPress themes also come with page templates that you can use while editing a post or page in WordPress.
Having said that, let’s take a look at how to easily create custom single post templates in WordPress. We’ll show you multiple methods, so you can use the one that works best for you.
Creating Single Post Templates Using the Block Editor
This method does not really create a post template and is limited in flexibility. However, it is the easiest way to save your own single post layouts and then reuse them.
The default WordPress block editor comes with a built-in feature that allows you to save and reuse blocks. One such reusable block is the group block.
The group block allows you to put several blocks and entire post layouts into one group. You can then save this group block and reuse it in your other posts.
Let’s take a look at how to use the group block to save your custom post templates.
First, you need to create a new post in WordPress. After that, simply add a group block to the content area.
Now you can start adding blocks into the group block to create a single post layout for your WordPress blog.
You can add any blocks you want including columns, media and text, cover images, and more.
Once you are satisfied with the layout you have created, you need to take your mouse up and select the group block.
Simply click on the three-dot menu icon and then select the ‘Add to Reusable blocks’ option.
Next, you need to provide a name for the reusable block and then click on the Save button. WordPress will now save your reusable block including all the blocks inside the group block.
You can then edit any existing post on your website or create a new one. On the post edit screen, simply click on the add new block button and look for your saved block under the ‘Reusable’ tab.
Add the block to your post and WordPress will load your entire group block with all the blocks and settings as you saved them.
This method allows you to save your custom layouts. However, it does not allow you to change how your theme handles single posts.
If you would like greater flexibility, then continue reading the next step.
Creating Custom Single Post Templates Using SeedProd
The easiest way to create a custom single post template is by using SeedProd. It’s the best WordPress website builder plugin and can create beautiful website layouts and custom templates without writing any code.
You can use SeedProd’s drag-and-drop builder to create a fully custom WordPress theme, including custom single post templates.
Upon activation, you need to enter your license key. You can find this information under your account on the SeedProd website.
After that, it’s time to create a custom WordPress theme. This is much simpler than it sounds.
Creating a Custom WordPress Theme
First, you need to head over to the SeedProd » Theme Builder page. Here, you’ll use one of SeedProd’s ready-made themes as a starting point. This will replace your existing WordPress theme with a new, custom design.
You can do that by clicking the ‘Themes’ button.
You will be shown a list of professionally designed themes that are designed for different types of websites. For example, there are templates called ‘Modern Business’, ‘Marketing Agency’, and ‘Mortgage Broker Theme’.
Take a look through the options and select one that best matches your needs by clicking the checkmark icon.
Once you have chosen a theme, SeedProd will generate all the theme templates you need, including one for single pages and another for single posts.
Each template comes set up with attractive layouts and placeholder content that’s easy to customize.
SeedProd makes it easy to customize the default ‘Single Post’ template using a drag and drop page builder.
Simply click the ‘Edit Design’ link found under the template. This will open your post template in SeedProd’s visual editor.
SeedProd’s visual editor has a 2 column layout. On the left, you’ll find blocks and sections that you can add to your design. And on the right is a preview of the template where you can see your changes in real-time.
It’s also easy to customize the layout of your post template. Simply click on any block to see its settings in the left column.
For example, if you click on the post title, then you’ll be able to see its settings. Now you can change the alignment, font size, heading level, and more.
Clicking the Advanced tab lets you change font colors, spacing, and other styles.
You can add additional blocks by dragging them from the left column into the preview column. SeedProd uses template tags to pull in dynamic content like post titles, featured images, comments, and more. This lets you add content to the template without having to edit each post individually.
For example, you can add a Posts block at the end of your post content. This will display recent posts that your visitors may wish to read when they finish the current post. This block will be shown automatically on all posts using this template.
Next, you can change the settings of the Posts block to customize the content that is shown.
For example, you can display content from specific categories, use a two-column layout, and change the number of posts that are shown.
Feel free to spend time experimenting with different blocks and exploring their settings.
After creating something you’d like to use as your post template, it is time to save it by clicking the green ‘Save’ button in the top right corner. After that, you can close the SeedProd visual editor by clicking the ‘X’ close icon.
You can customize the rest of your WordPress theme in the same way. But if you need a little help, then refer back to our step-by-step guide on how to create a custom WordPress theme with SeedProd.
When you’re happy with how everything looks, make sure the ‘Enable SeedProd Theme’ switch is toggled to the on position. Your WordPress site will now use your SeedProd theme and custom single post template.
Using Theme Settings to Create Custom Single Post Layouts
Many popular WordPress themes come with built-in settings to customize the appearance of your single post template.
If your theme supports these settings, then you’ll be able to find them on the post edit screen. The options available may change depending on the theme you are using.
For instance, the Astra theme offers customization options when editing a single post. Using these options, you can change sidebars, hide headers, title, menus, and more.
On the other hand, many of the top WordPress themes come with ready-to-use templates that you can use.
If your theme includes single post templates, then you will find them under the ‘Template’ or ‘Post Attributes’ panel while editing a post.
These templates are complete layouts that you can use with no configuration required.
Manually Creating Custom Single Post Templates With Code
This method is a bit advanced as it requires you to edit theme files, copy and paste code, and optionally add custom CSS. If you haven’t done this before, then check out our tutorial on how to copy and paste code in WordPress.
First, you need to open a plain text editor on your computer like Notepad and paste the following code inside it:
<?php
/*
* Template Name: Featured Article
* Template Post Type: post, page, product
*/
get_header(); ?>
This code defines a new template called ‘Featured Article’ and makes it available for post, page, and product post types.
You should save this file as wpb-single-post.php on your desktop. Next, you need to add the template to your WordPress site. To do that, you need to use an FTP client to upload the file to your current theme folder.
Now you can log in to your WordPress admin area and create or edit a post. Scroll down a little on the post edit screen, and you will notice a new ‘Template’ panel or ‘Post Attributes’ meta box with an option to select the template.
You will see your ‘Featured Article’ custom template listed there.
Right now your template is essentially empty so selecting it will simply display a white screen.
Let’s fix this.
The easiest way to do that is by copying the code from your theme’s single.php file and using it as a starting point. You’ll have to open the single.php file and then copy everything after the get_header() line.
Next, you need to paste this code at the end of your wpb-single-post.php file. Now you can save this file and upload it back to your server.
However, this will look exactly the same as your current single post template. You can now start making changes to your custom single post template.
Would you like to use a custom single post template based on categories? For example, you can give posts in the travel category a different layout to posts in the photography category.
You can do that using either the SeedProd Theme Builder or code.
Creating Custom Single Post Templates by Category Using SeedProd
Earlier we covered how to customize the SeedProd Theme Builder’s default single post template. But it doesn’t stop there. With SeedProd you can add as many custom post templates as you like, such as a different layout for every post category.
To add a new single post template, just click the ‘Duplicate’ link under the original post template. A new template called ‘Single Post – Copy’ will be created and added to the top of the theme templates page.
You can customize the new template in the same way you customized the default Single Post template earlier. Simply click the template’s ‘Edit Design’ link and make any changes you like using SeedProd’s visual editor.
When you’ve finished customizing the template, you will need to add some conditions so that SeedProd will know which posts should use this template. In this case, we want it displayed when viewing posts within a single category.
You can do that by clicking the template’s ‘Edit Conditions’ link and a new window will pop up.
Here you can give the template a name and priority. The default Single Post template has a priority of 0, so make sure you give this template a higher priority so it will be displayed on matching categories.
Under ‘Conditions’, select ‘Has Category’ from the second drop down menu, then type the name of the category in the last field. For example, if you only want posts from the photography category to use this layout, then type ‘photography’.
When you’re finished, click the ‘Save’ button and now this template will be used for all posts in the matching category.
This is the easiest way to create multiple custom post templates in WordPress. It doesn’t require any knowledge of code and won’t accidentally mess up any theme files.
Creating Custom Single Post Templates by Category Using Code
This is another method for those who are comfortable adding code to their theme files.
/*
* Define a constant path to our single template folder
*/
define(SINGLE_PATH, TEMPLATEPATH . '/single');
/**
* Filter the single_template with our custom function
*/
add_filter('single_template', 'my_single_template');
/**
* Single template function which will choose our template
*/
function my_single_template($single) {
global $wp_query, $post;
/**
* Checks for single template by category
* Check by category slug and ID
*/
foreach((array)get_the_category() as $cat) :
if(file_exists(SINGLE_PATH . '/single-cat-' . $cat->slug . '.php'))
return SINGLE_PATH . '/single-cat-' . $cat->slug . '.php';
elseif(file_exists(SINGLE_PATH . '/single-cat-' . $cat->term_id . '.php'))
return SINGLE_PATH . '/single-cat-' . $cat->term_id . '.php';
endforeach;
}
This code first checks to see if WordPress is requesting a single post. If it is, then it tells WordPress to look for the template in the /single/ folder of your WordPress theme.
Now you need to add template files defined by this code.
Connect to your WordPress hosting using an FTP client or File Manager in cPanel and go to /wp-content/themes/your-theme-folder/.
Inside your current theme folder, you need to create a new folder called ‘single’. Next, you need to open this folder and create a new file inside it. Go ahead and name this file single-cat-{category-slug}. Replace {category-slug} with your actual category slug.
For example, if you have a category called ‘News’, then you will create single-cat-news.php file. If you have a category called ‘Travel Tips’, then create a template single-cat-travel-tips.php, and so on.
Now, these template files will be totally empty. As a starting point, you can copy the contents of your single.php file from your theme folder and paste them inside each of these templates. After that, you’ll need to edit these templates to make your desired changes.
Once you’re done, you can go to your website and view a post. It will use the template that you have created for the category where this post is filed.
Now let’s suppose you have a post filed in two categories News and Travel Tips. WordPress will automatically show the template for ‘News’ because it appears first in alphabetical order.
On the other hand, if you filed a post in a category and didn’t create a template for that category, then WordPress will fall back to the default single.php template of your theme.
Creating Custom Single Post Templates for Specific Authors
Let’s suppose you want posts written by a specific author to look different on your website. You can do that using code by following the same technique we showed for categories.
/**
* Define a constant path to our single template folder
*/
define(SINGLE_PATH, TEMPLATEPATH . '/single');
/**
* Filter the single_template with our custom function
*/
add_filter('single_template', 'my_single_author_template');
/**
* Single template function which will choose our template
*/
function my_single_author_template($single) {
global $wp_query, $post;
/**
* Checks for single template by author
* Check by user nicename and ID
*/
$curauth = get_userdata($wp_query->post->post_author);
if(file_exists(SINGLE_PATH . '/single-author-' . $curauth->user_nicename . '.php'))
return SINGLE_PATH . '/single-author-' . $curauth->user_nicename . '.php';
elseif(file_exists(SINGLE_PATH . '/single-author-' . $curauth->ID . '.php'))
return SINGLE_PATH . '/single-author-' . $curauth->ID . '.php';
}
Next, you should connect to your website using FTP or cPanel file manager in cPanel and then go to /wp-content/themes/your-theme-folder/. If you haven’t already created a folder called /single/ inside it, then go ahead and create it now.
Inside this folder, you need to create a template using the author’s username in the template name. For example, single-author-johnsmith.php.
This template will be empty, so you can copy and paste the contents of your theme’s single.php template and use it as a starting point.
You can now visit your website to view a post created by a specific author. It will use the template you created.
Most website code contains HTML, CSS, and JavaScript. Learning these programming languages requires hours of studying and practice. The good news is that there are some excellent tools that let you create any type of website (without writing code).
In this comprehensive guide, we will cover how to code a website using drag-and-drop tools that create all the code for you. We will share how to learn the code fundamentals for those who want to code a website from scratch so you can do just that.
Website Builders vs. Coding a Website From Scratch
In the early days of the internet, building a website was complicated. That’s because developers had to code a website from scratch, which would take hours, if not weeks.
However, those days are now behind us.
Over 62.9% of all websites on the internet are built on a website framework, so most developers don’t have to know how to build a website from scratch anymore.
Most developers now use WordPress and other CMS platforms (website builder frameworks) to speed up website building.
In 95% of cases, you can build a website with website builders or no-code solutions, and it will be just as good as writing code from scratch.
Pros and Cons of Using a Website Builder
Here are some of the benefits of using a website builder:
It is easy to use, even for beginners.
You don’t need to invest time and money in learning web development.
It saves you time, which you can then spend on growing your business.
Easily build eCommerce, membership, and business websites without spending a fortune.
However, there are a few drawbacks to using a website builder:
Your website could have unnecessary features that could slow it down.
You may not need CMS capabilities for a project but will still have to maintain the software updates and backups.
Pros and Cons of Writing Code From Scratch
Here are some benefits of writing code all by yourself from scratch:
Your website will only have the code it needs, which allows it to load faster.
You won’t need to maintain software updates.
You will get valuable programming skills that may lead to new WordPress career opportunities.
However, you will have to compare these advantages with the following downsides:
You will spend hours and days learning to code in HTML, CSS, and JavaScript.
Generating content dynamically will be difficult.
Adding and updating content will require editing multiple files.
You can’t easily share access to your website without giving full control to someone else.
If you hire a developer to write the code for you, then it will be expensive and not very cost-effective.
Since time is your most valuable asset, we will show you the fastest ways to code a website using tools that do the code writing for you (methods 1 and 2 will cover this).
In method 3, we will share resources on how to make a website from scratch. This is great for students who want to learn programming.
With that said, let’s look at how to code a website. You can use the quick links below to jump to the method you want to use:
WordPress is the most popular website builder platform. In fact, according to our CMS market share report, WordPress powers over 43% of all websites on the internet.
It has multiple tools that let you create a custom website from scratch without learning to code.
Our #1 pick is SeedProd. It’s the best drag-and-drop WordPress website builder, used by over 1 million websites.
To start with WordPress, you will need a domain name and web hosting. We recommend using Bluehost.
They are one of the top WordPress hosting providers, and they are offering our readers a free domain name and a 60% discount on hosting (just $2.75/month).
After you have a domain and hosting, the next step is to install WordPress (the right way). If you are using a hosting provider like Bluehost, then you will have access to a 1-click, user-friendly WordPress installation process.
Once you have installed WordPress, you can log in to the admin dashboard. It will look something like this:
SeedProd is the best WordPress drag-and-drop page builder for WordPress. It allows you to easily design your website and create beautiful pages without writing any code.
Once you have installed SeedProd, just go to the SeedProd » Landing Pages page and click the ‘Add New Landing Page’ button.
On the next screen, you will be asked to choose a template.
SeedProd has dozens of beautifully designed templates that you can use as a starter point, or you can choose ‘Blank Template’ to start with an empty page.
After that, you will be asked to enter a title for your page and a URL slug.
For instance, if you are creating the front page of your website, then you can enter ‘Home’ as the title and URL.
Then, you need to click on the ‘Save and Start Editing the Page’ button.
SeedProd will now load the page builder interface. It is an intuitive page builder where you can simply point and click to start editing.
SeedProd’s drag-and-drop interface is easy for beginners but powerful enough for developers.
In the left column, you’ll see the most commonly used web design elements as blocks that you can add to your page.
To your right, you’ll see a live preview of your design where you can simply point and click on any element to edit, delete, or move it.
Basically, you can create a custom web design, including a navigation menu, sidebars, and footers, without writing code.
However, if you need to add custom code, then you can do it by dragging and dropping the Custom HTML block.
Inside the custom HTML block, you can manually add any HTML code.
You can also adjust the margin, padding, and design attributes of your custom HTML block.
Similarly, you can also add custom CSS code to your page.
Just click the ‘Settings’ button in the bottom left corner and choose ‘Custom CSS’.
Once you finish editing your page, click the ‘Save and Publish’ button to make it go live.
You can also click the ‘Preview’ button to view your page in live action.
Simply repeat the process to create other pages for your website. You can quickly create a small business website within minutes.
SeedProd website builder makes it easy to make and edit a website effortlessly.
This is why many professional developers use it worldwide. Even developers at large companies like Awesome Motive use SeedProd to build their main websites because it allows for rapid deployment and customization.
Alternatives to SeedProd
There are several other popular WordPress page builders you can use. The following are our top picks for beginners to code a website from scratch without actually writing the code:
Divi Builder – Drag and drop theme and page builder
Beaver Builder – Another well-known WordPress page builder
Astra is a highly customizable theme with ready-made starter websites that you can install with one click.
While we are biased toward WordPress, its popularity speaks for itself. Many big companies use WordPress, like BBC, Microsoft, Facebook, The New York Times, etc.
If you don’t want the hassle of getting a domain, hosting, and installing various software like WordPress, then you can use the Web.com website builder.
It is a great platform to build simple business websites and online stores. They even have a guided wizard that helps with the process.
Web.com pricing plans include a free domain name, free SSL certificate, dozens of templates, and an AI writing tool to help you generate website copy quickly.
Simply pick from their thousands of beautiful pre-made website templates and customize the design to match your brand needs with point and click.
The builder comes with all the powerful features you would expect.
You can easily add photo galleries, videos, testimonial sliders, contact forms, map locations, social media buttons, and more.
You won’t need to worry about updates, security, or backups because Web.com takes care of all of that for you. They also offer 24/7 chat, email, and phone support.
Alternatives to Web.com
There are plenty of different all-in-one solutions out there. Apart from Constant Contact, the following are our top picks for easy website builders that are not WordPress:
Gator by HostGator – Fully hosted website builder with drag-and-drop tools and templates.
Domain.com Website Builder – Hosted website builder with dozens of beautiful templates for all types of websites
HubSpot – All-in-one website builder and marketing platform for small businesses
Wix – Another well-known drag & drop website builder.
BigCommerce – Fully hosted website builder to create eCommerce stores.
Want to have an expert design a custom website for you? The team at Web.com also offers custom web design services, giving our users an exclusive deal. Get your free quote today.
3. Learn to Code a Website From Scratch
If you are a student and want to learn how to code a website from scratch, you will need to understand web development fundamentals like HTML, CSS, and more.
While there are many free and paid courses, the best one we have found is the one on Code Academy.
It takes roughly 9 hours to complete, but by the end of it, you will have learned to code a custom responsive website from scratch using HTML, CSS, and Bootstrap.
Even after you finish the course, you will need hours of practice before you can truly become efficient at coding websites from scratch. In the next section, we will show you how to code a very basic website using HTML and CSS.
Coding a Basic Website
Websites use HTML, CSS, and sometimes some JavaScript.
HTML defines the basic layout of a web page, including content like images, text, videos, and more.
CSS defines colors, margins, padding, text size, and more.
To write this code, you will need a code editor. A code editor comes with syntax highlighting, which helps you easily catch mistakes and write code more efficiently.
Next, you will need to start a project.
Simply create a new folder on your computer and call it whatever you want. This is where you will store all your website files.
Open your code editor and create a new file. Since this will be your website’s home page, we recommended naming it index.html.
This file is where you will write the HTML code for your first web page.
A basic HTML page contains the following sections.
HTML document wrapper
Head
Body
You can define this structure by writing the following code:
<html>
<head>
</head>
<body>
</body>
</html>
The code inside the head section is not visible on the screen.
It defines metadata for your HTML document, like the title of your HTML document, link to the CSS file, and more.
Now, let’s fill in the head section of your HTML page:
Are you looking to add a countdown timer to their WordPress website?
Countdown timers are a great way to build anticipation, excitement, and create a FOMO effect on your website. There are many different countdown plugins that let you create a countdown timer, so which one should you use?
In this article, we’ll share the best countdown plugins for WordPress and explain the key features of each.
What is a Countdown Timer Plugin & When You Need it?
A countdown timer WordPress plugin allows you to display a timer that counts down to a specific time or date.
Savvy marketers use countdown timers to build excitement and create a sense of urgency among their customers. It helps them take advantage of the FOMO effect to boost conversions.
There are many plugins that allow you to add countdown timers to your website. These countdown timers can be divided into two groups:
Normal Countdown Timers
A normal countdown timer, sometimes called a static or fixed countdown timer, is what most people think of when they imagine a timer. This timer counts down to a certain fixed time. That might be the launch of a WordPress website, the end of a sale, or another event.
The countdown clock’s endpoint is the same for everyone and doesn’t change depending on who’s viewing it.
Evergreen Timer
An evergreen countdown timer, sometimes called a dynamic countdown timer, is specific to each user. It begins counting down when the person arrives on your site. For instance, they might have 4 hours to take advantage of a special offer.
This can be a powerful marketing technique as it lets you create a sense of urgency.
Note that most WordPress plugins are designed to run normal countdown timers, and only some let you run evergreen timers.
Having said that, let’s take a look at some of the best countdown timer plugins for WordPress.
There are lots of ways you can position your countdown timer using OptinMonster. One of the best is to use a floating bar that sticks to the top or bottom of your page. That way, it stays visible at all times.
Here’s a countdown timer we created using the OptinMonster plugin:
You’ll need the OptinMonster’s Pro plan or higher to use countdown timers.
They allow you to add countdown timers on popups, floating bars, full-screen welcome mats, scroll boxes, and inline widgets. On top of that, you can personalize the timers based on the user’s location, which page they’re on, where they’re visiting from, and more.
SeedProd is the best WordPress website builder and landing page plugin. It is a great option if you want to add countdown timer animation to your landing pages.
SeedProd lets you easily set up a special landing page and put your site into coming soon or maintenance mode. Plus, it has a powerful drag-and-drop website builder. You can easily customize your WordPress theme without touching a single line of code.
With this plugin, you can create a normal and evergreen timer for your website. It offers lots of customization options, including pre-built templates for countdown timers.
Here’s a countdown timer we created using SeedProd’s Coming Soon Page Pro plugin:
Countdown Timer Ultimate is another good option to consider if you want to create a normal countdown timer. It’s a simple plugin that allows you to show timers on the entire website or specific to individual site visitors.
You can use Countdown Timer Ultimate to make as many countdown timers as you want, and you can customize how they look to some degree.
Here’s a preview of the countdown timer that you can create using the free version of the Countdown Timer Ultimate plugin:
The pro plugin gives you more advanced options. These include being able to show specific text when the countdown expires and extra design features.
Countdown Builder is a simple countdown timer with multiple different styles built in. These include circle countdowns, flip clock countdowns, and even a coming soon page.
You can place your timer within a post or page in the WordPress block editor by selecting the ‘Countdown’ block or using a shortcode. You can also choose to display it automatically on specific posts or pages.
Here’s a preview of a countdown timer you can create using the plugin:
If you want, you can edit how your clock looks in detail, changing things like the font size, the labels, and the animation style. You don’t need to do this with CSS. There’s a built-in editor in the plugin.
Evergreen Countdown Timer is the next countdown plugin on our list. It lets you create evergreen countdowns, as you might expect from its name. You can also use it to create normal countdowns as well.
You can choose how the plugin detects visitors by a cookie or their IP address.
To add the timers to your page, you’ll need to enter a shortcode. You can simply copy and paste this from the Manager section of your countdown timer settings.
Once your timer hits zero, you can automatically redirect the visitor to a URL of your choice. For instance, you could send them to a registration page if you’re counting down to the launch of your new course.
Here’s a timer we created using the Evergreen Countdown Timer plugin:
There’s a pro version of the plugin, which gives you lots of extra options. It also lets you choose more colors than just black or white for your timer.
With the Pro version, you can provide a countdown for available spots, such as seats or tickets. This could work well if you’re selling places for a paid webinar or another live event.
HurryTimer is a free countdown timer plugin that lets you create both evergreen and regular timers. The evergreen timer uses both cookie and IP detection to display the right timer to each individual user.
You can also set up timers to run a countdown between two fixed dates. This is useful if you want to get ready for an upcoming sale in advance.
The timer works with WooCommerce, though you don’t have to run WooCommerce to use it. You can display your timer several times on the same page if you want to.
Here’s a timer we created using HurryTimer:
If you have the Pro version, you can set up a recurring timer. This is a timer that runs according to the rules that you specify. For instance, you could have a timer that shows shipping cut-off times.
With the pro version, you can also create an announcement bar that sticks to the top or bottom of the screen to keep your timer visible.
7. Sales Countdown Timer
Sales Countdown Timer is designed for WooCommerce stores. It helps show timers for sale events, promotional offers, and the latest campaigns.
You can easily integrate the plugin with your WooCommerce products. Plus, it offers different customization options. You can change the style of the timers, edit the message, change the colors in the timer clock, and more.
Besides that, the plugin also lets you choose the location of the timer, whether you’d like to make it sticky, and also select which type of product pages you’d like to show the countdown timer.
Here is a look at the countdown timer we created using the plugin:
Recently, one of our readers asked us how to properly change a WordPress theme on their website without breaking anything.
WordPress makes it super easy to change and manage themes. However, you need to remember that changing the appearance of your live website is a major event. You need to keep certain things in mind before and after you change a theme so you don’t lose any data and website traffic.
In this article, we will show you how to change a WordPress theme with a step-by-step checklist.
Why Change a WordPress Theme?
You may want to change the theme on your WordPress website to make it better match your niche.
For example, if you run a fashion blog, then you might want to switch to a theme with the style of a professional fashion website.
Switching to a different theme can also give your website a fresh look, enhance the user experience, and even improve your site’s SEO by making it easier for search engines to crawl and index your content.
Plus, some WordPress themes come with built-in features that you may need on your site. For instance, some themes include features for eCommerce, membership sites, and portfolios.
Having said that, let’s see how to properly change a WordPress theme on your website. Here’s a quick overview of what you’ll learn in this article:
While you can easily change a theme with just a few clicks, you must take some precautionary steps before starting this process.
We recommend that you go through the following checklist to ensure that the process of changing your WordPress theme goes smoothly and that you don’t end up losing important data.
1. Copy Snippets from Your Current Theme
Some intermediate WordPress users like to customize their website by adding code snippets directly to the theme’s functions.php file.
Since these changes were made once, people usually forget about them.
If you or your web developer made these changes, then make sure to go through the files of your current theme and note all the additional code you’ve added previously. This will allow you to add these snippets later into your new theme’s functions.php file or a site-specific WordPress plugin.
Expert Tip: We recommend always adding code to your website using WPCode, which is the best WordPress code snippets plugin on the market. This way, when you switch to a different theme, you won’t have to worry about copying and adding code snippets.
Before changing your theme, you should check the load time of your website. This can help you easily compare the differences in the page load time after you make changes to your website.
Remember, WordPress speed is an important factor in user experience and SEO, so you need to make sure that the new theme is faster than your previous one.
Make sure that you test the load time of the homepage and also some of your inner pages.
3. Don’t Lose Any Tracking Code
Some users add their analytics tracking code directly to their theme files. Also, some WordPress themes allow you to add AdSense or Analytics code in their settings panels.
One of the most common mistakes beginners make is to overlook these code snippets.
You need to make sure that you copy all the tracking code so you can add it to your new site after changing the theme.
To future-proof this, we always recommend users install Google Analytics using a plugin like MonsterInsights. This plugin lets you view the analytics and reports directly from your WordPress dashboard without having to add any tracking code to the theme files.
It’s always recommended to back up your posts, images, plugins, and the database before changing your theme.
You can use a WordPress backup plugin like Duplicator to create a backup of your entire site. Make sure that you download this backup to your computer before moving forward.
This step will ensure that you can recover your website easily if anything goes wrong.
Sidebars are used for adding different widgets including social links, advertisements, subscription forms, or a contact form.
Make a note of these changes. If there is any custom code added to a widget, then make sure you copy and paste this code on your computer so that you can reuse it in your new theme.
6. Keep Your Site in Maintenance Mode
It’s a good practice to put your website in maintenance mode when you are making changes to it. This can prevent users from seeing an incomplete website and ensure a smooth transition to a different theme.
Note: You can use SeedProd’s free plan to enable maintenance mode. However, upgrading to the premium version will unlock more features like pre-built templates, advanced customization features, and email marketing tool integrations.
Next, head over to the SeedProd » Landing Pages screen from your WordPress dashboard and click the ‘Set up a Maintenance Mode Page’ button.
After that, you must select a template for your maintenance mode page. You can also use a blank template and create a page from scratch.
To choose a template, simply hover your mouse over a thumbnail and then click the check icon.
You can now use SeedProd drag-and-drop page builder to customize your page. Simply add new blocks by dragging them from the menu on your left.
SeedProd lets you add standard blocks for text, images, buttons, and headlines. It also offers advanced blocks, including contact forms, giveaways, social sharing options, and much more.
Don’t forget to save your changes by clicking the ‘Save’ button in the top right corner.
After that, head over to the ‘Page Settings’ tab and change the Page Status by toggling it to ‘Publish.’
Once you do that, click the ‘X’ icon at the top left corner of the screen to exit the drag-and-drop builder. This will open a prompt on the screen asking you to activate the maintenance mode.
From here, simply click the ‘Yes, Activate’ button to display the maintenance mode to the users visiting your website.
There are thousands of free and paid WordPress themes available for you to pick from. The fact that you are reading this article means you’ve likely found a good theme for your needs.
However, if you haven’t already selected a theme, then we can highly recommend the following WordPress themes:
Astra is a lightweight and speed-optimized WordPress theme that is compatible with popular page builder plugins like SeedProd, Beaver Builder, Divi, and Visual Composer.
It’s a translation and RTL-ready theme. It allows you to start your website in any language and even create a multilingual website.
Astra can also be integrated with the WooCommerce plugin, so you can easily create an online store without much hassle. You can even customize the header, footer, layout, and more using the WordPress Theme Customizer.
Our favorite thing about Astra is all the starter website templates it comes with. It has more than 250 options for all kinds of niches, including business websites, online stores, and personal blogs.
Divi is one of the most popular WordPress themes on the market. It’s powered by the drag-and-drop Divi Builder, which allows you to easily build any kind of website.
It comes with over 2000 pre-built layouts and 200 different content elements. You can easily customize each element of your site and see the changes in real time.
Plus, Divi is also super SEO-friendly and can help your site rank higher in Google and other search engines.
We already mentioned you can use it to create a maintenance mode page. But you can also use it to create a custom WordPress theme without writing any code.
SeedProd comes with a drag-and-drop builder and 300+ professionally designed templates to get you started. You can easily customize your theme with ready-made blocks, smart sections, and WordPress template tags.
It also shows a real-time preview of all the changes on the right side of the screen, so you can see how your website will appear to users before it’s even published.
Genesis is the most popular WordPress theme framework built by the StudioPress team. You can create amazing websites using the Genesis framework and other StudioPress themes.
OceanWP is a responsive and multi-purpose WordPress theme. It offers multiple demo templates that have been built with different professions and businesses in mind.
It is compatible with the major page builder plugins. You can also use different extensions to take your site to the next level.
How to Change WordPress Theme Without Going Live
Once you’ve installed your new theme, you are ready to switch themes.
However, it’s always recommended to test a theme before switching to it on your live website.
This way, you’ll be able to check the compatibility of the new theme with your existing plugins and make sure that everything is working properly.
There are three ways that you can change your WordPress theme without going live.
1. Live Preview Option
By default, WordPress allows you to preview a theme on your website without changing it.
To do that, head over to the Appearance » Themes page from the WordPress admin sidebar.
On this page, you’ll see all the installed themes on your site. Go ahead and hover your mouse over the theme you want to preview and click on the ‘Live Preview’ button.
This will open your new theme in the WordPress Theme Customizer.
You can now test your new theme and make sure that everything is working properly.
2. Theme Switcha Plugin
Another option is to use the Theme Switcha plugin. It allows you to preview your new theme without activating it.
First, you need to install and activate this free plugin. For detailed instructions, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, visit the Settings » Theme Switcha page from the WordPress dashboard and check the box next to the ‘Enable theme switching’ option.
Once you do that, scroll to the bottom of the page to click the ‘Save Changes’ button.
This plugin will now display all your installed themes at the bottom of this page.
From here, simply click on your new theme to preview it in a new web browser tab.
3. Test Your Theme on a Staging Site
You can also test your WordPress theme without making it live by creating a staging site. This website is a clone of your live website and is used for testing any kind of changes.
You can easily do this by using your hosting provider’s built-in staging site feature. For this tutorial, we will be using Bluehost.
First, you must visit your Bluehost cPanel and click the ‘My Sites’ button. Once you do that, switch to the ‘Plugins’ tab and activate the The Bluehost Plugin.
Next, visit your WordPress dashboard and head to the Bluehost » Staging page.
From here, click on the ‘Create Staging Site’ button to continue.
Bluehost will now prepare the staging environment for you.
After that, it will display the ‘Staging Site’ section where you must check the ‘Not currently editing’ box.
This will open a prompt on the screen asking you to switch to your staging site.
From here, click the ‘Switch’ button.
Once you do that, you can head to the Appearance » Themes page from the dashboard and activate any theme that you want to test without worrying about it affecting your live site.
Then, once you’re happy with the theme, you can just push the changes live.
However, if you don’t have a backup, then you can change the theme manually with the help of phpMyAdmin.
This method allows you to tell WordPress which theme to use by changing the information in the database.
First, you need to connect to your website using an FTP client and go to the /wp-content/themes/ folder.
Here, you’ll be able to see all the themes that are currently installed on your website. You can also install a WordPress theme via FTP if you don’t see it.
Next, you want to write down the folder name of the theme you want to use because you will need it later.
After that, head over to the cPanel of your WordPress hosting account. For this tutorial, we will be using Bluehost. However, your cPanel may look different depending on the hosting service that you use.
On this page, scroll down to the phpMyAdmin section and click the ‘Manage’ button next to it.
Once you are in phpMyAdmin, you’ll see a list of databases on the left side of the screen. From here, click on the database that you are using for your WordPress site.
This will open all the database tables in the right column of the screen. Now, go ahead and click on the wp_options table to open it up.
Note: By default, WordPress uses wp_ as the prefix for the table names. However, it’s possible to have a different database prefix, as shown in the image.
This will open a list of other files that were stored in the wp_options table.
From here, you must locate the template and stylesheet rows in the right panel.
Once you do that, click on the ‘Edit’ link in the template row to open the editor.
Here, you need to change the value in the option_value field to the theme name that you want to use.
It’s usually the same as the folder name in the /wp-content/themes/ folder that you copied earlier.
Once you are done, click on the ‘Go’ button to save the changes. Next, go ahead and repeat the same process for the stylesheet row.
After making changes to both rows, you can go to your website to see the new theme in action.
Things to Do After Changing Your Theme
Once you’ve changed the theme on your website, you need to take care of certain things before turning off maintenance mode.
You can check out the following checklist of things to do after changing your WordPress theme.
1. Test Your Website
First, you need to make sure that all the functionalities, plugins, and widgets are working properly on your site.
You should invest some time to test your website and check out different things including the posts, comment section, images, and contact form.
Once you are satisfied with how your website looks and works, you can move to the next step.
2. Cross Browser Compatibility
Browsers have a tendency to show certain things differently.
To make sure that your website looks good in every major browser, you should test your site in different web browsers, including Google Chrome, Firefox, Safari, and Internet Explorer.
3. Add Tracking Code
After you’ve tested the features and the cross-browser compatibility, you should add your analytics and AdSense tracking code to your site.
You can use the MonsterInsights plugin to add the Google Analytics tracking code. This will allow you to properly set up analytics and view detailed website stats right inside your WordPress dashboard.
You can now disable maintenance mode on your site to make it go live.
If you are using the SeedProd plugin, simply visit the SeedProd » Landing Pages screen from your WordPress dashboard and click the toggle to ‘Inactive’ to turn off the maintenance mode.
5. Test Loading Time
Upon changing your theme, we recommend using the IsItWP Website SpeedTest Tool again to test the loading time of your homepage.
Next, compare it to the load time when your old theme was installed. If you see any major differences, then you can follow our guide to improve WordPress speed.
6. Monitor Bounce Rate
After switching themes, you should monitor the bounce rate of your site.
If your new theme is not user-friendly and difficult to navigate, then it may increase the bounce rate and drive visitors away from your website.
You can also ask your users for feedback and suggestions on how to improve your site design. You can use survey forms or online polls to gather user input.
For example, you might use user feedback to add a two-question survey prompt on your website. For detailed instructions, see our tutorial on how to create a survey in WordPress.
You can share the new design with your subscribers using an email marketing service and ask them for their suggestions. This will help you to get ideas for what they would like to see improved.
Bonus: Update a WordPress Theme Without Losing Customization
Once you have switched to a different theme and customized it according to your liking, you will want to keep that theme regularly updated to the newer versions.
However, when you update a theme, you can lose some of the customization settings. For example, you will lose all the code that you have added to the theme’s functions.php file, stylesheet, or templates.
However, you can easily update a WordPress theme without losing all your customization by creating a child theme.
This theme will inherit the parent theme’s functionality, features, and style. You can then customize the child theme without making any changes to the original one.
Next, you must identify all of the changes you made to your theme and copy them over to the child theme. The easiest way to do this is by comparing your old and new theme files using software like WinMerge or Kaleidoscope.
Once you make the changes, simply export the customizer settings from the parent theme and import them to the child theme.
Upon doing that, you can preview your changes in the customizer and click the ‘Save & Publish’ button to make those changes live.
Another way to update your theme without losing any customization is to always add your custom code with WPCode. It is the best WordPress code snippet plugin on the market that makes it super easy and safe to add custom code to your website.
When using this plugin, you won’t have to worry about losing the custom code in your functions.php file, stylesheets, or templates when you update your theme.
This is because the code will be saved in WPCode and will automatically be executed on your site. For details, see our complete WPCode review.
Do you want to add social share buttons in WordPress?
People spend most of their time on different social media platforms across the internet, so sharing your content on these platforms can help you build user engagement and attract new visitors to your website. The simplest way to do this is by adding social sharing buttons to WordPress posts and pages.
In this article, we will show you how to easily add social share buttons and display share counts on your WordPress website.
Why Add Social Share Buttons in WordPress?
Social networking is one of the most popular online activities today. That’s why social media marketing is now a crucial part of any small business’s growth strategy.
If you want to reach more potential customers, then social media platforms are highly effective channels to communicate with new people.
The problem is that when you share your content on your social media profiles, it only reaches a limited number of your followers.
However, by adding social sharing buttons, you can encourage visitors to share your content on their social media handles. This allows your content to be seen by their friends and followers, who can then add comments, like, and re-share it.
In this way, social share buttons can help drive more traffic to your site, improve your social credibility, generate more leads, and boost engagement.
Having said that, let’s see how to easily add social share buttons in WordPress. You can use the quick links below to jump to different parts of our tutorial:
Upon activation, visit the Social Snap » Settings page from the WordPress admin sidebar and expand the ‘Social Sharing’ tab from the left column.
This will open new settings in the sidebar where you must select the ‘Manage Networks’ tab.
Next, click the ‘+ Add Networks’ button to add a social media network of your choice from the prompt, such as Facebook, Twitter, LinkedIn, and email.
You can also configure the button visibility for different devices by hovering your mouse over the eye icon and toggling the mobile switch to ‘On’. Once you do that, the social sharing buttons will also be displayed to users who are visiting your website on mobile devices.
After that, exit the ‘Manage Networks’ tab.
This will take you to the general settings page, where you can select if you want to add a floating bar or inline buttons for social sharing icons.
Add Social Share Inline Buttons
Social share inline buttons will be displayed at the top or bottom of your posts and pages.
To add them to your site, just click on the ‘Inline Buttons’ tab to expand it.
This will open new settings in the left column with a preview for the social share buttons on the right side of the screen.
From here, you can configure the buttons’ position. You can choose the ‘Below Content’ option to display buttons at the bottom of the content and the ‘Above Content’ option to showcase buttons at the top of the page.
You can also customize your button’s alignment and the share label, shape, and size from here.
Next, scroll down to the ‘Button Labels’ section, where you can decide if you want to display the social media platform’s name, share counts, or both.
After that, you must scroll down to the ‘Display On’ section. Here, you can check the ‘Posts’ box if you only want to display the social share buttons on your posts. You can also check the ‘Pages’ button to show social share buttons on your About Us, Contact Us, or Archives pages.
Additionally, you can check the ‘Home’ option if you only want to display the social sharing buttons on your home page.
Once you are done, don’t forget to click the ‘Save Changes’ button at the bottom to store your settings.
You can now visit your WordPress website to view the social share buttons in action.
Add Social Sharing Floating Bar
If you decide to add a floating bar, then your social share buttons will be displayed on the side of your WordPress posts or pages.
To do this, simply open the ‘Floating Sidebar’ tab.
This will open some new settings in the left column, from where you can configure the position, size, and shape of your floating bar icons.
Once you do that, scroll down to the ‘Display On’ section and select the pages where you want to display the social share buttons.
For example, if you want to display the social sharing floating bar only on your blog posts, then you can select the ‘Post’ option.
Similarly, if you want to display the floating bar on your website’s home page as well, then you can choose the ‘Home’ option.
Finally, click the ‘Save Changes’ button to store your settings.
You can now visit your WordPress blog to view the social sharing floating bar in action.
How to Add Social Share Buttons in WordPress Images
If you have a photography website, then you can even add social share buttons to your images with the help of the Social Snap plugin.
This will allow users to share your images on their social handles and help bring more traffic to your site.
First, you will have to visit the Social Snap » Settings page from the WordPress dashboard and click on the ‘On Media’ tab to open it.
Once you are there, choose your button type. You can add all your social share buttons at the top of the images or add a Pinterest button.
After that, you can also select the button’s size, shape, visibility, and position.
Then, you can add the minimum height and width for an image. This means that the share buttons will not be displayed in an image on your website that is under the minimum height and width limit.
Next, you must scroll down to the ‘Display On’ section and check the options for the pages or posts where you want to display social share buttons on your images.
You can then also toggle the ‘Hide on Mobile’ switch to ‘On’ if you don’t want to display share buttons for images on mobile devices.
Finally, click the ‘Save Changes’ button to store your settings.
Now, simply visit your WordPress site to view the social sharing buttons in images.
How to Display Social Share Counts in WordPress
If you also want to display the share counts next to the social share buttons, then you must visit the Social Snap » Settings page and expand the ‘Manage Networks’ tab from the left column.
After that, scroll down to the ‘Facebook Share Count Provider’ section, where you can select any of the two sources.
However, we recommend selecting the ‘SharedCount.com’ option. Then, the counts will be retrieved from the SharedCount service API. It allows the plugin to fetch all counts with only 2 API calls, which is best for WordPress performance.
If you choose the ‘Facebook Graph API’ option, then share counts are retrieved from the Facebook API, which can slow down your site.
You can easily get the SharedCount API by signing up for a free account on the SharedCount.com website.
To do this, you will have to provide an email address and password and then click the ‘Create Account’ button.
The website will now send a confirmation link to your email address.
Go ahead and click on the link to verify your account.
Now, you must log in to your SharedCount account again and visit the ‘Settings’ page from the dropdown menu in the top right corner of the screen.
This will take you to a new page where you will see your SharedCount API key.
You need to copy this key and go back to your plugin’s settings page on your WordPress site.
Now, go ahead and paste the API key in the ‘SharedCount API Key’ field.
After that, click the ‘Save Changes’ button to store your settings.
You can then enter this API key again for your Twitter share count. After that, click the ‘Save Changes’ button to store your settings.
You can now visit your website to see the social sharing buttons with the share count for each blog post.
How to Add Social Share Buttons on Custom Landing Pages
If you want to build custom landing pages for your website with social sharing buttons, then you can easily do that using SeedProd.
It is the best WordPress page builder on the market that comes with a drag-and-drop builder, 300+ premade templates, and advanced blocks to create amazing landing pages with social sharing buttons.
After that, simply find and and add the Social Sharing block from the left column to your preferred place on the page.
Next, you need to click on the block again to open its settings in the sidebar. From here, you can choose the social media platform with the button you want to add from the dropdown menu.
You can also add a new social sharing button by clicking the ‘+ Add New Share’ button in the column.
After that, you can also configure the button’s size and alignment.
You can even switch to the ‘Advanced’ tab at the top to change the spacing, pick the device visibility, add custom CSS, and use animation effects.
Once you are done, simply click the ‘Save and ‘Publish’ button at the top to store your settings.
Now, just visit the custom landing page to see the social sharing buttons in action.
This is what the page looked like on our demo website.
Bonus: Add a WhatsApp Share Button in WordPress
Apart from social media platforms, you can also add a WhatsApp share button on your WordPress site. WhatsApp is an instant messaging app that allows people all over the world to contact each other.
By adding a WhatsApp share button, you will enable users to share your site content with their contacts, including friends, family, and colleagues. This can boost user engagement, enhance content visibility, and help you expand your brand reach.
You can easily add a WhatsApp share button in WordPress with the Sassy Social Share plugin.
