How to Start a Fashion Blog (and Make Money) – Step by Step

Are you looking to start a fashion blog but don’t know where to begin?

It is easy to start a blog, but the tricky part is to be successful and make money from it.

In this article, we will show you how to start a fashion blog and share tips on how to make money from fashion blogging.

Starting a fashion blog to make money online

Here is a quick overview of the topics we will cover in this article:

Why You Should Start a Fashion Blog?

If you are passionate about fashion and style, then you may have already seen some top fashion bloggers and influencers on Instagram or other social media platforms.

Fashion blogs not only provide a platform for bloggers, but they also bring lots of opportunities for these content creators.

You might be surprised to discover how fashion bloggers make money from their blogs. According to Harper’s Bazaar, designers and top brands spend over a BILLION dollars each year advertising on Instagram alone.

That means that fashion blogging provides an excellent opportunity to make money online.

Top Fashion Blog Examples That Are Crushing It

Fashion blog examples

Apart from making money, a fashion blog allows you to express yourself more creatively. Here are some of the top fashion blog examples you can follow for inspiration:

One thing you’ll notice about each of the top fashion blog examples above is that they all have their unique voice, personality, and taste in fashion. These fashion bloggers bring their unique perspectives to highlight their favorite products, merchandise, and brands.

If you believe that you have a unique take on fashion and style, then you should start a fashion blog.

While setting up the fashion blog part is easy, like all essential things in life, making a blog popular and monetizing it requires effort.

However, if you do it right, then you’ll undoubtedly find the experience to be rewarding and fulfilling.

What You’ll Need to Start Your Fashion Blog

Fashion blogging essentials

First, you need to choose the right platform to build your own fashion blog. You have plenty of choices, but each one of them has its own pros and cons (see our comparison of the best blogging platforms).

For example, you could start a free blog on a platform like WordPress.com, Tumblr, Blogger, and so on.

These are called free blogs, and they are very limited in terms of features and flexibility when it comes to growing your personal brand. The most important limitation is your ability to make money from your content.

What about Starting a Fashion Blog with Instagram?

Instagram is awesome, but you don’t own it. You can build a huge following, which can go away immediately if Instagram decides that your content violated one of their policies.

We are not saying that you shouldn’t use Instagram.

You must use it to build a large audience, but you will need a central platform that you can control where you can keep your audience coming back for years to come.

The best way to build your fashion blog is by creating your own website with complete ownership and full control.

Now, the question is, how could a beginner with no knowledge of coding build a website?

This is where WordPress.org comes in. It is a powerful website builder that gives you absolute control and full ownership of your website and its content.

Keep in mind that it’s important not to confuse WordPress.org with WordPress.com since they are two different platforms. (See our comparison of WordPress.com vs. WordPress.org for more details).

There are three things you need to start a fashion blog using WordPress.org:

  1. Domain name – This will be your website’s address and what users will type in the browser to visit your blog (For example, wpbeginner.com).
  2. Web hosting – This will be your blog’s home and where you will store all your website files.
  3. Your undivided attention for 30 mins

Yes, you can start a brand new fashion blog in 30 minutes, and we will walk you through the whole setup step by step.

Ready? Let’s get started.

Setting Up a Fashion Blog Using WordPress

A domain name typically costs $14.99 / year, and web hosting normally costs $7.99 / month.

That’s a lot for beginners who are just starting.

Luckily, our friends at Hostinger are offering a free domain, a free SSL, and an 81% discount on hosting to our readers.

Basically, you can get started for as low as $2.24 / month.

NOTE: At WPBeginner, we believe in transparency. If you sign up with Hostinger using our referral link, then we will earn a small commission at no extra cost to you (in fact, you will save money and get a free domain). We would get this commission for recommending just about any WordPress hosting company, but we only recommend products that we personally use and believe will add value to our readers.

Let’s go ahead and set up your web hosting + domain so you can get started.

First, you need to go to the Hostinger website and click on the ‘Claim Deal’ button.

Next, you will be asked to choose a plan. We recommend the Premium plan. You can always upgrade later if you need to.

Hostinger pricing plans for WPBeginner users

Next, you’ll be asked to choose a hosting period.

The 48-month period gives you the best discount.

Hostinger pricing periods

After that, you will fill in your personal information and choose a payment method.

Proceed with the payment to complete your purchase.

Finish Hostinger payment

Upon completing the transaction, you will be able to select your desired domain name during the hosting setup process.

A domain name is your website’s address, and this is what your users will type in their browsers to visit your fashion blog.

Claim free domain name

You need to choose a domain name that reflects your personal voice. It should be unique, creative, and interesting. For more details, see our tips on choosing a great domain name for your website.

Once you have purchased hosting, the next step is to install WordPress.

Simply go to the Websites section in your Hostinger account dashboard and click ‘Create or migrate a website.’

Installing WordPress on Hostinger

This will bring up a website setup wizard. You will be asked what kind of website you want to create (like an online store, business, blog, and so on).

Choose ‘Blog’ for now to continue.

Choose blog as your website type

On the next screen, you will be asked if you want to create a new website or migrate an existing website.

Click ‘Select’ under the ‘Create a new website’ option.

Create or migrate a website

After that, you will be asked to choose a platform.

You need to select ‘WordPress with AI’ to continue.

Select platform

After that, the setup wizard will guide you to set up your WordPress website step by step.

Simply follow the on-screen instructions to finish the setup.

Once finished, you can log in to your WordPress website from your hosting account dashboard.

login to WordPress

This will bring you to your WordPress website’s admin dashboard.

It will look something like this:

WordPress dashboard

Now that you have WordPress installed, you can start working on your fashion blog.

Choosing a Design for Your Fashion Blog

Fashion blog templates

A blog about fashion and style shouldn’t have a plain-looking business or blogging layout. Your website needs a design that represents your unique sense of style and creativity.

Most fashion bloggers are not website designers, so how do you create a website design that is unique, elegant, stylish, and creative?

Luckily, there are thousands of pre-made WordPress templates that you can choose from.

We have hand-picked the best WordPress themes for fashion blogs that you can check out. All of the themes in the list feature creative designs with flexible options to easily make them uniquely yours. Most importantly, all of them are responsive (aka mobile-friendly), which means they look good on mobile and tablets as well.

Each of these themes comes with its own settings page. This is where you will set up the theme, add your website logo, choose colors, and select basic settings.

Depending on which theme you choose, you will find tons of customization options. We recommend striving for simplicity in your website’s design for a cleaner look.

Add Useful Content to Your Fashion Blog

Adding content to your fashion blog

Once you have a functioning design, you can start working on content. We recommend adding the static content first.

Static content refers to non-changing pages that are common among all websites on the internet. These include a contact form page, an about us page, and a privacy policy page.

If your theme includes a page builder plugin, then you can use it to create other static landing pages as well.

Next, you will want to start adding articles/blog posts to your fashion website. See our guide on how to add a new blog post in WordPress and learn how to utilize all the features.

Now, this is where you will develop your own voice. Your blog posts need to be entertaining, informative, and helpful.

We recommend choosing a consistent frequency for your articles. Busier and larger websites post new content every day. You can start by adding a few posts per week and then gradually increase your frequency to daily updates.

To come up with regular blog post ideas, you can visit popular blogs in the fashion industry to gather inspiration. See what these top blogs are doing and replicate it on your blog.

Fashion content on Instagram

We are not saying that you should just steal/recreate the same content.

You just need to gather topics, collect ideas, and get inspiration. After that, you should use those ideas on your blog by adding your unique voice, style, and flavor to it.

Bonus Tip: Check out our guide on how to generate 100+ blog post ideas quickly, or try out our blog post ideas generator.

Optimize Your Fashion Blog to Get More Visitors

Once you start adding useful content, the next step is to make sure that users can find your website when they search for fashion topics online.

Here is how you ensure that your website gets visitors and those people actually engage with your content.

Start Working on Your Website’s SEO

Fashion blog SEO

Most popular blogs get a lot of their traffic from search engines like Google and Bing. Marketers use SEO, also known as Search Engine Optimization, to optimize their websites for higher rankings in the search results.

WordPress itself is quite SEO-friendly out of the box, but there are still things you can do to optimize it further.

The easiest way to do this is by using All in One SEO for WordPress. It is the best WordPress SEO plugin on the market that allows you to easily optimize your fashion blog SEO like a pro.

For more details, follow our step-by-step WordPress SEO guide for improving your website rankings.

Improve Website Speed

Website performance

Speed is one of the most important factors that affects the user experience on your website. It also affects your website’s search engine rankings, as Google considers speed one of the top ranking factors.

You can make your website significantly faster by implementing certain performance tweaks in WordPress. We have created a complete step-by-step guide on how to speed up WordPress and boost performance.

Track User Engagement

Track user engagement

Actions your users take after arriving on your website are called user engagement. A highly engaged audience means more page views and more success for your fashion blog.

This is where you’ll need MonsterInsights. It allows you to easily install Google Analytics in WordPress.

MonsterInsights helps you track your website traffic using Google Analytics. It shows where your users are coming from, what content is popular on your blog, which products make the most profits, and more.

For more on this topic, you can see our article on tracking user engagement in WordPress using Google Analytics.

Start Making Money From Your Fashion Blog

Making money with a fashion blog

Ever wondered how fashion bloggers can afford their clothes, makeup, and accessories? Actually, they don’t have to.

Most successful fashion bloggers promote sponsored content where brands pay them to advertise specific products.

Paid and sponsored content is the major source of revenue for many fashion bloggers. Here, we will list the most effective ways you can start making money from your fashion blog when you’re first starting out.

1. Display Ads Using Google AdSense

Most websites on the internet rely on ads to generate revenue. Google AdSense allows you to easily display ads on your website and make money from your blog even when you’re just starting.

See our step-by-step guide on how to properly add Google AdSense in WordPress for detailed instructions.

2. Affiliate Marketing

Affiliate marketing allows you to recommend products you love. You get a referral commission when your users purchase a product after clicking on your link.

To make money with affiliate marketing, you will need to find fashion products and brands with an affiliate program.

The biggest affiliate partner you can sign up for is Amazon Affiliates. They have tons of products in fashion, clothing, and accessories that you can recommend and get paid for.

See our guide on how to start affiliate marketing, or take a look at how to add and manage affiliate links in WordPress.

3. Build an Instagram Following

Instagram is arguably the top social network for fashion and style influencers. You will need to join Instagram and start posting content with relevant hashtags to make sure that your posts reach the right audience.

The best way to come up with an Instagram strategy is by following other top fashion blogs on Instagram. Study their posts, descriptions, and hashtags, and try to replicate the same effect with your Instagram posts.

For more details, you can see our complete social media cheat sheet.

You should also network with other influencers and do S4S, share for share, campaigns. In this strategy, each party will share the other’s Instagram posts and tag them. It helps both people increase their following.

Another easy way to build an Instagram following is by sharing your Instagram posts on your WordPress blog.

4. Brand Promotions

Contact for promotions

You can also reach out to brands, fashion startups, and agencies to partner with them. The best way to find which companies are doing blog promotions is to keep an eye on top fashion bloggers and their Instagram posts.

For more ways to generate revenue from your fashion blog, see our guide on proven ways to make money from your blog.

Mastering WordPress Skills

WordPress is easy to use and beginner-friendly. However, whenever you start using a new platform, there are always new things to discover and learn. This is where WPBeginner can help.

WPBeginner is the largest free WordPress resource site for beginners. We have lots of helpful content that is created specifically for beginners, business owners, and bloggers.

To expand your WordPress skills, you should check out:

  • WPBeginner Dictionary – Our WordPress glossary is the best place to familiarize yourself with the WordPress lingo.
  • WPBeginner Videos – New WordPress users can start with these videos to master WordPress.
  • WPBeginner Blog – The central place for all our WordPress tutorials and guides.
  • WPBeginner Engage – Our Facebook group, with more than 97,000 WordPress users who can give feedback and help you with your blog.

You can also subscribe to our YouTube Channel, where we regularly upload new video tutorials to help you learn WordPress.

We hope this article helped you start your fashion blog and make money from it. You may also want to see our ultimate WordPress security guide to keep your blog safe and our expert pick of the best WordPress plugins to grow your website.

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.

The post How to Start a Fashion Blog (and Make Money) – Step by Step first appeared on WPBeginner.

55+ Most Wanted WordPress Tips, Tricks, and Hacks

Ever wondered what WordPress tips, tricks, and hacks most popular WordPress sites are using?

There are so many ways to customize your WordPress website and use it more efficiently. However, it takes months for new users to discover the most useful tips and tricks.

In this article, we will share some of the most wanted WordPress tips, tricks, and hacks that will help you use WordPress like a pro.

WordPress tips, tricks, and hacks

Here is a list of all the tips, tricks, and hacks mentioned in this article. Feel free to jump to the one that catches your interest.

  1. Use a Custom Homepage
  2. Install Google Analytics in WordPress
  3. Password Protect WordPress Admin Directory
  4. Show Images in Rows and Columns
  5. Allow users to Subscribe to Comments
  6. Limit Login Attempts
  7. Display Excerpt (Post Summary) on Home and Archive Pages
  8. Add Custom Default Gravatar Image
  9. Adding custom CSS to a WordPress Theme
  10. Using Inspect Element Tool to Customize WordPress
  11. Add a Facebook Thumbnail Image
  12. Add Featured Image or Post Thumbnail to RSS Feed
  13. Show Excerpts in RSS Feed
  14. Use Shortcodes inside Text Widgets
  15. Fix WordPress Email Deliverability
  16. Add Content to Articles in RSS Feeds
  17. Delay Posts in RSS Feeds
  18. Display Social Media Feeds on Your Site
  19. Add Image Icons to Links Navigation Menu
  20. Open Navigation Menu Link in New Window
  21. Add Full-Screen Search Overlay in WordPress
  22. Add a Sticky Floating Navigation Menu
  23. Add multiple authors to a WordPress post
  24. Add Categories to WordPress Pages
  25. Create a Local WordPress Site on Your Computer
  26. Display Total Number of Comments in WordPress
  27. Show Total Number of Registered Users in WordPress
  28. Create New Image Sizes in WordPress
  29. Easily Set up Redirects in WordPress
  30. Convert Categories to Tags or Vice versa
  31. Bulk Move Posts Between Categories and Tags
  32. Display Last Updated Date of Your Posts
  33. How to Display Relative Dates in WordPress
  34. Remove WordPress Version Number
  35. Update WordPress URLs when Not Able to Access WP-Admin
  36. Deactivate All Plugins when not able to access WP-admin
  37. Make a Custom 404 Error Page
  38. Include Category in Post URLs
  39. Display Random Posts in WordPress
  40. Allow User Registration on Your WordPress Site
  41. Create a Custom User Registration Form in WordPress
  42. Exclude Specific Categories from RSS Feed
  43. Change Excerpt Length in WordPress
  44. Display Dynamic Copyright Date in WordPres
  45. How to Change a User Name in WordPress
  46. Allow Users to Like or Dislike Comments
  47. Duplicate a WordPress Post or Page
  48. Allow Users to Submit Posts to Your WordPress Site
  49. Turn Off Comment Notification Emails in WordPress
  50. Change Sender Name in Outgoing WordPress Emails
  51. Changing the Author of a WordPress Post
  52. Rearrange Post Edit Screen in WordPress
  53. Change Number of Posts Shown on Blog Pages
  54. Automatically Close Comments on Old Articles
  55. Split Long Posts into Pages

1. Use a Custom Homepage

By default, WordPress shows your latest posts on the homepage of your website. You can change that and use any page as your site’s homepage.

First, you need to create a new page in WordPress, and you can name this page Home.

Next, you will need to create another page, and let’s call this page Blog as you will use it to display your blog posts.

Now go to Settings » Reading page in your WordPress admin and under ‘Front page displays’ option and switch to ‘A static page’.

After that, you can select the pages you just created as your home and blog pages.

Static Frontpage

You can also create a custom template for your home page.

1. Create Custom Template in Site Editor

If you use a newer block theme on your WordPress site, you can create a custom template for your home page using the site editor.

Simply go to the Appearance » Editor page and click on the Add New button at the top of the template chooser screen.

Creating a new template in Site Editor

From the fly-down menu, you can choose what type of template you want to create. You can choose Front Page which will automatically include header and other settings, or you can choose a Custom Template to start from scratch.

If you choose a custom template, then you will be asked to give your template a name. After that, Site Editor will open it for editing.

Edit template

You can design your custom template in the block editor. Once you are finished don’t forget to save your changes.

You can now edit the Home page you created earlier. On the page edit screen, click on the Template option under the Summary box in page settings panel.

Choose custom template

Select your custom homepage template from here.

You can continue editing the page or save and publish your changes to see your custom home page design in action.

2. Create a Custom Template Manually

You can use this method if you are using an older theme or want to write the code manually.

Simply create a new file on your computer using a plain text editor and add this code at the top of it.

<?php /* Template Name: Custom Homepage */ ?>

Save this file as custom-homepage.php on your desktop.

Next, you need to connect to your website using an FTP client and go to /wp-content/themes/your-current-theme/ folder. Now upload the file you created earlier to your theme folder.

Return to the WordPress admin area and edit your home page.

You will be able to select your custom homepage template under the Summary metabox in the post settings column on the right.

Choose custom template

For more details, see our guide on how to create a custom page template in WordPress.

Now this page will be completely empty, and it will not show anything at all. You can use custom HTML/CSS and WordPress template tags to build your own page layout. You can also use a page builder plugin to easily create one using drag-and-drop tools.

2. Install Google Analytics in WordPress

Google Analytics is one of the must have tools for WordPress site owners. It allows you to see where your users are coming from and what they are doing on your website.

The best way to install Google Analytics is by using the MonsterInsights plugin. It is the best Google Analytics plugin for WordPress and shows beautiful reports right inside your WordPress admin area.

Simply install and activate the MonsterInsights plugin. For more details, see our tutorial on how to install a WordPress plugin.

Upon activation, the plugin will walk you through the set up. Simply follow the on-screen instructions to finish the setup.

MonsterInsights

For detailed instructions see our step-by-step guide on how to install Google Analytics in WordPress.

3. Password Protect WordPress Admin Directory

The WordPress admin directory is where you perform all administrative tasks on your website. It is already password-protected as users are required to enter a username and password before they can access the admin area.

However, by adding another layer of authentication, you can make it difficult for hackers to gain access to your WordPress site.

Here is how to enable password protection for your WordPress admin directory.

Login to your WordPress hosting account control panel. Next, click on the ‘Directory Privacy’ option under the Files section of your website’s Advanced settings.

Directory Privacy

Note: Most web hosts using cPanel, like Bluehost, will have similar steps. However, your dashboard might be slightly different from our screenshots, depending on your hosting provider.

Next, you will be asked to select the directories you want to protect.

Navigate to your WordPress website’s root folder and click on the Edit button next to the wp-admin folder.

Select admin folder

On the next screen, simply check the box that says ‘Password protect this directory’.

If you like, you can also give your directory a name like ‘Admin Area’ to help you remember.

Enable password protection

After that, click on the Save button to store your settings.

This will take you to a page where the confirmation message will appear. Click on the Go Back button to continue.

Success message and Go back

On the next screen, you will be asked to enter a username and password, and then confirm the password.

Make sure to note your username and password in a safe place, such as a password manager app.

Create user name and password

Make sure you click the ‘Save’ button when you’ve done that.

Now, when someone tries to access your /wp-admin directory, they will be prompted to enter the username and password you created above.

Protected directory

For alternate methods and more detailed instructions see our guide on how to password-protect your WordPress admin directory.

4. Show Images in Rows and Columns

Showing photos in rows and columns

By default, when you add multiple images to a WordPress post, they would appear right next to each other or on top of each other.

This does not look very good because your users will have to scroll a lot to see all of them.

This can be solved by displaying images in a grid layout. You can use the Gallery block to display images in a grid of rows and columns.

You can also use the columns block to display image side by side. If you want to display an image next to the text, then you can try Text and Media block.

For more details, see our guide on how to add an image gallery in WordPress.

5. Allow users to Subscribe to Comments

Subscribe to comments

Normally when users leave a comment on your website, they will have to manually visit the same article again to see if you or other users replied to comments.

Wouldn’t it be better if users were able to get email notifications about new comments on your posts? Here is how to add this feature to your website.

Simply install and activate the Subscribe to Comments Reloaded plugin. Upon activation, you need to visit Settings » Subscribe to Comments to configure the plugin settings.

For detailed instructions see our guide on how to allow users to subscribe to comments in WordPress.

6. Limit Login Attempts

Limit login attempts

By default, a WordPress user can make an unlimited number of attempts to log in to a WordPress site. This allows anyone to try guessing your password until they get it right.

To control this, you need to install and activate the Login LockDown plugin. It allows you to set limits on the number of failed attempts a user can make to login.

For detailed setup instructions see our guide on how to limit login attempts in WordPress.

7. Display Excerpt (Post Summary) on Home and Archive Pages

Excerpts post summaries

You may have noticed that all popular blogs show article summaries instead of full articles on their home and archive pages. It makes those pages load faster, increases page views, and avoids duplicate content across your website.

For more on this topic, see our article on excerpt (summary) vs full posts in WordPress archive pages.

Many premium and free WordPress themes already use excerpts on home and archive pages. However, if your theme doesn’t display excerpts, then see our guide on how to display post excerpts in WordPress themes.

8. Add Custom Default Gravatar Image

WordPress uses Gravatar to display user profile photos in WordPress. If a user does not have a gravatar, then WordPress uses a default image which is called ‘Mystery Person.’

This default gravatar image will appear many times in your WordPress comments area simply because a lot of users do not have a gravatar image associated with their email address.

You can easily replace this default gravatar with your own custom default gravatar image.

First, you will need to upload the image you want to use as your default gravatar image to your WordPress media library.

Go to Media » Add New page to upload the image. After uploading it, click on the Copy URL to Clipboard button.

Upload custom gravatar

Paste the URL you copied in a text file on your computer, you will need it in the next step.

Now you need to add the following custom code to your website. We suggest using the free WPCode plugin.

add_filter( 'avatar_defaults', 'wpb_new_gravatar' );
function wpb_new_gravatar ($avatar_defaults) {
$myavatar = 'http://example.com/wp-content/uploads/2017/01/wpb-default-gravatar.png';
$avatar_defaults[$myavatar] = "Default Gravatar";
return $avatar_defaults;
}

Don’t forget to replace $myavatar value with the URL of the custom gravatar image you uploaded earlier.

You can now visit the Settings » Discussion page, and you will notice your custom default avatar added to the default avatar choices.

For detailed instructions check out our tutorial on how to add and change the default gravatar in WordPress.

9. Adding custom CSS to a WordPress Theme

As a WordPress site owner, sometimes you may need to add custom CSS to your site. There are multiple ways to add custom CSS in WordPress. We’ll show you two methods.

1. Add Custom CSS using WPCode (Recommended)

Normally, you can add Custom CSS code in your theme settings. However, your custom CSS will disappear when you change the theme.

What if you wanted to reuse that CSS on this or some other website?

You can solve this by adding your Custom CSS by using the WPCode plugin. It is the best custom code plugin for WordPress and allows you to easily insert custom code and CSS anywhere on your website.

Plus, you can organize your code snippets by giving them names or save them to the cloud library and reuse them on other websites.

First, you need to install and activate the WPCode plugin.

Note: There is also a WPCode free version that you can try. We recommend upgrading to the paid version to unlock more features.

Upon activation, go to Code Snippets » + Add Snippet page and click on the Use Snippet button under ‘Add Your Custom Code (New Snippet)’ label.

Add custom CSS snippet

On the next screen, provide a title for your custom CSS snippet and then under the Code Type select CSS Snippet.

After that, you can add your custom CSS code in the Code Preview box.

Adding a custom CSS snippet

Scroll down to the Insertion section, from here you can choose where you want to add this custom CSS snippet.

If you want to add it site-wide then you can select Site Wide Header. Once you are finished, don’t forget to click on the Save Snippet button and flick the toggle from Inactive to Active.

Activate snippet

WPCode will now save your Custom CSS and add it to your website according to your settings.

2. Add Custom CSS in Theme Customizer

The easiest way to add custom CSS to any WordPress theme is by visiting the Appearance » Customize page in your WordPress admin.

If you cannot see the Customize menu under Appearance, then you can manually visit the Theme Customizer by adding the following URL in your browser’s address bar.

http://yourwebsite.com/wp-admin/customize.php

This will launch the WordPress theme customizer, and you will see your website’s preview in the right panel.

Now click on the ‘Additional CSS’ menu in the left panel to expand it.

Additional CSS

You will see a plain text box where you can add your custom CSS.

As soon as you add a valid CSS rule, you can see it applied on your website’s live preview pane.

Add custom CSS

Don’t forget to click on the ‘Save & Publish’ button on the top when you are finished.

For alternate methods and more detailed instructions, check out our beginner’s guide on how to add custom CSS in WordPress.

Note: Some themes, such as Divi from Elegant Themes, also have a spot in the theme options to include Custom CSS. Many of these mirror the Additional CSS section of the Theme Customizer, but we highly recommend choosing only one spot to keep CSS code on your website, whether it’s in WPCode, theme options, or the customizer.

10. Using Inspect Element Tool to Customize WordPress

Adding custom CSS sounds great, but how do you know which CSS classes to edit? How do you debug it without actually having to write CSS?

Using Inspect Element tool, you can edit HTML, CSS, or JavaScript code for any webpage and see your changes live (only on your computer).

For a DIY website owner, these tools can help you preview how a site design would look without actually making the changes for everyone.

Simply point and right-click on any element on a page, then select ‘Inspect’ from your browser’s menu.

Inspect tool

This will split your browser window, allowing you to see the HTML and CSS source code of the page.

You can move your mouse around the code to see the relevant area highlighted in the live preview.

Inspect HTML and CSS

Any changes you make here will be immediately visible on the page above. However, keep in mind that these changes are only happening in your browser and you are not actually editing the page.

This allows you to figure out what you need to edit and how. After that, you can go ahead and change your actual theme files or custom CSS code.

For more on this topic, see our article on the basics of Inspect element and customizing WordPress as a DIY user.

11. Add a Facebook Thumbnail Image

Facebook can automatically pick up an image from your articles when they are shared by you or anyone else. Usually, it picks the featured image of an article. However, sometimes it may pick a random image from the article that may not be suitable.

If you are using All in One SEO plugin, then you can select a Facebook thumbnail image in All in One SEO Settings box on the post edit screen, under the Social tab.

Facebook image in AIOSEO

You can also select a default Facebook thumbnail image by visiting the All in One SEO » Social Networks page.

You can upload a custom image or select an image from the media library.

Default Facebook page

If you scroll further down this settings page, you’ll be able to choose a thumbnail for your homepage as well.

You can see our guide on how to fix the Facebook incorrect thumbnail issue in WordPress for more details.

12. Add Featured Image or Post Thumbnail to RSS Feed

WordPress RSS feeds show a list of your most recent articles. If you show full articles in the feed, all images inside will be displayed. However, it does not include the featured image or post thumbnail in the article.

To fix this, you can add the following code to your theme’s functions.php file or by using WPCode, which is a safer method and can prevent your site from breaking with minor errors.

function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) .
'</p>' . get_the_content();
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

For more information, see our tutorial on how to add post thumbnails to RSS feeds in WordPress.

13. Show Excerpts in RSS Feed

By default, WordPress shows your full article in the RSS feed. This allows content scrapers to automatically fetch and steal your full articles. It also prevents your RSS feed subscribers from visiting your website.

To fix this, head over to Settings » Reading page and scroll down to ‘For each article in a feed, show’ option. Select summary and then click on the save changes button.

Excerpt RSS feed

14. Add a Click to Call to Button in WordPress

As mobile users make up the bulk of users for most businesses, sometimes a quicker way to contact can help you acquire new customers.

While you must have a contact form on your website, adding a quick button to make an instant call can be much faster for users.

The easiest way to add a click-to-call button is by using the WP Call Button plugin. This free plugin allows you to simply add your business phone number and show a call button on your website.

WP Call Button settings

You can choose the button position, color, and where to show it on your website.

If you don’t want to show the button sitewide, then you can show it on select posts and pages, or turn it on for mobile users only.

WP Call Button display settings

Lastly, if you want to strategically place the call button inside your content as a call to action, then you can easily do so with a block or by using the shortcode.

For more details, take a look at our tutorial on how to easily add a click-to-call button in WordPress.

15. Fix WordPress Email Deliverability

By default, WordPress uses the PHP mail() function to send emails. Many WordPress hosting companies block or limit this function to prevent abuse.

This means you and your users may not be able to receive email notifications from your WordPress site. Some of these notifications are crucial such as lost password emails, new user registration emails, and more.

To fix this, you need to install and activate the WP Mail SMTP plugin. It is the best WordPress SMTP plugin on the market and allows you to send your WordPress emails using the proper SMTP protocol.

WP Mail SMTP settings

Note: There is also a free version called WP Mail SMTP Lite that you can use. We recommend upgrading to Pro to unlock more features.

For detailed instructions, see our tutorial on how to setup WP Mail SMTP with any host.

16. Add Content to Articles in RSS Feeds

Want to manipulate your WordPress RSS feeds by adding content to your articles visible only to your RSS feed subscribers?

The easiest way to do this is by using All in One SEO for WordPress plugin. It comes with an RSS Content feature that allows you to add content to articles in your RSS feed easily.

First, install and activate the All in One SEO for WordPress plugin. After that, go to All in One SEO » General Settings and switch to the RSS Content tab.

RSS before and after content

From here, you can add custom content to display before or after each item in your RSS feed.

Alternate Method:

This method requires you to add code to your website, you can use this method if you are not using All in One SEO for WordPress.

Simply add the following custom code snippet to your website using the WPCode plugin (recommended) or your theme’s functions.php file.

function wpbeginner_postrss($content) {
if(is_feed()){
$content = 'This post was written by Syed Balkhi '.$content.'Check out WPBeginner';
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

This code shows the text ‘This post was written by Syed Balkhi’ before an article and ‘Check out WPBeginner’ after the article content.

For more ways to manipulate RSS feed content, see our guide on how to add content to your WordPress RSS feeds.

17. Delay Posts in RSS Feeds

Have you ever published an article accidentally before it was ready to go live? We have all been there. You can easily just unpublish the article and continue editing it.

However, RSS feed readers and email subscribers may already get it in their inboxes. There is an easy fix to avoid this -delaying posts from appearing in your RSS feed.

Add the following custom code snippet using the WPCode plugin (recommended) or your theme’s functions.php file.

function publish_later_on_feed($where) {
 
    global $wpdb;
 
    if ( is_feed() ) {
        // timestamp in WP-format
        $now = gmdate('Y-m-d H:i:s');
 
        // value for wait; + device
        $wait = '10'; // integer
 
        // http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
        $device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR
 
        // add SQL-sytax to default $where
        $where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
    }
    return $where;
}
 
add_filter('posts_where', 'publish_later_on_feed');

This code delays your published posts from appearing in the RSS feed for 10 minutes.

For more details, see our article on how to delay posts from appearing in the WordPress RSS feed.

18. Display Social Media Feeds on Your Site

Recent marketing statistics research shows that an average user spends around 2 hours and 29 minutes on social media.

This presents a huge opportunity for you to grow your social media following and bring them back to your website.

The easiest way to build social media following is to promote your social profiles on your website.

To do that, you will need Smash Balloon. It is the best WordPress social media plugin suite on the market and allows you to beautifully promote your social media feeds on your website.

Social media feed

Smash Balloon makes it easy to embed Facebook posts, Tweets, Instagram photos, YouTube videos, combined feeds in a social wall, and more.

For detailed instructions, see our tutorial on how to add social media feeds in WordPress.

Display icons in navigation menus

Do you want to display image icons next to links in your navigation menu? The easiest solution is to use the Menu Image plugin.

After installing the plugin, simply head over to Appearance » Menu, and you will see the option to add images with each item in your existing menu.

Menu image

Note: The plugin does not work with Block themes and with the full-site editor.

If, for some reason, you don’t want to use a plugin and would instead do it manually, you can.

First, you need to create the images that you want to use as icons and upload them to your WordPress media library. After that, copy their URLs so that you can use them later.

Adding Navigation Menu Icons in Site Editor

If you are using a block theme then this method is for you. Simply launch the Site Editor by visiting the Appearance » Editor page.

Click on your navigation menu to edit it and then click on a link item in your menu. In the block settings, click on the Advanced tab to expand it and then add a custom CSS class.

Add custom CSS class

After that, click on the Style icon at the top, this will open the Style Editor.

Click on the three-dot menu in the panel and then select Additional CSS.

Opening additional CSS in site editor

Next, you need to add the following custom CSS to your theme.

.shop { 
background-image:url('https://example.com/wp-content/uploads/2023/06/cart-icon.png');
background-position:left;
background-repeat:no-repeat;
padding-left:30px!important;
} 

Don’t forget to replace the background-image URL with your own image icon and adjust the padding to your own requirements.

Adding Navigation Menu Icons in Classic Themes

First, you need to visit the Appearance » Menus page and then click on the Screen Options button at the top right corner of the screen.

Adding CSS classes to a WordPress navigation menu

This will bring down a menu where you need to check the box next to CSS classes option.

After that scroll down to your navigation menu and click on an item to expand it. You will see an option to add CSS classes. Enter a different CSS class for each menu item.

CSS class menu item

Don’t forget to click on the save menu button to store your changes.

Next, you need to upload the image icons to your WordPress site by visiting Media » Add Media page. After uploading the image files copy their URLs as you will need them in the next step.

Now you can add an image icon to your navigation menu by adding custom CSS. Here is a sample CSS that you can use as a starting point.

.homepage {
background-image: url('https://www.example.com/wp-content/uploads/2014/12/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}

Don’t forget to replace the image URL with your own image file URL.

Sometimes you may need to make a navigation menu link open in a new window. However, you may not be able to notice the option to do that when adding links.

Opening Navigation Menu Link in New Window in Site Editor

If you are using a block theme on your website, then this method is for you.

Simply go to Appearance » Editor to launch the site editor. After that, click on the link you want to open in a new window.

Edit nav menu link in site editor

In the block toolbar click on the Link button to edit that link.

This will reveal link settings. From here click to slide the toggle next to the ‘Open in new tab’ option.

Open in new tab site editor

Opening Navigation Menu Link in New Window in Classic Themes

Actually, the option is hidden to remove clutter from the screen.

You will need to click on the screen options button at the top right corner of the screen and check the ‘link target’ option.

Link target

Next, you need to scroll down to the menu item that you want to open in a new window.

Click on the menu item to expand it, and you will see the option to open the link in a new tab.

Open link in new tab

Don’t forget to click on the save menu button to store your changes.

21. Add Full-Screen Search Overlay in WordPress

Full screen search

If you click on the search icon at the top right corner of any page on WPBeginner, then you will notice a full-screen search overlay appear. It improves the search experience and makes it more engaging.

You can add this to your WordPress site as well. The easiest way to do this is by installing and activating the WordPress Full Screen Search Overlay plugin.

The plugin works out of the box and there are no settings for you to configure.

Upon activation, it turns any default WordPress search form field into a full-screen search overlay.

For more details, see our guide on how to add a full-screen search overlay in WordPress.

Bonus Tip: Just adding the fullscreen search overlay wouldn’t affect the quality of search results. The default WordPress search is not effective at all.

You can immediately upgrade the quality of search results on your WordPress site by installing the SearchWP plugin. It is the best WordPress search plugin on the market that allows you to add your own search engine to WordPress.

SearchWP website

The best part is that it works seamlessly and will automatically replace the default WordPress search feature.

For details, see our article on how to improve WordPress search with SearchWP.

22. Add a Sticky Floating Navigation Menu

A sticky floating navigation menu stays on top of the screen as a user scrolls down. Some WordPress themes have this feature as an option in their settings. If your theme doesn’t have this option, then you can try this method.

First, you need to install and activate the Sticky Menu (or Anything!) on Scroll plugin.

Upon activation, go to the plugin’s settings page located under Settings » Sticky Menu (or Anything!). Add the CSS class of your navigation menu and save changes.

For detailed instructions, see our tutorial on how to create a sticky floating navigation menu in WordPress.

23. Add Multiple Authors to a WordPress Post

Do you want to credit multiple authors for an article on your website? By default, WordPress posts are assigned to a single author. However, if you often need to credit multiple authors, then there is an easier way to do this.

You will need to install and activate the Co-Authors Plus plugin.

After that, go to Users » All Users page and click on the ‘Create Author Profile’ link below a user that you want to add as co-author.

Create author profile

On the next screen, you can set up the user’s profile as an author on your website. The plugin even allows you to upload a custom author image.

Once finished, don’t forget to click on the Update button to save your changes.

Edit author profile

Now go ahead and edit the post or page where you want to credit multiple authors.

On the post edit screen, you will notice the new ‘Authors’ tab under the post settings panel.

Add multiple authors

24. Add Categories to WordPress Pages

Want to add categories and tags to pages in WordPress? By default, they are only available for posts. Mainly, because pages are supposed to be static standalone content (see difference between posts and pages in WordPress).

If you want to add categories and tags, then simply add the following custom code snippet using the WPCode plugin or your theme’s functions.php file.

// add tag and category support to pages
function tags_categories_support_all() {
  register_taxonomy_for_object_type('post_tag', 'page');
  register_taxonomy_for_object_type('category', 'page');
}
 
// ensure all tags and categories are included in queries
function tags_categories_support_query($wp_query) {
  if ($wp_query->get('tag')) $wp_query->set('post_type', 'any');
  if ($wp_query->get('category_name')) $wp_query->set('post_type', 'any');
}
 
// tag and category hooks
add_action('init', 'tags_categories_support_all');
add_action('pre_get_posts', 'tags_categories_support_query');

25. Create a Local WordPress Site on Your Computer

Many WordPress site owners and developers install WordPress on their computers. Doing so will allow you to develop a WordPress site locally, try plugins and themes, and learn WordPress basics.

We have created detailed step-by-step instructions on how to install WordPress on your Windows computer or on Mac.

26. Display Total Number of Comments in WordPress

Comments provide an easier way for users to engage with content on your website. Showing the total number of comments can be used as social proof and encourage more users to participate in discussions.

The easiest way to do this is by installing the Simple Blog Stats plugin. Upon activation, you can add [sbs_apoproved] shortcode to any post or page to display the total number of comments.

Display total number of comments in WordPress

For a code method and more instructions, see our article on how to display total number of comments in WordPress.

27. Show Total Number of Registered Users in WordPress

Total number of users

If you allow users to register on your WordPress site, then showing the total number of registered users can encourage more users to signup.

The easiest way to do this is by installing the Simple Blog Stats plugin. Upon activation, you can add [sbs_users] shortcode to any post or page to display total number of registered users.

For more detailed instructions, see our tutorial on how to show total number of registered users in WordPress.

28. Create New Image Sizes in WordPress

When you upload an image to your blog, WordPress automatically creates several copies of the image. Your WordPress theme and plugins can also add new image sizes.

To create new image sizes in WordPress, you need to add the following custom code snippet using the WPCode plugin or your theme’s functions.php file.

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

This code adds three new image sizes. Don’t forget to change image size names and dimensions to your own requirements.

For more information, see our tutorial on how to create new image sizes in WordPress.

29. Easily Set up Redirects in WordPress

If you have been working on your website for some time now, then you may occasionally want to change URLs or merge content.

However, this could create a 404 error on the older content if you delete it. There are also SEO concerns, such as how do you tell search engines that this content has moved to a new location?

This is where 301 redirects come in. This allows you to automatically redirect visitors to new posts while telling search engines that the content has moved to this new location.

There are many ways to set up redirects, but the easiest and safest way to do this is by using All in One SEO for WordPress.

All in One SEO for WordPress comes with a redirects manager that helps you easily set up all types of redirects on your WordPress site.

First, you need to install and activate the All in One SEO for WordPress plugin.

Note: You’ll need at least PRO plan of the plugin to unlock the Redirection manager.

Upon activation, you need to visit All in One SEO » Redirects page. Add your old article URL under the Source URL and your new location under the Target URL fields.

Setup redirects in AIOSEO

Choose 301 Moved Permanently under the Redirect Type and click on the Add Redirect button to save your settings.

For more details, see our tutorial on how to create 301 redirects in WordPress.

30. Convert Categories to Tags or Vice Versa

Often folks are not clear about how to properly use categories and tags in WordPress. Sometimes you may end up creating categories that should have been tags or vice versa.

It is easily fixable.

Head over to Tools » Import page and then install Categories and Tags Converter.

Convert category to tags

After installation, click on the run importer link to continue.

On the converter page, you can switch between categories to tags or tags to categories converter. Next, select the items you want to convert and then click on the convert button.

Convert categories and tags

31. Bulk Move Posts Between Categories and Tags

Sometimes you may want to bulk-move posts between categories and tags. Doing that one by one for each post can be time-consuming.

Actually, there is a plugin for that. Simply install and activate the Bulk Move plugin. Upon activation, you need to go to Tools » Bulk Move to move your posts.

Bulk move posts to categories

For more detailed instructions, visit our tutorial on how to bulk-move posts to categories and tags in WordPress.

32. Display Last Updated Date of Your Posts

Last updated date

By default, most WordPress themes will show the date when an article was published. This is fine and would work for most websites and blogs.

However, if you regularly update your old content, then you may want to show your users when an article was last updated. Otherwise, you users wouldn’t notice that the article contains current information.

This can be achieved by adding the following code to add the following custom code snippet using the WPCode plugin or your theme’s functions.php file.

function wpb_last_updated_date( $content ) {
$u_time = get_the_time('U');
$u_modified_time = get_the_modified_time('U');
if ($u_modified_time >= $u_time + 86400) {
$updated_date = get_the_modified_time('F jS, Y');
$updated_time = get_the_modified_time('h:i a');
$custom_content .= '<p class="last-updated">Last updated on '. $updated_date . ' at '. $updated_time .'</p>';
} 
 
    $custom_content .= $content;
    return $custom_content;
}
add_filter( 'the_content', 'wpb_last_updated_date' );

For more detailed instructions see our guide on how to display last updated date in WordPress.

33. How to Display Relative Dates in WordPress

Want to display relative dates like yesterday, 10 hours ago, or a week ago for your posts in WordPress? Relative dates give users a sense of how much time has passed since something was posted.

To add relative dates, you need to install and activate the Meks Time Ago plugin. Upon activation, you need to visit Settings » General page and scroll down to ‘Meks Time Ago Options’ section.

Meks time ago

You can select when to use time ago and how to display it. Don’t forget to click on the save changes button to store your settings.

For more details, see our guide on how to display relative dates in WordPress.

34. Remove WordPress Version Number

By default, WordPress adds the WordPress version to your website’s header. Some people think it’s a security liability. Our answer to this is simple: keep WordPress updated.

However, if you want to remove the WordPress version number, simply add the following custom code snippet using the WPCode plugin or your theme’s functions.php file.

function wpbeginner_remove_version() {
return '';
}
add_filter('the_generator', 'wpbeginner_remove_version');

For more information on this topic see our article on the right way to remove WordPress version number.

35. Update WordPress URLs when Not Able to Access WP-Admin

Update WordPress URLs

Sometimes when moving a WordPress site to new domain or due to a misconfiguration you may need to update WordPress URLs.

These URLs tell WordPress where to display your site and where WordPress core files are located. Incorrect settings can lock you out of WordPress admin area or redirect you to the old website.

The easiest way to update WordPress URLs is by adding the following custom code snippet using the WPCode plugin or your theme’s functions.php file.

update_option( 'siteurl', 'http://example.com' );
update_option( 'home', 'http://example.com' );

Don’t forget to replace example.com with your own domain name.

Once you access your WordPress site go to Settings » General page and update the URLs there. After that, you need to remove the code you added to the functions file.

If you also need to update URLs in your posts and pages, then see our guide on how to properly update URLs when moving your WordPress site.

36. Deactivate All Plugins When Not Able to Access WP-Admin

When troubleshooting WordPress errors, you will be often asked to deactivate all WordPress plugins. You can just go to Plugins in your dashboard and deactivate all plugins. But what if you are locked out of your WordPress site?

Here is how you can easily deactivate plugins when locked out of the admin area.

First, connect to your WordPress site using an FTP client and go to your /wp-content/ folder. Inside it, you will find the /plugins folder.

Rename plugins folder

Now you just need to rename the plugins folder to plugins.old and WordPress will automatically deactivate all plugins.

For alternate methods and more information see our guide on how to deactivate all plugins when not able to access wp-admin.

A 404 error occurs when users type in the wrong address or the address does not exist on your website.

By default, your WordPress theme will then use its 404 error template to display the error.

However, these pages are often quite useless and leave users clueless about what they should do next.

You can fix this by making your own custom 404 error page without writing any code. Doing so will allow you to point users to other useful content on your website.

First, you need to install and activate the SeedProd plugin. It is the best WordPress page builder on the market and allows you to easily create custom pages, landing pages, and even complete WordPress themes without writing code.

Upon activation, go to SeedProd » Landing pages and click on the Set up a 404 Page button.

Setup 404 page

Next, the plugin will ask you to choose a template for your 404 page.

SeedProd comes with a bunch of beautiful 404 page templates that you can use as a starting point.

Choose template

After that, you will enter the SeedProd page builder.

It is an intuitive design tool where you can simply drag and drop blocks and edit them with point and click.

Design your 404 page

You can add a search form, your most popular articles, top-selling products, or anything you want.

Once you are finished, simply click on the Save and Publish button at the top.

For more details, see our tutorial on how to improve 404 page in WordPress.

38. Include Category in Post URLs

You may have noticed that many WordPress sites use categories in their post URLs. This allows them to add more useful information into a URL which is good for user experience as well as SEO.

If you want to add a category name into your WordPress post URLs, then head over to Settings » Permalinks page. Click on the custom structure and add /%category%/%postname%/ in the field next to it.

Category in post URL

Don’t forget to click on the save changes button to store your settings.

To learn more about how WordPress will handle subcategories and multiple categories, see our guide on how to include categories and subcategories in WordPress URLs.

39. Display Random Posts in WordPress

Want to display random posts in your WordPress sidebar? Random posts give your users a chance to discover articles that they would otherwise never get to see.

First, you need to add the following custom code snippet using the WPCode plugin or your theme’s functions.php file.

function wpb_rand_posts() { 
  
$args = array(
    'post_type' => 'post',
    'orderby'   => 'rand',
    'posts_per_page' => 5,
    );
  
$the_query = new WP_Query( $args );
  
if ( $the_query->have_posts() ) {
  
$string .= '<ul>';
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        $string .= '<li><a href="'. get_permalink() .'">'. get_the_title() .'</a></li>';
    }
    $string .= '</ul>';
    /* Restore original Post Data */
    wp_reset_postdata();
} else {
  
$string .= 'no posts found';
}
  
return $string;
} 
  
add_shortcode('wpb-random-posts','wpb_rand_posts');
add_filter('widget_text', 'do_shortcode');

After that, you can use the [wpb-random-posts] shortcode in your posts, pages, or sidebar widgets to display random posts.

Add random posts shortcode

For an alternate method, see our guide on how to display random posts in WordPress.

40. Allow User Registration on Your WordPress Site

WordPress comes with a powerful user management system with different roles and capabilities. If you want to allow users to register on your site, here is how you would turn on that feature.

Head over to Settings » General page and click on the check box next to Membership option. Below that, you need to choose the default role that will be assigned to new users, if you are unsure, then use subscriber.

Anyone can register

For more details see our guide on how to allow user registration on your WordPress site.

41. Create a Custom User Registration Form in WordPress

When you open user registration on your site, users will be using the default WordPress registration form. You can replace it with a custom user registration form for an improved user experience.

First, you will need to install and activate the WPForms plugin. You will need at least the Pro plan to get access to the user registration addon.

Upon activation, go to WPForms » Addons page to install and activate the user registration addon.

After that, create a new form by visiting WPForms » Add New page. This will launch the WPForms builder, where you need to select the User Registration Form as your template.

User registration form template

After creating your form you need to click on the embed button to copy the embed code. Now you can add this code to any WordPress post or page to display your custom user registration form.

For more detailed instructions, see our guide on how to create a custom user registration form in WordPress.

42. Exclude Specific Categories from RSS Feed

Sometimes you may need to exclude specific categories from your WordPress RSS feed. Doing so will hide posts filed under those categories from appearing in your RSS feeds.

Simply add the following custom code snippet using the WPCode plugin or your theme’s functions.php file.

function wpcode_snippets_exclude_feed_category( $query ) {
	if ( $query->is_feed ) {
		// Replace 15 with the desired category id you want to exclude.
		$query->set( 'cat', '-15' );
	}
}
add_action( 'pre_get_posts', 'wpcode_snippets_exclude_feed_category' );

Don’t forget to replace 15 with the ID of the category that you want to exclude.

For more details and alternate methods, see our tutorial on how to exclude specific categories from RSS feeds in WordPress.

43. Change Excerpt Length in WordPress

The default WordPress excerpt length is often too short to describe a post’s summary. To change excerpt length you can add the following custom code snippet using the WPCode plugin or your theme’s functions.php file.

// Changing excerpt length
function new_excerpt_length($length) {
return 100;
}
add_filter('excerpt_length', 'new_excerpt_length');
 
// Changing excerpt more
function new_excerpt_more($more) {
return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');

If you do not want to mess with code, then see our guide on how to customize WordPress excerpts (no coding required).

To add a copyright date to your WordPress site’s footer, you can edit the footer template in your theme and add a copyright notice.

However, the year that you use in the code will need to be manually updated next year.

Instead, you can use the following code to dynamically display the current year in your copyright notice.

© 2009 – <?php echo date('Y'); ?> YourSite.com

For more advanced solutions, check out our article on how to add dynamic copyright dates in WordPress.

45. How to Change a User Name in WordPress

WordPress allows you to easily change the name of a user, but you cannot change the username. There are two ways of doing this.

The easiest way is by using a plugin called Easy Username Updater. Upon activation, simply go to the Users » Username Updater page and then click the ‘update’ link next to the username you want to change.

update user

Now you simply enter the new username and then click the ‘Update Username’ button.

If you’d like to notify the user about the change, then make sure you check the ‘Send User Notification’ box first.

Update username

For alternate methods, see our article on how to change your WordPress username.

46. Allow Users to Like or Dislike Comments

Thrive comments preview

Have you seen how many popular sites like YouTube allow users to like and dislike comments? This brings more user engagement to the discussion on your website.

First, you need to install and activate the Thrive Comments plugin. It is the best WordPress comments plugin and helps you boost engagement on your website.

It adds comment voting, badges, social sharing, and other conversational features to your WordPress comments.

Upon activation, you need to visit Thrive Dashboard » Thrive Comments page and click on the Voting and Badges tab to expand it.

Thrive comments

From here, you can choose the ‘Up and Down’ in Thrive Comments which will let users Like or Dislike comments. After that, don’t forget to save your changes.

You can now check your WordPress comments to see these options in action.

47. Duplicate a WordPress Post or Page

The manual way to duplicate a post is by creating a new post or page and then copying the content from the old one. However, this wouldn’t copy the post settings like categories, featured images, tags, etc.

The more efficient way to do this is by using the Duplicate Post plugin. Simply install and activate the plugin and then go to Posts » All Posts page.

Clone a post

You will see the option to clone a post or create a new draft.

For more detailed instructions, see our article on how to easily duplicate posts and pages in WordPress with a single click.

48. Allow Users to Submit Posts to Your WordPress Site

Authors on your WordPress site can just log in to their accounts and write posts. But what if you wanted your users to be able to submit posts directly without creating an account?

The best way to do this is by creating a blog post submission form.

You will need to install and activate the WPForms plugin. You will need the pro version of the plugin to access the post-submission addon.

Upon activation, go to WPForms » Addons page to download and activate the post submissions addon.

After that you can go to WPForms » Add New page and then select ‘Blog post submission form’ as your template.

Post submission form

Once you are done editing the form click on the embed button to copy the form embed code. Now you can paste this code in any WordPress post or page to display a blog post submission form.

Posts submitted by users will be stored in your WordPress posts as Pending Review. You can then review, edit and publish them.

For more detailed instructions, take a look at our guide on how to allow users to submit posts to your WordPress site.

49. Turn Off Comment Notification Emails in WordPress

WordPress automatically sends email notifications when someone leaves a comment or when a comment is awaiting moderation. This is exciting when you first start your blog, but it becomes very annoying after a short while.

The good news is that you can easily turn these notifications off. Visit the Settings » Discussion page on your WordPress admin and then scroll down to ‘Email Me Whenever’ section. Uncheck both options and then click on the save changes button.

Disable comment email

50. Change Sender Name in Outgoing WordPress Emails

By default, when WordPress sends an email notification it uses ‘WordPress’ as the sender name. This looks a bit unprofessional, and you may want to change it to a real person or your website title.

The easiest way to do this is by using the WP Mail SMTP plugin. It is the best WordPress SMTP plugin that improves your WordPress email deliverability.

Simply install the WP Mail SMTP plugin and then go to WP Mail SMTP » Settings. From here, you change the sender name in the ‘From Name’ field.

Change sender name for WordPress emails

For a code method and more details, see our guide on how to change the sender name in outgoing WordPress emails.

51. Changing the Author of a WordPress Post

Changing the author of a post is quite straightforward. Simply edit the post and select the new author from the Author drop-down menu under the Summary tab.

Change author

After that, don’t forget to Save or Update the post to store your changes.

On the other hand, if you have disabled the block editor and are using the Classic Editor, then the author option may be hidden on your screen.

You will need to edit the post where you want to change the author name and then click on the Screen Options button at the top right corner of the screen. Check the box next to the ‘Author’ option.

Show author

This will display the author meta box on the post edit screen where you can select a different author for the post.

For more details, check out our article on how to change the author of a post in WordPress.

52. Rearrange Post Edit Screen in WordPress

Sometimes you may feel that categories are located too far down on the post edit screen, or maybe the Featured Image box should be higher.

Many users don’t notice it for a while but all the boxes on the post edit screen are quite flexible. You can click to collapse them and even drag-and-drop them to arrange the screen to your liking.

Editor preferences

This will bring up a popup where you can choose to show / hide panels in the default editor.

To learn more, see our tutorial on how to rearrange the post edit screen in WordPress.

53. Change Number of Posts Shown on Blog Pages

By default, WordPress shows 10 posts on your blog pages and archives. You can change that to any number you want.

You will need to visit the Settings » Reading page and then scroll down to ‘Blog pages show at most’ option. Enter the number of posts you want to display, then click the save changes button.

Blog post numbers

54. Automatically Close Comments on Old Articles

Sometimes you would notice that some very old posts on your site start getting regular spam comments for no apparent reason. One way to deal with this is by closing comments on older articles.

WordPress allows you to automatically turn off comments on old articles. You need to visit the Settings » Discussion page in your admin panel and then scroll down to ‘Other comment settings’ section.

Simply check the box next to ‘Automatically close comments on posts older than X days’ and replace the number with however long you want users to be able to leave comments.

Close comments on old posts

To learn how to deal with spam comments, see these tips to combat comment spam in WordPress.

55. Split Long Posts into Pages

Want to split lengthy posts into pages so that users can easily navigate them without scrolling too much? WordPress makes it super easy, just add the following code where you want to split a post into the next page.

<!––nextpage––>

WordPress will add a page break at this point and the rest of the post will appear on the next page. You can add the same code again when you want to start another page, and so on.

For more detailed instructions see our guide on how to split WordPress posts into multiple pages.

That’s all for now! We hope this article helped you find some new WordPress tips, tricks, and hacks. You may also want to see our ultimate guide to boost WordPress speed and performance.

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.

The post 55+ Most Wanted WordPress Tips, Tricks, and Hacks first appeared on WPBeginner.

How to Edit WooCommerce Pages (No Coding Required)

Do you want to edit WooCommerce pages without writing code?

WooCommerce creates many pages to display products and add cart functionality to your store. Small improvements to these pages can result in higher sales and less cart abandonment for your store.

In this article, we will show you how to easily edit WooCommerce pages to make more sales without any coding skills.

How to Edit WooCommerce Pages

Why Edit WooCommerce Pages for Your Online Store?

WooCommerce creates many pages to display products, shop, account, checkout, and cart features for your online store.

By default, your WordPress theme controls how these pages look. There are a ton of great WooCommerce themes that you can choose from.

However, editing these pages may not be as straightforward as it seems.

For instance, you may not be able to show additional products, add upsell features, change the layout, and more.

This is where SeedProd comes in. It is the ultimate WooCommerce page builder plugin that allows you to use an intuitive drag-and-drop tool to design your WooCommerce pages.

SeedProd website builder

The first thing you need to do is install and activate the SeedProd plugin. For more details, see our tutorial on how to install a WordPress plugin.

For the different methods in this article, we will be using the SeedProd Pro version, as it has the features needed to edit WooCommerce pages.

Upon activation, you need to visit SeedProd » Settings page to enter your plugin license key. You can find this information under your account on the SeedProd website.

Adding a SeedProd license key to WordPress

After entering your license key, you are good to go. You can now edit and create highly optimized WooCommerce pages for your online store.

That being said, let’s take a look at how to edit WooCommerce pages, step by step.

You can click any of the links below to jump to any method you want:

Create a Completely Custom WooCommerce Theme

SeedProd comes with a complete WooCommerce theme builder built-in. This allows you to replace your WooCommerce theme with a custom one of your own.

The advantage of this approach is that you get more flexibility when editing your WooCommerce theme. You can edit any page using a simple drag-and-drop tool.

To get started, simply go to the SeedProd » Setup page and click on the ‘Select a theme for my store’ button next to the ‘Build a WooCommerce Store’ option.

Make a custom WooCommerce theme

Next, the plugin will show you many ready-to-use WooCommerce themes you can use as a starting point.

Simply click on a template to select it.

WooCommerce template selection

Each WooCommerce or WordPress theme is a collection of templates showing different areas of your website or online store.

SeedProd will now generate those templates for your theme and show you a list of them.

Theme templates

You can now take your mouse over to a template and click on the ‘Edit Design’ link to start editing it.

This will launch the SeedProd page builder interface.

Editing shop page for your WooCommerce theme

You can add all the common website building blocks from the left column. To the right, you will see a live preview of the page you are editing.

You can also simply point and click on any item to edit it.

Edit product grid

SeedProd comes with all the WooCommerce blocks that you will need to build a sales-oriented WooCommerce theme.

Once you are done making changes to a template, simply click on the ‘Save’ button to store your changes.

Save your WooCommerce theme template

Just repeat the process to edit other templates in your custom WooCommerce theme.

Once you have finished editing all the pages, go to the SeedProd » Theme Builder page and toggle the ‘Enable SeedProd Theme’ switch.

Enable SeedProd theme

Your custom WooCommerce theme will now replace your existing WooCommerce theme.

Now, you can visit your WordPress website to see it in action.

Theme preview

To learn more, see our complete tutorial on how to create a custom WordPress theme without coding.

On the other hand, if you want to keep using your existing WooCommerce theme and only edit certain parts of your website, then continue reading.

Customize the WooCommerce Checkout Page

The checkout page in any eCommerce store is one of the most significant steps in the customer journey.

By default, WooCommerce comes with a plain checkout experience, which is not optimized for sales and conversions.

Plain checkout experience

Small edits to the checkout page can help you increase sales and reduce cart abandonment on your store.

For example, you can show related products with an ‘Add to Cart’ button on the checkout page so that users may see something else they want to purchase, too.

To create your custom checkout page, simply go to SeedProd » Landing Pages and click on ‘Add New Landing Page’.

Add new landing page

Next, you will be asked to choose a template for your page.

You can choose one of the templates on the screen and edit it to create a checkout page, or you can start with a blank template.

Choose a blank template

We will be using the blank template for this tutorial, but you can choose any of them that you like.

Next, you will need to provide a title and URL for the page. You can use anything that helps you easily identify this page.

page name and url

Click on the ‘Save and Start Editing the Page’ button to continue.

This will launch SeedProd’s page builder interface, where you can simply drag and drop blocks to build your page layout.

Page builder launched

First, you should add a header and then customize it with your own branding.

SeedProd comes with sections, which are collections of blocks that are often used together. To add a header section, click on the ‘Sections’ tab and then select the ‘Header’ category.

Add header section

Next, take your mouse to a header and click the ‘Add (+)’ button to insert it into your page.

You can now edit the header section by simply clicking on each block and replacing it with your own logo, menu, and call to action.

Edit header page

Once you are happy with the header, you need to add a two-column layout.

You can use this two-column layout to display the checkout form and upsell products, testimonials, and other elements.

Choose layout

After that, you need to add the Checkout block from the left-hand menu.

Add it to the left column, which is wider and will appear first on mobile devices.

Add checkout block

Next, you need to add blocks to the right column. This is the area you can use to convince users to complete the purchase.

You can add a testimonial block here or show your most popular products.

Upsell products

Here are a few more things you can add to your checkout page to improve it for higher conversions:

  • Trust badges like secure payment badges provided by PayPal and Stripe
  • More social proof, like real-time customer activity
  • The Business Reviews block in SeedProd to display Google reviews

Once you have finished editing your checkout page, don’t forget to click the arrow beside ‘Save’ and then click on ‘Publish’ in the upper-right corner of the screen.

Save and publish

Next, you need to tell WooCommerce to start using your custom checkout page for all customers.

Go to the WooCommerce » Settings page and switch to the ‘Advanced’ tab.

Use your custom checkout page

Under the ‘Page Setup’ tab, select your custom checkout page for the ‘Checkout page’ option. Don’t forget to click on the ‘Save changes’ button to store your settings.

You can now go to your store in a new browser tab and try the new checkout experience by adding a product to your cart.

Preview your custom checkout page

For more details, you can see our tutorial on customizing the WooCommerce checkout page.

Bonus Tip: Want to see how your new cart page is performing? See our tutorial on WordPress conversion tracking for beginners to track all your conversions.

Customize the WooCommerce Checkout Form

The checkout page is one of the areas where many users abandon carts.

The easiest way to ensure users complete their purchases is by offering a better checkout experience.

This is where FunnelKit can help. It is one of the best sales funnel builders for WooCommerce that enables you to optimize funnels, checkout pages, cart experience, and more.

FunnelKit Automations

It has dozens of templates, a funnel builder wizard, and drag-and-drop editing for your cart and checkout pages.

First, you need to sign up for a FunnelKit plan by visiting their website.

Note: You will need at least the Plus plan to unlock sales funnels, upsells, order bumps, and other features.

After that, you need to install and activate the FunnelKit Builder and FunnelKit Builder Pro plugins. You can find them under your account on the FunnelKit website.

FunnelKit plugins

Need help? See our tutorial on how to install a WordPress plugin.

Upon activation, you will be asked to provide your plugin license keys. You can find them on the same Downloads page under your account on the FunnelKit website.

Once you have finished, you are ready to customize the WooCommerce checkout form.

Simply go to the FunnelKit » Store Checkout page in the WordPress admin dashboard and click on the ‘Create Store Checkout’ button.

Create a store checkout

On the next screen, you need to first choose your editor interface.

FunnelKit templates can be edited with the default Gutenberg editor, Elementor, Divi, Oxygen, or any other page builder by using shortcodes.

After that, you need to choose a template. There are dozens of beautiful templates to choose from. Just click on the ‘Preview’ button to see a live preview of the template.

You can choose between a single-step or multi-step checkout page in the preview. After that, simply click on the ‘Import This Funnel’ button at the top.

Funnel Importer

Next, you will be asked to enter a name for your funnel.

You can call it anything that helps you identify it later. Then, click on the ‘OK’ button to continue.

Give your custom cart a name

FunnelKit will now create your custom checkout page.

After that, you will see the page dashboard. From here, you can edit your checkout page, add more steps, or add an order bump.

Editing custom checkout page

Editing a page will open it in the editor you chose earlier.

For this tutorial, we chose Gutenberg. Each item on the checkout page is a block that you can edit by simply clicking to select it.

Checkout page editor

You can also add new blocks by clicking on the ‘Add Block’ button.

Once you have finished making the changes, don’t forget to click on the ‘Update’ button.

This will bring you back to the Checkout page dashboard. From here, you need to switch to the ‘Fields’ tab.

Fields editor

This is where you can edit the checkout form fields. In this example, we are using a two-step checkout form. This allows you to capture the contact information before the payment.

You can also add new form fields from the right column. By default, the plugin shows the commonly used checkout fields.

However, you can click on the ‘Add New Field’ button to add a custom form field.

Add new custom field

This will show a popup where you can choose the field type, provide a meta key, and enter a label.

You can also make the field ‘required’ and assign it to the checkout or thank you page.

Create a custom checkout field

Don’t forget to click on the ‘Save Changes’ button to store your form settings.

FunnelKit comes with a bunch of optimizations that you can add to your checkout page for a more frictionless experience.

Just switch to the ‘Optimizations’ page, and you will see a list of optimizations that you can apply to the checkout page.

Checkout page optimizations

Simply click on an optimization to configure it, then click on the ‘Save Changes’ button to store your changes.

Next, switch to the ‘Settings’ tab to enable Analytics, Facebook pixel, custom scripts, or CSS in your checkout funnel.

Funnel settings

Don’t forget to click on the ‘Save Changes’ button to apply your changes.

Finally, you need to click on the ‘Draft’ button next to the Checkout page title and change it to ‘Publish’. This will replace your existing checkout page with the custom funnel you have just created.

Publish Checkout page

You can now visit your store in a new browser tab to test the custom checkout experience you have created.

This is how it looked on our demo website.

Previewing custom checkout page

Add One-Page Checkout in WooCommerce

FunnelKit also allows you to create a one-page checkout experience.

You need to visit the FunnelKit » Store Checkout page and click on ‘Create Store Checkout’.

Create a store checkout

In the template selection, simply click on the ‘One-Step’ option at the top.

After that, click on the ‘Import This Funnel’ button to continue.

One-Step checkout

You can then continue editing your template in your preferred editor. See the previous section of this tutorial for more detailed instructions.

Add a Slide-In Cart to WooCommerce

Most WooCommerce themes come with a separate cart page. This cart experience adds friction to the shopping and checkout experiences.

If users need to adjust the product quality or remove items from the cart, they have to leave the page they are currently viewing to update the cart.

This can be fixed by adding a slide-in cart in WooCommerce.

A slide-in cart shows a cart button on the screen. Clicking on the button displays a slide-in menu with products the user has added to the cart.

Slide-in Cart

Users can now edit and update the cart without leaving the page.

FunnelKit has a beautiful slide-in cart feature that integrates seamlessly with your online store. You can even use it to upsell products, incentivize checkout, offer discounts, and more.

First, you need to visit the FunnelKit website and sign up for an account.

Note: You will need at least the Plus plan to access the slide-in cart features.

After signup, go to your account on the FunnelKit website to download the FunnelKit Cart plugin.

FunnelKit cart

Next, you need to install and activate the plugin. For more details, see our tutorial on how to install a WordPress plugin.

Once you have activated the plugin, you must go to the FunnelKit » Cart page to configure the slide-in cart settings.

Cart settings

From here, you will see many options to your left and a live preview of how your slide-in cart will look.

FunnelKit offers a ton of customization options. For instance, you can choose from different styles, select cart icons, change button text, and more.

You can also add upsell products or cross-sell products, offer discounts, and make the cart experience much more appealing.

Additional cart settings

To publish your changes, don’t forget to click on the ‘Save’ button.

You can now visit your website to test the slide-in cart in your live store.

Customize the WooCommerce Cart Page

WooCommerce has a default cart page allowing users to continue to the checkout page.

By default, it shows the products customers have added to their cart. However, research shows that more than 70% of customers leave an online store without completing the purchase.

WooCommerce themes often come with a boring cart page with no optimization for conversions.

WooCommerce default cart experience

By customizing your WooCommerce cart page, you can easily reduce cart abandonment and improve sales.

To create your custom checkout page, simply go to the SeedProd » Landing Pages and click on ‘Add New Landing Page’.

Add new landing page

Next, you will be asked to choose a template for your page.

You can choose one of the templates on the screen and edit it to create a cart page, or you can start with a blank template.

Choose a blank template

We’ll use the blank template for this tutorial.

Next, you will need to provide a title and URL for the page. You can use anything that helps you easily identify this page.

Cart page tiitle and URL

This will launch the SeedProd builder interface.

You can start by switching to the ‘Sections’ tab and adding a header to your blank template.

Add header section

After that, feel free to point and click to edit the header area to your liking.

Below that, you need to add a two-column layout, which you will use to add other cart page blocks.

Add layout columns

Next, add the ‘Cart’ block to the right column.

Now, since your cart is currently empty, it will not show any products. Go to your store and add a few products to your cart and then reload the SeedProd page builder.

Add the cart block

After that, you can add other elements to improve your cart page.

For instance, you can start by adding testimonials or add a countdown timer to trigger the FOMO effect.

Upsell and create FOMO

Feel free to play around by adding different blocks and tweaking colors and width.

Once you have finished editing, don’t forget to click on ‘Save and Publish’ in the top-right of the screen.

Save and publish

Next, you need to tell WooCommerce to start using your custom cart page for all customers.

Go to the WooCommerce » Settings page and switch to the ‘Advanced’ tab.

Use custom cart page

You can now visit your online store in a new browser tab.

Start adding a few products, and then head over to the cart page to see your new cart page in action.

Cart page preview

Edit WooCommerce Product Pages

WooCommerce themes use the same template to display all products on your website.

However, you may want to promote some products more than others. The most you can do to distinguish important products is to make them featured products.

SeedProd allows you to create custom product pages. You can use a well-designed template tailor-made for higher conversions and then simply fill it with your product information.

To get started, simply go to the SeedProd » Landing Pages and then click on ‘Add New Landing Page’.

Add new landing page

Next, you will be asked to choose a template for your page.

You can choose one of the templates on the screen and edit it to create a product page. You will find several templated optimized for conversions under the ‘Sales’ tab.

Choose a template to create a product page

Simply click to select a template and continue.

Next, you will be asked to provide a page title and URL. You can use the product name as the title and URL.

Product page title and URL

Click on the ‘Save and Start Editing the Page’ button to continue.

This will launch the SeedProd page builder interface with your selected template. You can simply point and click on any item on the page to edit it.

Editing product page

You can start by replacing the header items, such as the logo, navigation menu, and call-to-action button, with your own.

After that, you can replace images with your product images and edit the text as necessary.

Add your product details with add to cart button

Finally, you can replace the call to action with the Add to Cart block.

After that, you need to enter the product ID in the Add to Cart block settings. You can also change the button text, as well as add subtext, color, and shift alignment.

Edit cart bundle

To find a product ID, you need to go to the Products » All Products page in the WordPress admin area in a separate browser tab.

Take the mouse over to the product that you want to promote, and the product ID will appear along with other links.

Finding a product ID in WooCommerce

To make your product page more effective, you can try these tips:

  • Add high-quality product images with the zoom effect so that users can clearly examine the product.
  • Under your main call to action, you can create different rows highlighting product features and providing more information to the customers.
  • Use social proof to trigger the FOMO effect.

Once you are done editing your product page, don’t forget to click on the ‘Save and Publish’ button at the top.

Save and publissh product page

Once published, you can view your product page by clicking on the ‘Preview’ button.

This will show the live product page on your website that you can now start promoting.

Product page preview

For more details and bonus tips, see our tutorial on customizing WooCommerce product pages.

Customize the Shop Page for Your WooCommerce Store

WooCommerce allows you to easily display your products on the shop page. It is basically a page with your products displayed in a grid layout.

The shop template in most WooCommerce themes is boring and not optimized for sales and conversions. On top of that, there are usually no or very few options to customize it.

SeedProd allows you to create and customize a WooCommerce shop page easily. You can choose your own layout and design and optimize this page for higher conversions.

To get started, simply go to the SeedProd » Landing Pages and then click on the ‘Add New Landing Page’ button.

Add new landing page

Next, you will be asked to choose a template for your page.

You can choose one of the templates on the screen and edit it to create your shop page.

Choose a template to create a product page

Simply click to select a template and continue.

Next, you will be asked to provide a page title and URL. You can use something like Shop, Store, or Storefront to indicate that it is the main shop page.

Shop page

Click on the ‘Save and Start Editing the Page’ button to continue.

This will launch the SeedProd page builder interface with your selected template. You can simply point and click on any item on the page to edit it.

Editing product page

You can start by replacing the header items, such as the logo, navigation menu, and call-to-action button, with your own.

After that, you can add a hero section at the top with a large image and your main call to action.

Shop header

Below that, you can use WooCommerce blocks to display your products.

You can choose from recent, featured, best-selling, top-rated, and sale products.

Display products

After adding a product block, you can also customize how it looks.

SeedProd allows you to choose the number of products, sorting options, columns, and more.

Product display options

You can further optimize this page by adding more text, special offers, banners, an FAQ section, and more.

Once you are done editing, don’t forget to click on ‘Save and Publish’ at the top.

Save and publissh product page

After saving your page, click the ‘Preview’ button to see it in action.

SeedProd will open the page in a new browser tab.

Shop page preview

You can now replace links to the Shop page in your navigation menu with your custom shop page.

Customize WooCommerce Thank You Page

The WooCommerce ‘Thank You’ page appears when a customer completes a purchase. By default, WooCommerce will only show them their order details on this page.

Default thank you page in WooCommerce

That doesn’t provide customers with more options to explore. It is kind of a dead end and a missed opportunity for sales and conversions.

Luckily, you can fix that with SeedProd by creating a custom thank you page.

To get started, simply go to the SeedProd » Landing Pages and then click on the ‘Add New Landing Page’ button.

Add new landing page

Next, you will be asked to choose a template for your page.

Switch to the ‘Thank You’ tab, and you will find a bunch of thank you page templates. You can choose one of them, or you can even start with a blank template.

Thank you page templates

Next, you will be asked to choose a title and URL for your page.

You can use ‘Thank You’ or any other meaningful title for your page.

Thank you page title

Click on the ‘Save and Start Editing the Page’ button to continue.

This will launch the SeedProd page builder interface, where you will see a live preview of your template. You can simply point and click to edit any item in the preview or add new blocks from the left column.

Edit thank you page

You can now use this opportunity to promote your email list or upsell products by adding WooCommerce product grid blocks.

Feel free to experiment with different headings, text copy, and products to create an effective Thank You page.

Once finished, don’t forget to click on the ‘Save and Publish’ button in the top right corner of the screen.

Save and publissh product page

Your custom thank you page is now live. However, you still need to tell WooCommerce to use this page as your default Thank You page.

To do that, you will need to install and activate the Thanks Redirect for WooCommerce plugin. For more details, see our tutorial on how to install a WordPress plugin.

Upon activation, go to the WooCommerce » Settings page and click the ‘Products’ tab.

Redirect thank you page in WooCommerce

From here, you need to check the ‘Enable Global Thanks Redirect’ option. After that, you will see a field labeled ‘Thanks Redirect URL.’

Paste your new WooCommerce Thank You page URL into this box, then click the ‘Save Changes’ button.

Now when customers complete a purchase, they will see your highly optimized custom Thank You page. They will be far more likely to click and search the rest of your store than if you had stayed with the default.

Custom thank you page in WooCommerce

We hope this article helped you learn how to easily edit WooCommerce pages without writing code. You may also want to see our complete WooCommerce SEO guide or our expert picks for the best WooCommerce sales funnel plugins to boost your conversions.

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.

The post How to Edit WooCommerce Pages (No Coding Required) first appeared on WPBeginner.

How to Customize Colors on Your WordPress Website

Do you want to customize colors on your WordPress website?

Colors play a vital role in making your website aesthetically pleasing and establishing its brand identity. Luckily, WordPress makes it super easy to customize colors across your entire site.

In this article, we will show you how to easily customize colors on your WordPress website, including background, header, text, and link colors.

Customizing colors on WordPress website

What Is Color Theory?

Before you can start customizing colors on your WordPress website, it is important to understand color theory.

Color theory is the study of colors and how they work together. It helps designers create color combinations that complement each other.

When designing a website, you need to choose colors that look good together. This will make your website look more attractive to your visitors, which can improve user experience and increase engagement.

Different colors can create different emotions and feelings in people, and color theory can help you choose the right combination for your website.

For instance, red is often used to represent food and restaurants. On the other hand, blue is usually used on banking and financial websites.

That is because red can create feelings of warmth, energy, and passion, whereas blue signifies trust, security, and calmness.

Color theory

Apart from complementing colors, you can also use color contrast to draw attention to important areas of your WordPress blog.

This allows you to make your content more readable, establish a strong brand identity, and create a specific mood on the website.

What Are WordPress Themes, and Can You Change Theme Colors?

WordPress themes control how your website looks to the user. A typical WordPress theme is a set of pre-designed templates you install on your website to change its appearance and layout.

Themes make your website more attractive, easier to use, and increase engagement.

Themes

You can also create your own themes from scratch using plugins like SeedProd and the Thrive Theme Builder.

With WordPress, you can easily customize themes and change their background, font, button, and link colors.

However, keep in mind that some themes come with pre-defined color choices, while others offer more flexibility to choose your own.

That being said, let’s see how you can easily customize colors in WordPress.

How to Customize Colors in WordPress

You can customize colors in WordPress using many different methods, including the theme customizer, the full site editor, custom CSS, page builder plugins, and more.

Change Colors Using the Theme Customizer

It is super easy to change colors using the built-in WordPress theme customizer.

First, visit the Appearance » Customize page from the admin sidebar.

Note: If you cannot find the ‘Customize’ tab in your WordPress dashboard, then this means that you are using a block theme. Scroll down to the next section of this tutorial to find out how to change colors in a block theme.

For this tutorial, we will be using the default Twenty Twenty-One theme.

Remember that the theme customizer may look different depending on the theme you are currently using.

Click on the Color and dark mode panel in the theme customizer

For example, the Twenty Twenty-One theme comes with a ‘Colors and Dark Mode’ panel that allows users to select a background color and customize dark mode.

After opening the panel, simply click on the ‘Select Color’ option. This will open up the Color Picker, where you can choose your preferred background color.

Once you are done, don’t forget to click the ‘Publish’ button at the top to save your changes and make them live on your website.

Change the bacground color in the theme customizer

Change Colors in the Full Site Editor

If you are using a block-based theme, then you won’t have access to the theme customizer. However, you can use the full site editor (FSE) to change colors on your website.

First, head to the Appearance » Editor screen from the admin sidebar to launch the full site editor.

Now, you have to click on the ‘Styles’ icon in the top-right corner of the screen.

Click on the Styles icon and choose the Colors panel

This will open the ‘Styles’ column, where you need to click on the ‘Colors’ panel.

You can change the theme’s background, text, link, heading, and button colors from here.

Open Styles panel to save changes

Once you are done, click the ‘Save’ button to store your settings.

Change Colors Using Custom CSS

CSS is a language that you can use to change the visual appearance of your website, including its colors. You can save custom CSS in your theme settings to apply your customizations to your entire site.

However, the custom CSS code will no longer apply if you switch themes on your website or update your existing theme.

That’s why we recommend using the WPCode plugin, which is the best WordPress code snippets plugin on the market. It is the easiest way to add custom CSS code, and it will allow you to safely customize colors on your WordPress website.

First, you will need to install and activate the WPCode plugin. For more instructions, please see our beginner’s guide on how to install a WordPress plugin.

Note: There is also a free version of WPCode that you can use. However, we recommend upgrading to a paid plan to unlock the full potential of the plugin.

Once you have activated WPCode, you need to visit the Code Snippets » + Add Snippets page from the admin sidebar.

Simply click the ‘Use snippet’ button under the ‘Add Your Custom Code (New Snippet)’ heading.

Add new snippet

Once you are on the ‘Create Custom Snippet’ page, you can start by typing a name for your code.

After that, just select ‘CSS Snippet’ as the ‘Code Type’ from the dropdown menu.

Choose CSS Snippet as the code type

Next, you must add the custom CSS code in the ‘Code Preview’ box.

For this section, we are adding custom CSS code that changes the text color on the website:

p   { color:#990000;  }
Add CSS code

Once you have done that, scroll down to the ‘Insertion’ section.

Here, you can choose the ‘Auto Insert’ option if you want the code to be executed automatically upon activation.

You can also add a shortcode to specific WordPress pages or posts.

Choose an insertion method

Once you are done, simply scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’.

Finally, you need to click the ‘Save Snippet’ button to apply the CSS code to your website.

Activate and save the CSS Snippet

Change Colors Using SeedProd

You can also customize colors using the SeedProd plugin.

It is the best WordPress page builder on the market that allows you to create themes from scratch without using any code.

First, you need to install and activate the SeedProd plugin. For more details, you can read our beginner’s guide on how to install a WordPress plugin.

Upon activation, head to the SeedProd » Theme Builder page from the WordPress admin sidebar.

From here, click on the ‘Theme Template Kits’ button at the top.

Note: If you want to create your own theme from scratch, then you will need to click on the ‘+ Add New Theme Template’ button instead.

Click the Theme Template Kit button to create a theme

This will take you to the ‘Theme Template Kit Chooser’ page. Here, you can choose from any of the pre-made theme templates offered by SeedProd.

For more details, see our tutorial on how to easily create a WordPress theme without any code.

Choose a theme template

After choosing a theme, you will be redirected to the ‘Theme Templates’ page.

Here, you need to toggle the ‘Enable SeedProd Theme’ switch to ‘Yes’ to activate the theme.

Now, you must click the ‘Edit Design’ link under any theme page to open up the drag-and-drop editor.

Toggle the switch to enable the theme and click on Edit Design link to open editor

Once you are there, click the gear icon at the bottom of the left column.

This will direct you to the ‘Global CSS’ settings.

Click the gear icon to open up the Global CSS page

From here, you can customize the colors of your website background, text, buttons, links, and more.

Once you are happy with your choices, click on the ‘Save’ button to store your settings.

Customize colors on the Global Settings page

How to Change the Background Color in WordPress

All WordPress themes come with a default background color. However, you can easily change it to personalize your website and improve its readability.

If you are using a block theme, then you will have to change the background color using the full site editor.

First, you must head to the Appearance » Editor screen from the admin sidebar.

Once the full site editor has launched, click on the ‘Styles’ icon in the top-right corner of the screen.

After that, simply click on the ‘Colors’ panel to open up additional settings

Click on the Styles icon and choose the Colors panel

In the ‘Colors’ panel, you can now manage the default color of different elements on your website.

Here, you need to click on the ‘Background’ option under the ‘Elements’ section.

Choose the Background option in the Colors panel

Once the ‘Background’ panel has expanded, you can choose your website background color from here.

All WordPress themes offer a number of default website colors that you can choose from.

However, if you want to use a custom color, then you need to click on the Custom Color tool.

This will open up the Color Picker, where you can select a color of your choice.

Choose a background color from the Color Picker

You can also use gradient colors for your website background.

For this, you will first need to switch to the ‘Gradient’ tab at the top.

Next, you can choose a default gradient from the theme or select your own gradient colors with the help of the Color Picker tool.

Create a gradient background color

Once you are done, don’t forget to click on the ‘Save’ button to store your settings.

You can also change your website’s background using the theme customizer, SeedProd, and custom CSS.

For more detailed instructions, you may want to see our guide on how to change the background color in WordPress.

How to Change the Header Color in WordPress

Many WordPress themes come with a built-in header at the top of the page. It usually contains important page links, social icons, CTAs, and more.

The WPBeginner Header

If you are using a block theme, then you can easily customize the WordPress header using the full site editor.

First, you need to visit the Appearance » Editor screen from the admin sidebar to launch the full site editor. Once there, select the ‘Header’ template at the top by double-clicking on it.

From here, simply scroll down to the ‘Color’ section and click on the ‘Background’ option.

Double click the Header block to open up its settings in the right column

This will open a popup where you can choose a default color for your header.

You can also select a custom color by opening the Color Picker tool.

Choose a header color

To customize your header using a color gradient, you need to switch to the ‘Gradient’ tab.

After that, you can choose a default gradient option or customize your own using the Color Picker.

Create a gradient header

Finally, click on the ‘Save’ button to store your settings.

If you want to change the header color using the theme customizer or additional CSS, then you may want to read our beginner’s guide on how to customize your WordPress header.

How to Change the Text Color in WordPress

Changing the text color can help improve the readability of your WordPress blog.

If you are using a block theme, then you will have to change the text color using the full site editor.

You can start by visiting the Appearance » Editor screen from the admin sidebar. This will launch the full site editor, where you must click the ‘Styles’ icon in the top-right corner.

Go to the Colors panel from the full site editor

Next, you need to click on the ‘Colors’ panel to access the additional settings.

Once you are there, go ahead and click on the ‘Text’ option under the ‘Elements’ section.

Click on the text option in the Colors panel

Once the text color settings have opened, you will be able to see a number of text colors under the ‘Default’ section.

Alternatively, you can also use a custom text color by clicking on the Custom Color tool and opening up the Color Picker.

Change text color using color picker

Once you have made your choice, simply click on the ‘Save’ button to store the changes.

Bonus Tip: You can use the WebAIM Contrast Checker tool to check if your background and text color work together. The tool can help you improve text readability on your website.

Check text and background color contrast

To customize text color using CSS, the theme customizer, or SeedProd, you may want to see our guide on how to change the text color in WordPress.

How to Change the Text Selection Color in WordPress

When a visitor selects text on your website, it will show a background color. The default color is blue.

Text selection color

However, sometimes the color may not blend well with your WordPress theme, and you might want to change it.

Adding CSS code to your theme files can easily change the text selection color. However, keep in mind that switching to another theme or updating your current theme will make the CSS code disappear.

That’s why we recommend using the WPCode plugin, which is the best WordPress code snippets plugin on the market.

First, you need to install and activate the WPCode plugin. For more instructions, please see our guide on how to install a WordPress plugin.

Upon activation, head over to the Code Snippets » + Add Snippets page from the admin sidebar.

Then, simply click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ heading.

Add new snippet

Once you are on the ‘Create Custom Snippet’ page, you can start by typing a name for your code snippet.

After that, you must choose ‘CSS Snippet’ as the ‘Code Type’ from the dropdown menu on the right.

Choose CSS Snippet as code type for the text selection color snippet

Now, go ahead and copy and paste the following CSS code into the ‘Code Preview’ box.

::-moz-selection {
    background-color: #ff6200;
    color: #fff;
}
 
::selection {
    background-color: #ff6200;
    color: #fff;
}

You can change the text selection color by substituting the hex code next to the ‘background-color’ in the CSS snippet.

Copy and paste the text color selection code snippet

Once you have added the code, scroll down to the ‘Insertion’ section.

Here, you need to choose the ‘Auto Insert’ method to execute the code automatically upon activation.

Choose an insertion method

After that, scroll back to the top and toggle the ‘Inactive’ switch to ‘Active’.

Finally, go ahead and click the ‘Save Snippet’ button to store your changes.

Activate and save the text selection color snippet

Now, you can visit your website to check the text selection color.

You can also change the text selection color using the theme customizer or a plugin. For more details, please see our tutorial on how to change the default text selection color in WordPress.

Text selection color preview

You can easily change the link color in WordPress using the full site editor or custom CSS.

If you are using a block theme, then head to the Appearance » Editor screen from the admin sidebar.

Once the full site editor has launched, you must click on the ‘Styles’ icon in the top-right corner.

Go to the Colors panel from the full site editor

Next, click on the ‘Colors’ panel in the right column to see additional settings.

Once you are there, simply click on the ‘Links’ panel.

Click on the Links panel

This will launch the link color settings, and you will see multiple default link colors displayed in the right column.

However, you can also use a custom link color by clicking on the Custom Color tool to open the Color Picker.

Use the color picker for link color

You can also change the hover link color using the FSE. This means the link color will change when someone hovers their mouse over it.

First, you will need to switch to the ‘Hover’ tab from the top.

Once there, you can choose a default or custom color to change the hover link color.

Change the hover link color

Finally, click on the ‘Save’ button to store your settings.

For more detailed instructions, you may want to see our guide on how to change the link color in WordPress.

How to Change the Admin Color Scheme in WordPress

You can also change the admin color scheme in WordPress if you want. This method can be helpful if you want the admin dashboard to match your website’s branding or use your favorite colors.

However, keep in mind that changing the color scheme of the WordPress dashboard will not affect the visible part of your website.

To change the admin color scheme, simply visit the Users » Profile page from the admin sidebar.

You will see multiple color schemes next to the ‘Admin Color Scheme’ option.

Choose the one you prefer and then click the ‘Update Profile’ button at the bottom of the page to save your changes.

Change the color scheme of the admin dashboard

For more detailed instructions, please see our beginner’s guide on how to change the admin color scheme in WordPress.

We hope this article helped you learn how to customize colors on your WordPress website. You may also want to see our ultimate WordPress SEO guide and our article on how to choose a perfect color scheme for your WordPress website.

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.

The post How to Customize Colors on Your WordPress Website first appeared on WPBeginner.

How to Setup All in One SEO for WordPress Correctly (Ultimate Guide)

Do you want to install and set up All in One SEO for WordPress?

All in One SEO (AIOSEO) for WordPress is the best WordPress SEO plugin that allows you to easily optimize your WordPress website for search engines and social media platforms.

In this article, we will show you how to properly install and set up All in One SEO for WordPress to improve your SEO rankings.

How to Setup All in One SEO for WordPress Correctly (Ultimate Guide)

Why Use All in One SEO for WordPress?

All in One SEO for WordPress is the best WordPress SEO plugin on the market, used by over 3 million websites.

It is easy to use, and you don’t need to be an SEO expert or have any special skills.

At the same time, it is incredibly powerful and allows you to make your WordPress website rank higher in search engines and get more free traffic from social media platforms like Facebook and Twitter.

By default, WordPress provides an SEO-friendly environment, but there are still many things that you can do to improve your website’s SEO rankings.

These include adding meta tags, generating XML sitemaps, adding schema markup, optimizing social sharing, and more.

All in One SEO for WordPress helps you do all these things with an easy-to-use interface that blends into your WordPress dashboard.

All in One SEO dashboard in WordPress

It also shows a TruSEO score for your posts and pages, which helps you create more search engine-friendly content. Plus, you can do a complete sitewide SEO audit with the click of a button.

That being said, let’s take a look at how to easily install and set up All in One SEO for WordPress. We will walk you through the complete setup, step by step.

Here is what we will cover in this guide:

Ready? Let’s get started!

Video Tutorial

If you’d prefer written instructions, then just keep reading.

Installing and Setting Up All in One SEO for WordPress

The first thing you need to do is install and activate the All in One SEO for WordPress plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Note: To demonstrate all the features of this power SEO plugin, we are using the Pro version. However, you can also download the free version of AIOSEO from WordPress.org.

Upon activation, the plugin will automatically launch the setup wizard.

You need to click on the ‘Let’s Get Started’ button to continue.

AIOSEO Setup Wizard

On the next screen, you will be asked to choose your website category or type.

For instance, you can pick if your website is primarily a blog, a news website, an online store, a small business, or something else.

AIOSEO set up wizard - website category

For the sake of this tutorial, we will set it up as a blog.

Below that, you can fill in the homepage SEO title and description. The SEO meta title and description are used by search engines, so it is important to use your main keywords.

Homepage title and description

You will notice the smart tags options here. These tags allow you to dynamically generate text for your SEO meta title and description. You can also just manually enter the title and description that you want to use.

Note: You can always change these settings later, so don’t worry about missing something.

Now, you can click on the ‘Save and Continue’ button to move on to the next step.

On the next page, you will be asked whether you want to set it up as a person or an organization. For instance, if you run a personal blog, then you may want to choose a person.

Otherwise, you would select an organization and enter your organization name and business phone number. If you don’t have a business phone number yet, then you can leave it blank and add it later.

Fill website details for All in One SEO

Below that, you need to provide a business logo and a default social sharing image.

A default social sharing image will be used when someone shares a link from your website and if that page doesn’t have a specific featured image set for it.

AIOSEO Wizard: Add a Logo and Social Image

If you scroll down a little, then you will see the social profile section. This is where you will add social profile URLs associated with your website.

The business logo and social profiles are important elements that Google and other search engines use for their Knowledge Panels.

Adding social media profiles

Once you have completed all the fields that you can, just click on the ‘Save and Continue’ button to move on to the next step.

Next, you will be asked to turn on SEO features. The essential SEO features like XML Sitemaps and Optimized Search Appearance are already turned on. You can choose other features you want to enable.

Turn on SEO features

If you are unsure, then you can leave the default options and move on to the next step.

Next, you will see the Search Appearance screen. The plugin will show you a snippet preview of how your site will look in the search results. You can click on it to change the homepage title and meta description.

All in One SEO wizard - Search Appearance

By default, the plugin will use the smart tags to display your site title, separator, and site tagline. You can customize these by clicking on the ‘Google Snippet Preview’.

Your goal should be to use your main keywords in the site’s title and description. You can also change these later from the plugin settings.

Below that, you will see advanced options. You can configure them to your own needs.

Choose advanced site search appearance options

The first option is to choose whether your site is live or under construction. If you don’t want search engines to list your website right now, then you can choose ‘Under Construction’.

The next option is to include all post types (such as posts, pages, and products) in search results. If you are unsure, then keep it turned on for all post types.

Next, you need to choose if you have a multi-author or a single-author blog. If you have a single-author WordPress blog, then you need to select this option to avoid duplicate content.

The redirect attachment pages option is turned on by default. Attachment pages are low text pages, and it is highly recommended to redirect them because it will improve your overall SEO score.

Click on the ‘Save and Continue’ button to move on to the next step.

Finally, if you are using the PRO features of the plugin, then you will be asked to enter your license key. You can find this information in your account on the All in One SEO for WordPress website.

Enter your license key

After entering your license key, you will see the Congratulations page, letting you know that you have reached the final page of the All in One SEO setup wizard.

You can click on the ‘Finish Setup’ button to save your settings and exit the wizard.

Finish All in One SEO Setup Wizard

Congratulations, you have successfully installed and set up the All in One SEO for WordPress plugin on your website. You are now ready to take full advantage of this incredibly powerful SEO tool to grow your business.

In the next few steps, we will walk you through important SEO features and how to use them to grow your website.

Optimizing Your Website Posts and Pages for SEO Using AIOSEO

Optimizing your blog posts for SEO is a regular task and a very important part of creating content on your website.

All in One SEO for WordPress shows a TruSEO score for each of your blog posts and pages. This includes practical tips on improving that score and optimizing your posts for better performance in search results.

Simply edit any post or page on your website and scroll down to the ‘AIOSEO Settings’ section below the content editor.

AIOSEO settings section for a single post or page

From here, you will see a snippet preview of how that particular post or page will appear in search results. Below that, you can enter the SEO meta title and description.

AIOSEO can automatically generate the SEO title and description for you. You can also manually enter it for each article, which will allow you to get creative and write catchy descriptions for your articles.

Just make sure that your title and description fields are using the main focus keyphrase for your post or page.

A focus keyphrase is the main keyword or phrase that you want to target. This is the phrase that your users are most likely to type into search engines to look for the information that you have in your article.

Add focus keyword for your post or page

Adding the focus keyphrase does not automatically improve your SEO. However, All in One SEO helps you optimize your content for the focus keyphrase using the content analysis feature. More on this later.

Next, you need to switch to the ‘Social’ tab under the AIOSEO settings. This is where you can control how this post or page will appear on social media platforms with a preview of Facebook and Twitter.

Social settings for your post or page

From here, you can choose a different variation of title and description. You can also pick which image you want to use when a link is shared.

This ensures that your social media images are not broken, and you can choose the perfect image to appear with your links.

We will talk about the ‘Schema’ tab later in this article.

Using Content Analyzer for TruSEO Score in WordPress

One of the coolest features of All in One SEO is the content analysis and the TruSEO score. You can see them at the bottom of the ‘AIOSEO Settings’ section and also by clicking on the AIOSEO button in the top right corner of the screen.

AIOSEO - TruSEO score and content analysis

The content analysis feature looks for a detailed set of indicators to give your content an SEO score. This allows you to have a handy SEO checklist that you can go through when creating content for your website.

You can expand different sections to view the checks and recommendations. AIOSEO will give you details about each recommendation that needs your attention and tell you how to fix it.

Recommendations in AIOSEO

For more details, see our tips on optimizing your blog posts for SEO.

Using Headline Analyzer to Optimize Title SEO in WordPress

Your post titles also play an important role in SEO. You can use All in One SEO’s Headline Analyzer to create headlines that get more clicks on search engine results pages.

Simply click the ‘H’ button at the top of the content editor to get started.

AIOSEO SEO Headline Analyzer

Your title will be given a score, and you should aim for a score of at least 70.

Below that, you will see different sections with tips on how to improve your headline. There are sections for word balance, sentiment, headline type, character count, and word count.

You can expand these sections to see actionable tips and recommendations on how to improve your post’s SEO title.

AIOSEO SEO Headline Analyzer Recommendations

If you just want to brainstorm some great post headlines, then you can also access Headline Analyzer from All in One SEO » SEO Analysis.

Once there, you need to click on the ‘Headline Analyzer’ tab at the top of the page.

AIOSEO Headline Analyzer

Now, simply type a headline and then click the ‘Analyze’ button.

Your headline idea will be given a score, and you will see actionable tips to improve it.

AIOSEO Headline Analyzer Results

For detailed instructions, see our guide on how to use Headline Analyzer to improve SEO titles in WordPress.

Optimizing WooCommerce SEO Using All in One SEO for WordPress

All in One SEO for WordPress is ready for eCommerce stores and helps you optimize your WooCommerce SEO right out of the box.

Let’s start with the product pages first.

Simply edit any product in WooCommerce and scroll down to the AIOSEO Settings box below the product editor.

Add Product Metadata in AIOSEO

In the ‘General’ tab, you can change the product’s SEO title and description. You can use a product short description smart tag, or you can write a custom description. Just make sure your main product keyword is used in both the title and description fields.

Next, switch to the ‘Social’ tab. From here, you can control how your product will look on social media platforms. You can set a different product image here to get more clicks and engagement from social media.

Social settings for your product

After that, you can switch to the ‘Schema’ tab.

Schema markup allows search engines to better understand and display your content in search results. For instance, this is how search engines may show a product in search results:

Product schema type used in search results

AIOSEO will automatically select the correct schema type.

It will also use the data from your WooCommerce product listing, like product pricing, availability of stock, and more.

AIOSEO automatically adds product schema to WooCommerce products

Additionally, you can click the ‘Edit Schema’ icon to add other information.

You can add the brand, identifier type, material, color, pattern, and more if you need to.

Edit product schema in All in One SEO

The plugin also automatically generates WooCommerce XML sitemaps, including product and product category sitemaps. This brings us to the next step.

Using XML Sitemaps in All in One SEO

An XML sitemap is a file that lists all your website content in an XML format so search engines like Google can easily discover and index your content.

Sitemaps are extremely important for SEO, and AIOSEO automatically sets them up for you.

You can find your XML sitemap by adding sitemap.xml at the end of your domain name like this:

https://example.com/sitemap.xml

XML Sitemaps in All in One SEO

You can customize your sitemap using All in One SEO.

Simply go to the All in One SEO » Sitemaps page to review sitemap settings.

Sitemap settings in All in One SEO

You can scroll down below to the Sitemap Settings section.

From here, you can manage sitemap indexes and include or exclude post types and taxonomies (categories and tags). You can also enable XML sitemaps for date-based archives and author archives.

Sitemap settings

The plugin also allows you to manually add pages to your XML sitemaps.

For instance, you might do this if you have a standalone contact form, a landing page, or Shopify store pages.

Adding additional pages to your sitemap

Create a Video XML Sitemap

All in One SEO allows you to create additional sitemaps like a video sitemap or a news sitemap.

If you embed videos into your content, then adding a video sitemap displays the video thumbnail with a play button in search results.

Example video search result

You can enable the video XML sitemap by switching to the ‘Video Sitemap’ tab.

The first time you visit this page, you will need to click the ‘Activate Video Sitemap’ button to turn on video sitemaps on your site.

Click the 'Activate Video Sitemap' Button

Once video sitemaps are activated, you will see the ‘Video Sitemap’ settings tab.

Notice that the ‘Enable Sitemap’ toggle has been switched on.

Enabling video sitemaps in All in One SEO for WordPress

Note: You will need at least a PRO plan of the plugin to access the video sitemaps feature.

Create a News Sitemap in WordPress

If you run a news website, then you will need to generate a news XML sitemap to appear on Google Search’s News results page.

All in One SEO makes it super easy to generate a news sitemap for your website. Simply switch to the ‘News Sitemap’ tab. The first time you visit this tab, you will need to click the ‘Activate News Sitemap’ button to enable news sitemaps on your site.

Click the 'Activate News Sitemap' Button

Now, you will see the ‘Video Sitemap’ settings tab.

Notice that the ‘Enable Sitemap’ toggle has been switched on.

News sitemap in All in One SEO for WordPress

Below that, you will see the news sitemap settings.

You can set your publication name and select a post type that you want to use for the news sitemap.

News Sitemap Settings

Note: You will need at least a PRO plan of the plugin to access the video sitemaps feature.

Generate an RSS Sitemap

An RSS Sitemap is different than an XML sitemap. Unlike XML Sitemaps, an RSS sitemap only contains your most recent content. It helps Google and other search engines to show your newer content in the search results.

All in One SEO allows you to easily add an RSS sitemap to your website. Simply switch to the ‘RSS Sitemap’ tab and then make sure the ‘Enable Sitemap’ setting is toggled on.

RSS Sitemap in AIOSEO

To learn more about sitemaps, see our detailed guide on how to add XML sitemaps in WordPress.

Using Schema Markup in All in One SEO for WordPress

Schema markup is a special vocabulary that you can use in your post or page’s HTML code to tell search engines more about your content.

For instance, you can tell search engines that the content they are viewing is a recipe or a product page. This allows search engines to use the microdata to display rich snippets in search results.

Rich snippets in Google Knowledge Graph search results

Schema markup also helps search engines display results in knowledge graph information panels. This enhanced placement in search results helps you get more clicks and visitors to your website.

All in One SEO for WordPress comes with built-in support for schema markup for all your content.

Setting Sitewide Schema Markup in WordPress

First, you need to visit the All in One SEO » Search Appearance page and switch to the ‘Content Types’ tab.

From here, you can open the ‘Schema Markup’ tab for each content type.

Setting default schema type in AIOSEO

For instance, you can choose ‘Article’ for your posts and then choose what type of articles they are, such as articles, blog posts, or news articles.

Similarly, for your WooCommerce products, you can switch to the ‘Schema Markup’ tab and set the default markup type to ‘Product’.

Changing Schema Markup for Individual Posts and Pages

Now, what if you have mixed content that you publish as blog posts? For instance, you may occasionally publish a recipe instead of an article as a blog post.

All in One SEO allows you to control schema markup for all individual posts, pages, and products. Simply edit the item that you want to change and scroll down to the AIOSEO Settings below the post editor.

From here, you need to switch to the ‘Schema’ tab and click the ‘Generate Schema’ button.

Change a single post or page's schema markup

This will open up the Schema Catalog.

Here, you can choose the schema type that you want to use.

AIOSEO Schema Catalog

Depending on which schema type you choose, you will see different options to provide additional microdata to be used in the schema markup.

For instance, if you change it to ‘Recipe’ schema, then you will be asked to enter information such as the recipe name, description, image, dish type, cuisine, the time required, and more.

Additional fields to enter recipe schema information

Schema markup is an extremely powerful tool that helps you enhance the appearance of your content in the search results and get more free traffic to your website.

Connecting Google Search Console and Other Webmaster Tools

Google Search Console is a free tool offered by Google to help website owners track their websites’ presence in Google search results.

All in One SEO for WordPress allows you to easily connect your WordPress site to Google Search Console.

First, you need to add your website to Google Search Console using the URL prefix method. During the process, you will be asked to verify your ownership of the website. You should choose the HTML tag option.

Copying the HTML tag

Copy the HTML tag and switch back to your WordPress admin area.

Now, simply go to the All in One SEO » General Settings page and switch to the ‘Webmaster Tools’ tab. From here, you can click on ‘Google Search Console’ and then enter the verification code you copied earlier.

Connecting WordPress to Google Search Console

Similarly, the plugin also allows you to add verification codes for other services like Bing Webmaster Tools, Yandex, Baidu, and Pinterest site verification.

In fact, if any third-party service asks you to add some code to your site’s header, then you can use this page to add those codes in the ‘Miscellaneous Verification’ box.

Miscellaneous Verification section in All in One SEO

Don’t forget to click on the ‘Save Changes’ button to store your settings.

Viewing Google Search Console Statistics From All in One SEO

While the Google Search Console offers a lot of useful statistics about your website on the Google Search Console website, many beginners find it difficult to find the information they need.

Luckily, All in One SEO’s Search Statistics feature makes it easy to do this from inside your WordPress website’s dashboard.

When you navigate to the All in One SEO » Search Statistics page for the first time, you will need to click the ‘Connect to Google Search Console’ button.

Click 'Connect to Google Search Console'

You will be asked to connect or choose your Google account and then give the All in One SEO plugin access to your Google Search Console account.

Once you are redirected back to your website, All in One SEO will fetch your Google Search Console data for you. It will be presented in easy-to-understand reports featuring graphs.

AIOSEO Search Statistics Dashboard

Internal links are links between posts on your own website. They help search engines discover your content and rank them higher in search results.

All in One SEO’s Link Assistant feature makes it easy to add links to your old and new content without having to open up the post. Simply head over to All in One SEO » Link Assistant in your WordPress dashboard.

AIOSEO Activate Link Assistant

The first time you visit this page, you will need to click the ‘Activate Link Assistant’ to enable the feature on your website.

After that, the tool will need to scan every post and page on your website to collect the links you have and see which posts are linked to and which aren’t.

Scanning Your Website Links Using Link Assistatn

After a few moments, the scan will finish, and you will see an overview of the links used on your website.

You will see the total counts for internal, external, and affiliate links. The report will also show you the number of orphaned posts that have not yet been linked to from another post or page.

AIOSEO Link Assistant Overview

The ‘Links Report’ tab provides detailed information on all your links.

You will see a list of all your posts and pages with columns for internal, external, and affiliate links, as well as suggestions where you can add links.

AIOSEO Link Assistant Links Report

You can click on the right arrow button next to any post or page to see more details.

For example, you can go to the ‘Link Suggestions’ tab to quickly view link suggestions and add links without directly editing a post or page.

Viewing Link Suggestions Offered by AIOSEO's Link Assistant

You can learn more in our ultimate guide on internal linking for SEO.

Local Business SEO Setup

A lot of WordPress users run small business websites that serve a particular town or region. These include businesses like restaurants, real estate agents, plumbing, maintenance service providers, small stores, salons, and more.

Local business SEO allows you to optimize your website to appear more prominently in local search results.

For instance, if someone is looking for an ‘Italian restaurant’, then your location would pop up in the results.

Local SEO in action in Google Search

This drives targeted customers and direct sales to your business.

First, you may want to create a Google My Business account. This allows you to add your business listing, prove that you own the business, and manage your business information using Google’s My Business dashboard.

Google My Business account

All in One SEO for WordPress allows you to easily add local business SEO schema markup to your website. This helps you get even more enhanced placement in the search results and keep the information up to date for your business.

Simply navigate to All in One SEO » Local SEO. The first time you visit this page, you will need to click the ‘Activate Local SEO’ button to enable local SEO on your site.

Activate Local SEO in AIOSEO

After that, you can set up your location settings. The first setting asks whether your business has multiple locations.

After that, you need to decide how you will add location information to your website. Most users prefer to use Gutenberg blocks, but you can also use a shortcode, widgets, or PHP code.

AIOSEO Local SEO Location Settings

Now you can scroll down to the Business Info section

Here, you can fill in your business’s information like name, logo, location, area served, and more.

Local SEO settings in AIOSEO

Once you have entered all of your business information, you can add your opening hours.

In the ‘Opening Hours’ tab, you will find settings for whether to display your business hours and how to add them to your website, such as using a Gutenberg block.

AIOSEO Local SEO Opening Hours

After that, you can scroll down the page and enter your business hours.

There are options for businesses that are open 24/7, or you can add your opening hours for each day of the week.

AIOSEO Local SEO Opening Hours Settings

The last tab allows you to add a map of your location to your website. This can help customers navigate to your office or physical store.

For step-by-step instructions, see our guide on how to add a Google Maps store locator on WordPress.

AIOSEO Local SEO Maps

Don’t forget to click on the ‘Save Changes’ button to store your settings.

Performing a Website SEO Audit in WordPress

Now, as you work on your website, you will want to know how your website’s SEO is doing. All in One SEO for WordPress provides a built-in tool to perform a detailed website SEO audit.

Simply go to the All in One SEO » SEO Analysis page to perform a complete site-wide SEO analysis.

SEO analysis performed by AIOSEO

On top of the page, it will give you an overall score for your site’s SEO health. Any score above 70 is acceptable, but there is always room for improvement.

Below the score, you will see the breakdown of your site’s SEO audit report with different labels.

SEO audit report in AIOSEO

If there are any critical issues, then they need your immediate attention.

Simply click on the ‘Important Issues’ tab, and you’ll see a list of issues that you need to fix. You can click on the arrow next to each item to expand, and it will show you how to fix it.

Fixing important SEO issues

As you fix an issue, you can click on the ‘Refresh Results’ button to regenerate the SEO Analysis score.

Performing SEO Competitor Analysis in WordPress

Want to compare your SEO analysis with your competitors? AIOSEO comes with a built-in competitor analysis tool that you can use inside WordPress.

Simply go to the All in One SEO » SEO Analysis page and switch to the ‘Analyze Competitor Site’ tab. From here, you need to enter the URL of your competitor’s website to generate an analysis report.

Competitor analysis in AIOSEO for WordPress

AIOSEO will generate an SEO analysis report of your competitor.

Below the score, you will get a detailed report on different SEO checks, top keywords, critical issues, performance, and a security analysis.

Competition SEO analysis report

You can compare this report with your own report and see if there is something that they are doing that you can use and improve upon.

Expert Tip: You can also use the All in One SEO Analyzer browser extension to quickly see a website’s SEO scores on the front end.

Miscellaneous SEO Settings and Tools

All in One SEO for WordPress is an incredibly powerful SEO tool. Apart from the features we have covered above, it comes equipped with many features for advanced users.

Moving From Yoast SEO to All in One SEO

All in One SEO allows you to easily import SEO data from third-party plugins so that you can switch and use a more powerful and much better SEO tool.

Simply go to the All in One SEO » Tools page and switch to the ‘Import/Export’ tab.

Import export your WordPress SEO data and settings

You can then import data by choosing a plugin from the dropdown list and clicking on the ‘Import’ button.

Edit Robots.txt and .htaccess Files

Sometimes, when following a WordPress tutorial or guide, you may need to edit your robots.txt or .htaccess file. All in One SEO allows you to easily do that.

You can do this by visiting the All in One SEO » Tools page. From here, you will find the option to edit the robots.txt and .htaccess files.

Robots.txt and .htaccess file editor in AIOSEO

Manipulate Your WordPress RSS Feeds

RSS Feeds are used by content aggregators to display your site’s articles or summaries.

All in One SEO allows you to easily manipulate your WordPress RSS feeds to your own advantage by adding your own custom content before or after blog posts.

You can do that by visiting the All in One SEO » General Settings page and switching to the ‘RSS Content’ tab.

Add content before or after your WordPress RSS feed

Control Who Can Access SEO Options in WordPress

Many businesses have staff members responsible for creating content, marketing, or managing SEO. All in One SEO makes it easy for you to choose who has access to SEO settings.

Simply go to the ‘Access Control’ tab and toggle the different settings on and off.

AIOSEO Access Control

It works seamlessly with WordPress user roles and permissions.

Taking Your Website SEO to the Next Level

Now that you have installed and set up All in One SEO for WordPress, the next step is to track how your website is doing and what you can do to grow it.

The easiest way to track your website traffic is by using MonsterInsights. It allows you to see how many visitors are coming to your site, which pages they are viewing, and what they do on your site.

If you haven’t set it up yet, then you can see our guide on how to easily install Google Analytics in WordPress.

Bonus Tip: See what other important marketing data you must track on each of your WordPress websites.

However, for most website owners, the main goal is not only to get more traffic but to convert those users into subscribers and customers.

This is where you’ll need OptinMonster.

It is the best conversion optimization software in the world and helps you convert website visitors into customers. It comes with beautiful lightbox popups, slide-in menus, countdown timers, notification bars, and more.

We hope this article helped you properly install and set up All in One SEO for WordPress. You may also want to see our tips on how to increase your blog traffic and our expert picks for the best WordPress themes for SEO experts.

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.

The post How to Setup All in One SEO for WordPress Correctly (Ultimate Guide) first appeared on WPBeginner.

How to Easily Make a Volunteer Application Form in WordPress

Do you want to make a volunteer application form in WordPress?

By adding an application form to your website, you can recruit more volunteers and automatically collect the information you need from them. This can save you time and allow you to build a network of people who are willing to help out.

In this article, we will show you how to make a great volunteer application form in WordPress, even if you’ve never created a form before.

How to make a great volunteer application form in WordPress

Why Create a Volunteer Application Form in WordPress?

Many organizations rely on volunteers, especially charities and nonprofits. However, going back and forth with potential new volunteers over email can take a lot of time. Many nonprofits still use paper forms to recruit new helpers, which can take even more time to process.

By adding a volunteer application form to your WordPress website, you can easily reach more people who may be browsing your site and decide to help you out.

A volunteer application form also tells visitors exactly what information you need, such as their email address or phone number and any previous volunteering experience. This means you don’t have to spend time on follow-up emails and phone calls, trying to get all of the information you need from a new volunteer.

A good form builder plugin will also show all of its data in the WordPress dashboard in a nicely organized way, and send email notifications to the right people for follow-up.

With that said, let’s show you how to easily create a great volunteer application form in WordPress, step by step.

Creating Your Volunteer Application Form in WordPress

The easiest way to create a great volunteer application form in WordPress is by using the WPForms plugin.

WPForms is the best WordPress form builder plugin on the market. It is beginner-friendly and is used by over 5 million websites. With WPForms you can quickly create any kind of online form you need with their drag-and-drop builder.

Note: In this guide we’ll be using the WPForms Pro version because it has hundreds of pre-made form templates including a ready-made volunteer application template. If you’re on a budget, then there is also a free WPForms Lite version that you can use.

First thing you’ll need to do is install and activate the WPForms plugin. For more details, please see our step by step guide on how to install a WordPress plugin.

Upon activating the plugin, you need to visit WPForms » Settings page in your WordPress dashboard to enter your license key. You can find this information under your account on WPForms website.

If you’re using the free version, then you can skip this step.

Entering your WPForms license key

Next, you need to click on WPForms » Add New page to create your Volunteer Application Form in WordPress.

Creating a volunteer application form with WPForms

This will open the WPForms drag & drop form builder where you need to start by typing a name for your form and then select your form template.

WPForms comes with hundreds of pre-made form templates to help you quickly build any type of forms such as a contact form, online order form, etc. Since we want to create a volunteer application form, simply type “Volunteer” in the template search bar.

You will now see several volunteer form templates to choose from. We will select “Volunteer Recruitment Form” by clicking on the ‘Use Template’ button.

The WPForms volunteer recruitment form template

WPForms will now create a volunteer application form for you.

You can then easily customize this form to better fit your needs. To edit or change anything, simply click on the form field that you want to change.

WPForms will now show all of the settings that you can customize on this field.

Editing a volunteer recruitment form field

Want to change the text that appears in this form field? Then simply edit the text in the left-hand menu.

To customize existing multiple choice options, just click on any of the + buttons. This will let you add more options.

Adding a field to the volunteer recruitment form

You can easily add more questions or options to your volunteer application form by clicking the Add Fields tab in the left-hand menu.

This shows all the fields that you can add including some more advanced options such as the ‘File Upload’ field.

Adding fields to the WPForms volunteer application form

The ‘File Upload’ field lets volunteers submit a file alongside their application. For example, you might ask for a copy of their CV or resume. To learn more, see our step by step guide on how to create a file upload form in WordPress.

You may want to make some fields required, such as the field where applicants can type in their email address. If you make a field mandatory, then visitors cannot submit the form without filling in this field.

To make a field mandatory, simply click to select that field. Then in the left-hand menu click on the ‘Required’ slider to turn it from grey to blue.

Marking a field as required

You and your volunteers can easily see which fields are required because they’ll have a small red asterisk next to the field label.

When you’re happy with how your volunteer application form looks, click on ‘Settings’ in the left-hand menu.

On the ‘General’ settings tab, you can change various form related settings such as the submit button text, setup spam protection, and more.

The WPForms form settings

As the leading WordPress form building solution, WPForms comes with advanced anti-spam settings to help you reduce form spam.

You can see that it’s automatically enabled by default under the ‘Enable anti-spam protection’ slider. Unless you’re going to use a different form of spam prevention instead, we recommend keeping this honeypot enabled.

WPForms' anti-spam form settings

To learn more about how WPForms can protect your site against spam, please see our step by step guide on how to block contact form spam in WordPress.

Setting Up Notifications and Confirmations

By default, every time a visitor submits a form on your site, you’ll get an email containing all the information they’ve submitted.

You can also see all of your submitted form entries in your WordPress dashboard as well.

We also recommend sending the volunteer an email confirming that you’ve got their application. For more details, please see our guide on how to send confirmation emails after WordPress form submission.

Even if you do send a notification email, it’s still a good idea to show an on-screen confirmation every time someone successfully submits a form.

There are a few different ways to do this. WPForms allows you to either show a confirmation message on the same page, or you can redirect the user to a custom Thank You page on your site.

You can configure these settings by going to the Confirmation tab on the Settings panel and then choose from the Confirmation type options.

The volunteer form confirmation message

Most organizations will just use the default Message, but some may create a custom thank you page, or even redirect the visitor to your events calendar, so they can start learning about your upcoming fundraising events.

When you’re happy with how your confirmation message is set up, click on the ‘Save’ button to save your changes.

Bonus Tip: WPForms integrates will all the best email marketing services. If you have an email newsletter, then WPForms makes it easy to add your new volunteers to this newsletter.

Adding Your Volunteer Application Form to Your Site

Now you’re ready to add your form to your WordPress website, so people can start applying to become a volunteer.

With WPForms, it’s easy to add your form to any page, post, or widget-ready area on your site.

Most of the time you’ll want to show your form on a page or post. To do this, either create a new page or post, or open an existing one in the WordPress editor.

In the WordPress block editor, click on the + button to create a new block. In the popup that appears, type ‘WPForms’ to find the right block.

Then just click on the ‘WPForms’ block to add it to your page.

The WPForms WordPress block

Next, open the dropdown menu in the WPForms block.

You’ll now see a list of all the forms you’ve created. Simply go ahead and click on the volunteer application form to add it to your page.

Adding a volunteer application form to your WordPress website

If you’re happy with how the form looks, then you can publish or update the page. Now you can visit your website to see your volunteer application form live.

It’s also a good idea to test your form to make sure it’s working. Simply fill out and submit the form, and check that you see a confirmation message. You should also get an email notification that the form has been filled in.

If you don’t get an email, then there could be an issue with how your emails are set up in WordPress. To learn more, see our guide on how to fix the WordPress not sending email issue.

Once you’ve published your form, you can go to WPForms » Entries to see all of your volunteer applications.

The WPForms entries screen

You’ll see ‘Abandoned’ as the status for the entries where a visitor decided to leave the form without submitting. For more information, please see our guide on how to track and reduce form abandonment in WordPress.

We hope this article helped you learn how to make a great volunteer application form in WordPress. You may also want to go through our guide on how to track website visitors to your WordPress site and see our expert pick of the best WordPress plugins for nonprofits.

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.

The post How to Easily Make a Volunteer Application Form in WordPress first appeared on WPBeginner.

How to Create a Coupon Popup in WordPress (Step by Step)

Do you want to create a coupon popup on your WordPress website?

Coupon popups are a great way to convert your website visitors into paying customers. There are several different ways to create and display coupon popups. However, showing the coupon at the right time makes a huge difference in converting abandoning visitors into customers.

In this article, we’ll take a look at how to add a coupon popup to your WordPress or WooCommerce site.

How to create a coupon popup in WordPress

Why Should You Offer Visitors a Coupon?

Often new business owners are concerned that coupons will eat into their profits. However, established business owners know that offering discounts is a powerful way to get visitors to make up their minds instead of sitting on the fence.

Offering coupon codes helps you recover abandoned cart sales, convert visitors into customers, and make more sales.

Most eCommerce platforms like WooCommerce allow you to easily create coupon codes. However, sharing these coupon codes with your customers makes all the difference.

That’s why in this article, we will share two different ways to share coupons with your visitors. These include a coupon exit popup and a coupon spin-a-wheel optin.

Let’s take a look at how to create a coupon popup in WordPress or WooCommerce.

How to Create Your Coupon Popup in WordPress

The best way to create a coupon popup is by using OptinMonster. It is the best WordPress popup plugin and lead generation software in the market.

First, you need to visit the OptinMonster website to create an account. Simply click the ‘Get OptinMonster Now’ button to get started.

OptinMonster

You will need at least the Growth plan because it includes Coupon Wheel Campaigns and advanced targeting rules for your popups.

After that, you need to install and activate the OptinMonster plugin on your WordPress site. For more details, see our step-by-step guide on how to install a WordPress plugin.

The plugin acts as a connector between your OptinMonster account and your WordPress website.

Upon activating the plugin, you’ll see the OptinMonster setup wizard. Go ahead and click on the ‘Connect Your Existing Account’ button.

Connect your existing account

A new window will now open where you’ll need to connect your WordPress site with OptinMonster.

Simply click the ‘Connect to WordPress’ button to continue.

Connect OptinMonster to WordPress

You can also connect your WooCommerce store with OptinMonster. Just make sure that you’ve set up an eCommerce store in WordPress.

First, you will need to go to OptinMonster » Settings from your WordPress admin panel.

Afterward, head to the ‘General’ tab and click on the ‘Auto-Generate Keys + Connect WooCommerce’ button.

Auto generate keys and connect WooCommerce

WooCommerce will now generate keys automatically and connect to your OptinMonster account.

Now, you are all set to create your first coupon popup campaign.

Creating Your Coupon Popup Campaign

To create a campaign, you can go to OptinMonster » Campaigns from your WordPress dashboard and then click the ‘Create Your First Campaign’ button.

Create first OptinMonster campaign

On the next screen, OptinMonster will show different campaign types and templates.

First, you’ll need to choose a campaign type. We’re going to use ‘Popup,’ which should be the default selection.

Choose a campaign type and template

After that, you will be asked to select a template.

OptinMonster has a vast range of templates you can choose from, with lots of different layouts and color schemes. The ‘Coupon’ template is perfect for creating this popup. Although, you can select a different template if you prefer.

You can use the search box to find the Coupon template or scroll down the page.

Select a template

Next, hover over the template and click the ‘Use Template’ button.

The final step before building your coupon popup is to name the campaign. After entering a name, click the ‘Start Building’ button.

Enter a name for your campaign

Designing your Coupon Popup

Once you’ve clicked ‘Start Building,’ you’ll see the drag-and-drop campaign builder.

You can use it to add different blocks to your template and change the text, colors, and design of the coupon in whatever way you like.

Edit your campaign template

You can also click on any element of the design to change it further. Here, we’ve edited the text and made it a different color.

As soon as you make your changes, you’ll see real-time updates in the coupon popup template.

Edit the text and color of elements in the template

You might want to experiment with different fonts and colors to make your text stands out in the popup or matches your brand.

Outside of the text and elements within the popup, you can also change the background color, add an image to your coupon, set the border color, change the border style, and more.

Save your popup changes

Once you’re done with the changes, please ensure you store your campaign by clicking the green ‘Save’ button at the top of the screen.

Decide How to Deliver Your Coupon Code

Now that you’ve set up your coupon popup, you need to decide how you’ll actually deliver the coupon code to your visitor.

There are several ways to do this in OptinMonster, but the best way is to deliver the coupon code straight away through OptinMonster’s Success view and send it by email newsletter.

That way, if the visitor isn’t ready to buy immediately, they’ve got the coupon code in their email inbox for easy reference later.

By default, your coupon popup is already designed to use ‘the Success view’ as soon as the button is clicked. To check, you can click on the button and then see the ‘Go to View’ option on the left-hand side of your screen.

Change the success view

If you want a different button action, you can change that here. For your first coupon, though, we recommend sticking with the default.

Integrating OptinMonster With Your Email List

To send your coupon code out by email automatically and for the visitor to be added to your email list, you’ll need to integrate OptinMonster with an email marketing service.

Constant Contact is a great service to use with OptinMonster, and WPBeginner readers can get 20% off their first 3 months by using this coupon.

However, if you use a different email service, OptinMonster integrates with pretty much every major provider.

Simply go to the ‘Integration’ tab and click the ‘+ Add New Integration’ button to add your email marketing service.

Add a new integration

Once you’ve done that, you can set up an automated email to go out whenever someone signs up for the email list through your coupon popup.

Bonus Tip: Edit the Success View Template

You can view and change the ‘Success View’ template by going back to the Design tab of your campaign and clicking the ‘Sucess’ option at the bottom of the screen.

The default looks like this, but you can edit it in any way you want, just like you edited your coupon popup.

Switch to the success view

Change Your Coupon Popup’s Display Rules

By default, your coupon popup will appear to visitors after they’ve been on any page of your site for 5 seconds.

If you want to change this, go to the ‘Display Rules’ tab.

Set up display rules

You can set whatever display rules you like, but a great one to try out is Exit-Intent®.

This special OptinMonster technology can tell when a visitor is about to leave your site and show them your coupon popup at just the right moment.

You can add exit intent by selecting the ‘exit detected’ from the dropdown menu and choosing which devices to show the campaign on. By default, it will be set to display on all devices.

Add exit intent display rules

There is also an option to control the sensitivity of exit intent.

After that, scroll down and choose the pages where you’d like to show your campaign.

For example, you can use the default setting of ‘current URL path’ and select the ‘is any page’ option. This way, your campaign will appear on your entire website.

Choose pages to show your campaign on

After adding the display rules, you can click the ‘Next Step’ button.

OptinMonster also offers options to play a sound effect and show animation when the coupon popup appears.

Choose sound effect and effects for campaign

Now, you can click the ‘Next Step’ button.

On the next screen, you will see a summary of your display rules. Don’t forget to click the ‘Save’ button to store your settings.

View a summary of display rules

Once you’re happy with your coupon popup, you can go to the ‘Publish’ tab at the top.

After that, simply make sure that ‘Publish’ is checked under the ‘Publish Status’ section.

Publish your campaign

Don’t forget to click the ‘Save’ button at the top and close the campaign builder.

You can now visit your website to see the coupon popup in action.

Coupon popup preview

Creating a Spin-to-Win Coupon Wheel

A spin-to-win coupon wheel is a great way to make your coupons more interesting and fun for your site’s visitors. It’s like a mini-game that visitors can play to win a discount or another bonus.

Your spin-to-win options could include things like 10% off, 20% off, free shipping, a free trial, or whatever you want to offer.

OptinMonster offers a ‘Gamified’ campaign type that lets you create spin-the-wheel popups.

Select gamification campaign type

After that, scroll down and select one of the Wheel templates.

The plugin has different spin-to-win templates. Simply hover over a template and click the ‘Use Template’ button.

Select a template

Next, go ahead and edit any aspect of your coupon wheel.

To edit the options on the coupon wheel itself, you’ll need to click on the ‘Customize Wheel Sections’ button on the left-hand side.

Customize your wheel

You can then type in any text as the Label for each option and add in the coupon code for each winning option.

Note that the ‘Win Chance’ is automatically determined. If you change the toggle on one or more of the ‘Can Win’ options, OpinMonster will recalculate the winning chances

Edit wheel sections

If you need more help creating your coupon wheel and adding it to your site, check out our post on how to add spin-to-win optins in WordPress and WooCommerce, which goes through the process in more detail.

You can then visit your website to see the spin-to-win coupon popup in action.

Spin the wheel popup preview

We hope this article helped you learn how to create a coupon popup in WordPress. You might also want to look at our pick of the best WooCommerce plugins or our guide on how to add push notifications to your WordPress site.

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.

The post How to Create a Coupon Popup in WordPress (Step by Step) first appeared on WPBeginner.