7 Best WordPress Plugins to Clone or Duplicate a Site (Compared)

Do you want to move your site to a new web host? Or perhaps you want to create a staging version of your site where you can try out new plugins without affecting your live site.

You can move your site manually, but it is a technical process that’s extremely time-consuming and prone to errors.

In this article, we’ll share the best WordPress plugins to clone or duplicate a site to help you save time and hassle.

When Might You Want to Clone or Duplicate a Site?

There are plenty of situations where you might want to make a copy of your website. You may need to:

• Move your site to a different web host or server.
• Move your site to a new domain name.
• Set up a staging site where you can test out changes before making them live.
• Create a backup that you can later use to restore your site if needed.
• Develop a client’s website on your local server so they can review it before you finalize it and put it live.

While you can clone, duplicate, and move a WordPress site manually, it’s a time consuming process.

This is why every smart professional WordPress developer and power users utilize a cloning plugin to manage transfers and migrations effectively.

If you’re on a managed WordPress hosting provider, then most of them will have built-in features for easy staging, cloning, and site backups.

Here are some top WordPress hosting companies that have WordPress staging and cloning features: Bluehost, SiteGround, WP Engine, Liquid Web, Dreamhost, etc.

If you’re not using managed WordPress hosting, though, then you can simply use a WordPress plugin to clone or duplicate your site from our list below.

Tip: Just looking to create a backup? Many of these plugins will be an overkill. Try our list of the best WordPress backup plugins instead.

1. Duplicator Pro

Duplicator Pro is our favorite WordPress cloning plugin. It’s extremely popular, with over 15 million downloads. You can use it to simply backup your site, but it’s also a very powerful plugin for cloning a site.

One of Duplicator’s biggest advantages is that it allows you to move a site between domains or hosts with zero downtime. If you don’t want to miss out on any traffic or customers, this could be a really important consideration.

Duplicator works by bundling up everything from your site into a single “package” in the form of a zip file. This package includes absolutely everything from your site such as plugins, themes, content, database, and even the WordPress files.

This means you can use the package to move everything to a new location. You don’t even need to have WordPress already installed there, as the Duplicator package will contain all the WordPress files.

You can use Duplicator Pro to create scheduled backups, migrate multisite networks, and much more.

We’ve got a full guide on how to clone a website using Duplicator. This takes you through the process step by step.

Price:

Duplicator Pro costs from $59/year, which lets you use it on up to 3 websites.

If you’re on a tight budget, then the free version of Duplicator is also a great option. This does have some limits though, and you can’t use advanced features like the scheduled backups, multisite network support, etc..

2. WP Stagecoach

WP Stagecoach is a great plugin that lets you set up a WordPress staging site especially if your WordPress hosting company doesn’t offer this feature.

A staging site is a special testing version of your site where you can try out new plugins or code, or simply perform updates that you don’t want to do live.

With the WP Stagecoach plugin, you can create a short-term staging site. You can use this to test everything out and then push your changes to your live site when you’re ready.

The plugin merges your database changes, rather than overwriting the database. This means you won’t lose anything that’s happened on your live site in the time since you created the staging site.

It’s a really quick and easy plugin to use, with robust testing that means it should work with virtually any site. WP Stagecoach host your staging site on their servers, too, so you won’t need to use your own web hosting space for it.

WP Stagecoach doesn’t work with multisite networks, however. If you want to create a staging version of your multisite setup, you’ll need to opt for a different plugin.

Price:

WP Stagecoach costs from $12/month. You can save money by paying for an annual plan (from $120/year).

There’s a 5 day free trial available, plus a full money-back guarantee if the plugin doesn’t work for you.

3. UpdraftPlus Premium

UpdraftPlus Premium is a great plugin that lets you clone and migrate websites really easily.

You might have heard of UpdraftPlus before. It’s a fantastic WordPress backup plugin that we frequently recommend.

The premium version of UpdraftPlus includes the Migrator tool as well as UpdraftClone. You’ll get all their other add-ons included too.

You can use Migrator to duplicate your website and move it to a new domain name or host. You’ll need to install WordPress and UpdraftPlus on both your original and new sites to begin the process.

UpdraftPlus’ Migrator even lets you move a standalone WordPress site into a WordPress network.

The UpdraftClone add-on lets you create a temporary site where you can try out changes. It takes just a few clicks to set up the test site as it’s hosted on UpdraftPlus’s servers.

The drawback to this is that you’ll need to buy tokens in order to create and maintain your staging sites. You do get some of these free with UpdraftPlus Premium, but you’ll probably want to buy more.

You’ll also need to be careful about merging the changes back to your live site if there have been any changes to your live site since you cloned it.

Price:

You can get the Migrator add-on for $30. UpdraftClone itself is available with the free version of UpdraftPlus, but you’ll need to pay for tokens. These cost $15 for 5. You can buy more at a time, or take out a monthly subscription, for a better deal.

We recommend buying the premium version of UpdraftPlus. It includes Migrator plus all the other UpdraftPlus add-ons. You’ll also get 12 months of support. It costs from $70/year.

On the Personal plan, you’ll get 1 free token for use with UpdraftClone. If you buy a more expensive plan, you’ll get more tokens included.

4. Migrate Guru

Migrate Guru is a free plugin that works with almost all popular WordPress hosting providers. It’s designed to help you move your site from one host or server to another.

It comes from the people behind the popular BlogVault plugin, and it uses BlogVault’s servers. This helps make it a quick and easy process. Once your migration is complete, Migrate Guru will remove the copy of your site from the BlogVault servers.

If you’ve got a fairly large website, Migrate Guru is a good option as it can move a 1 GB site in less than 30 minutes. It can be used on sites as large as 200 GB. You’ll get real-time and email alerts about where your migration has got to.

This isn’t suitable for developing a website on your localhost, though, as it doesn’t support moving to/from your localhost and your live website.

With Migrate Guru, you’re limited to 5 site migrations per month. You can move these 5 sites unlimited times, though. This is likely to be more than enough for the majority of users, and developers can apply to have this cap changed.

Price:

Migrate Guru is completely free. There isn’t a paid version or any paid extensions for the plugin.

5. All-in-One WP Migration

The All-in-One WP Migration plugin from ServMask is another very straightforward way to clone your website and move it to a new server or domain name.

The plugin is compatible with a huge range of different hosting providers, as it doesn’t have any dependencies. It also bypasses any file size limits that your web host may have by breaking your data into chunks for importing.

There are a few limitations to the plugin, though. The main one is that it only supports importing up to 512MB of data. This may not be enough if your website is fairly large.

You’ll need to add the Unlimited extension to remove this limit. There are lots of other premium extensions available, too. These include a Multisite extension that lets you use the All-in-One WP Migration plugin with a multisite setup.

Price:

The basic All-in-One WP Migration plugin is free. You can buy paid extensions to add more functionality. The Unlimited extension, which many website owners will want, costs $69 for personal use, and $69 + $29/month for business use.

Note that there’s no money-back guarantee. Refunds are solely at the company’s discretion.

6. XCloner

XCloner is a simple, free WordPress plugin that lets you create backups of your site. It can create “differential backups” that only include files modified after a certain date.

You can set XCloner to create automated backups on a regular basis. You can even use it to generate automatic backups before any automatic WordPress updates.

Once you’ve created a backup, you can either use it to restore your website or in a new location. This lets you duplicate your website on a new host or at a new domain.

It’s completely free. However, it’s a little more technical than some other plugins. You may want to pick a different plugin if you haven’t got a reasonable amount of experience with WordPress.

Price:

XCloner is currently free. You can pay to get premium 24/7 support, though, which currently costs €49.95/year or €99.95 for lifetime support.

At the time of writing, XCloner had just been acquired by Watchful. This means it’s possible that the pricing will change in the near future.

7. NS Cloner

NS Cloner is specifically designed for WordPress multisite networks. It lets you take any existing site on your network and make a new, identical site with the same theme settings, plugins, and content.

It’s a great plugin if you host and manage lots of client sites within a multisite environment. It also works well if you want to set up multiple test sites or produce sites for members of an organization.

Keep in mind that it only works with WordPress multisite. You’ll need the NS Cloner pro version if you want to use it with single sites. The pro version also lets you clone between single and multisite WordPress and vice versa.

With the pro version, you also get extra features, like the ability to clone all the site’s users and their permissions.

Price:

NS Cloner is free. There’s a pro version too that offers extra features and costs from $99.

Which is the Best WordPress Plugin to Clone or Duplicate a Site?

For the vast majority of use-cases, Duplicator Pro is the best WordPress plugin to clone or duplicate a website.

Whether you’re looking to migrate a site, move a site to local server, or anything else, Duplicator can do the job.

If your goal is to create a staging site, then we always recommend using the option that’s built-in to your WordPress hosting provider. All good hosting providers like SiteGround, Bluehost, WP Engine, Liquid Web, etc offer this feature to their users.

However if your host doesn’t have the staging feature, then you can use WP Stagecoach. It’s easy to use, budget-friendly, and has a free trial.

Finally, if you’ve got a multisite network of sites, then NS Cloner might be just what you need. It’s specifically designed to copy sites within a multisite network, and the basic version is free.

We hope this article helped you learn about the best WordPress plugins to clone or duplicate a site. You might also want to see our comparison of the best WordPress page builder plugins and the best email marketing services for small business.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 7 Best WordPress Plugins to Clone or Duplicate a Site (Compared) appeared first on WPBeginner.

April 17, 2020 at 05:28PM

WordPress Custom Fields 101: Tips, Tricks, and Hacks

Custom fields are a handy WordPress feature that allows you to add various additional data / information to your WordPress posts and pages.

A lot of popular WordPress plugins and themes use custom fields to store important data. You can also use custom fields to store your own data and then use it on your website.

In this article, we’ll show you how to use WordPress custom fields with some tips, tricks, and hacks.

Since this is a lengthy article, we have added a table of contents for easier navigation.

• What are WordPress custom fields?
• Adding custom fields in WordPress
• Display custom fields in WordPress themes
• Can’t find custom field in dropdown on post edit screen
• Creating user interface for custom fields
• Adding Custom Fields Using Advanced Custom Fields
• Hide empty custom fields with conditional statement
• Adding multiple values to a custom field
• Displaying posts with a specific custom key
• Add guest author name using custom field
• Display contributors to an article using custom fields
• Display custom fields outside the loop in WordPress
• Display custom header, footer, sidebar using custom fields
• Manipulate RSS feed content with custom fields
• Manipulate RSS feed title with custom fields
• Set expiration date for posts using custom fields

What are WordPress Custom Fields?

WordPress custom fields are metadata that are used to add additional information related to the post or page that you are editing.

By default, when you write a new post, page, or any content type, WordPress saves it into two different areas.

The first part is the body of your content that you add using the post editor.

The second part is the information about that particular content. For example, title, author, date, time, and more. This information bit of the post is called metadata.

WordPress automatically adds all the required metadata to each post or page you create.

You can also create and store your own metadata by using the custom fields.

By default, the custom fields option is hidden on the post edit screen. To view it, you need to click on the three-dot menu at the top-right corner of the screen and select ‘Options’ from the menu.

This will bring up a popup where you need to check the ‘Custom fields’ option under the Advanced Panels. After that, click on the ‘Enable & Reload’ button to reload the post editor.

The post editor will reload, and you’ll be able to see the custom fields panel below the content editor.

Custom fields can be used to add any information related to the post, page, or any content type. This meta-information can be displayed in your theme.

However, to do that you will need to edit your WordPress theme files.

This is why this tutorial is recommended for users familiar with editing theme files. It is also helpful for aspiring WordPress developers who want to learn how to properly use custom fields in their own themes or plugins.

Having said that, let’s take a look at how to add and use custom fields in WordPress.

Adding Custom Fields in WordPress

First, you need to edit the post or page where you want to add the custom field and go to the custom fields meta box.

Next, you need to provide a name for your custom field and then enter its value. Click on the Add Custom Field button to save it.

The field will be stored and displayed in the custom fields meta box like this:

You can edit this custom field any time you want and then click on the update button to save your changes. You can also delete it as needed.

Now you can save your post to store your custom field settings.

Displaying Custom Fields in WordPress Themes

To display your custom field on your website, you will need to edit your WordPress theme files. If you haven’t done this before, then take a look at our guide on how to copy and paste code in WordPress.

First, you will need to find the theme file that you need to edit to display your custom field. Ideally you would want to display it on a single post page. You will need to edit the single.php or content-single.php file.

You will need to enter your custom fields code inside the WordPress loop. Look for the line that looks like this:

<?php while ( have_posts() ) : the_post(); ?>

You want to make sure that you add your code before the following line:

<?php endwhile; // end of the loop. ?>

Now you need to add this code to your theme file:

<?php echo get_post_meta($post->ID, 'key', true); ?>

Don’t forget to replace key with the name of your custom field. For example, we used this code in our demo theme:

<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

You can now save your changes and visit the post where you added the custom field to see it in action.

Now you can use this custom field in all your other WordPress posts as well.

Simply create a new post or edit an existing one. Go to the custom fields meta box and select your custom field from the drop down menu and enter its value.

Click on ‘Add Custom Field’ button to save your changes and then publish or update your post.

Can’t Find Custom Field in Dropdown on Post Edit Screen

By default, WordPress only loads 30 custom fields in this form.

If you are using WordPress themes and plugins that already use custom fields, then there is a chance that those will appear first in the drop-down menu and you’ll not be able to see your newly created custom field.

To fix this issue, you’ll need to add the following code to your theme’s functions.php file or a site-specific plugin.

add_filter( 'postmeta_form_limit', 'meta_limit_increase' );
function meta_limit_increase( $limit ) {
    return 50;
}

The above code will change that limit to 50. If you still can’t see your custom field then try increasing that limit even further.

Creating a User Interface for Custom Fields

As you can see, that once you add a custom field, you will have to select the field and enter its value each time you write a post.

If you have many custom fields or multiple users writing on your website, then this is not an ideal solution.

Wouldn’t it be nice if you could create a user interface where users can fill in a form to add values to your custom fields?

This is what so many popular WordPress plugins already do. For example, the SEO title and meta description box inside the popular All in One SEO plugin is a custom meta box:

The easiest way to do this is by using the Advanced Custom Fields plugin.

Adding Custom Fields Using Advanced Custom Fields

First thing you need to do is install and activate the Advanced Custom Fields plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Custom Fields » Field Groups page and click on the add new button.

A field group is like a container of a set of custom fields. This allows you to add multiple panels of custom fields.

Now, you need to provide a title for your field group and then click on the the ‘Add Field’ button.

You can now provide a name for your custom field and select a field type. Advanced Custom Fields allows you to create all sorts of fields including text, image upload, number, dropdown, checkboxes, and more.

Scroll down, and you’ll see other options for that particular field. You can change them to your own requirements.

You can add multiple fields to your field group if you want. Once you are finished, click on the publish button to save your changes.

You can now edit a post or create a new one and you’ll see a new panel for your custom fields below the content editor.

For detailed step by step instructions, see our guide on how to add custom meta boxes in WordPress posts and post types.

Hide Empty Custom Fields with Conditional Statement

So far we have covered how to create a custom field and display it in your theme.

Now let’s see how to check if the custom field is not empty before displaying it. To do that, we will modify our code to first check if the field has data in it.

<?php 

$mood = get_post_meta($post->ID, 'Mood', true);

if ($mood) { ?>

<p>Today's Mood: <? echo $mood; ?></p>

<?php 

} else { 
// do nothing; 
}

?>

Don’t forget to replace Mood with your own custom field name.

Adding Multiple Values to a Custom Field

Custom fields can be reused in the same post again to add multiple values. You just need to select it again and add another value.

However, the code we have used in the above examples will only be able to show a single value.

To display all values of a custom field, we need to modify the code and make it return the data in an array. You will need to add the following code in your theme file:

<?php 
$mood = get_post_meta($post->ID, 'Mood', false);
if( count( $mood ) != 0 ) { ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($mood as $mood) {
            echo '<li>'.$mood.'</li>';
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

Don’t forget to replace Mood with your own custom field name.

In this example, you would notice that we have changed the last parameter of get_post_meta function to false. This parameter defines whether the function should return a single value or not. Setting it to false allows it to return the data as an array, which we then displayed in a foreach loop.

Displaying Posts with a Specific Custom Key

WordPress allows you to display posts with custom keys and their values. For example, if you are trying to create a custom archive page to display all posts with specific custom keys, then you can use WP_Query class to query posts matching those fields.

You can use the following code as a starting point.

$args = array(
        'meta_key'   => 'Mood',
        'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args );

<?php 
// the query
$the_query = new WP_Query( $args ); ?>

<?php if ( $the_query->have_posts() ) : ?>

        <!-- the loop -->
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                <h2><?php the_title(); ?></h2>
                <?php the_content(); ?>

        <?php endwhile; ?>
        <!-- end of the loop -->

        <!-- pagination here -->

        <?php wp_reset_postdata(); ?>

<?php else : ?>
        <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

Don’t forget to replace meta_key and meta_value parameters with your own values.

Add Guest Author Name Using Custom Fields

Do you want to add a guest post but don’t want to add a new user profile just to add a single post? An easier way to do that is by adding guest author name as a custom field.

First, you need to add the following code in your theme’s functions.php file or a site-specific plugin.

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
function guest_author_name( $name ) {
global $post;
$author = get_post_meta( $post->ID, 'guest-author', true );
if ( $author )
$name = $author;
return $name;
}

This code hooks a function to the_author and get_the_author_display_name filters in WordPress.

The function first checks for the guest author name. If it exists, then it replaces the author’s name with the guest author name.

Now you will need to edit the post where you want to display the guest author name. Go to the custom fields meta box and add your guest author name.

For details, see our article on how to rewrite guest author name with custom fields in WordPress.

Display Contributors to an Article Using Custom Fields

On many popular blogs and news sites, multiple authors contribute to write an article. However, WordPress only allows a single author to be associated with a post.

One way to solve this problem is by using Co-Authors Plus plugin. To learn more, see our guide on how to add multiple authors on a WordPress post.

Another way to do that is by adding contributors as a custom field.

First you need to edit the post where you want to display co-authors or contributors. Scroll down to custom fields meta box and add author names as co-author custom field.

Now add this code to your theme files where you want to show co-authors.

<?php 

$coauthors = get_post_meta($post->ID, 'co-author', false);
if( count( $coauthors ) != 0 ) { ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors) { ?>
           <?php echo '<li>'.$coauthors.'</li>' ;
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

To display author names separated by commas, you can add the following custom CSS.

.coauthors ul { 
display:inline;
}
.coauthors li { 
display:inline;
list-style:none;
}
.coauthors li:after { 
content:","
}
.coauthors li:last-child:after {
    content: "";
}
.coauthors li:first-child:after {
    content: ":";
}

This is how it looked on our demo site.

Display Custom Fields Outside the Loop in WordPress

So far we have shown you all the examples where custom fields are displayed inside the WordPress loop. What if you needed to show them outside the loop? For example, in the sidebar of a single post.

To display the custom fields outside the WordPress loop add the following code:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

Don’t forget to replace the key with your custom field name.

Display Custom Header, Footer, Sidebar using Custom Fields

Usually most WordPress themes use the same header, footer, and sidebar on all pages. There are multiple ways to show different sidebars, header, or footer for different pages on your website. See our guide on how to display different sidebar for each WordPress post or page.

One way to do this is by using custom fields. Edit the post or page where you want to show a different sidebar and then add the sidebar as custom field.

Now you need to edit your WordPress theme files like single.php where you want to display custom sidebar. You will be looking for the following code:

<?php get_sidebar(); ?>

Replace this line with the following code:

<?php 
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

This code simply looks for the sidebar custom field and then displays it in your theme. For example, if you add wpbpage as your sidebar custom field, then the code will look for sidebar-wpbpage.php file to display.

You will need to create sidebar-wpbpage.php file in your theme folder. You can copy the code from your theme’s sidebar.php file as a starting point.

Manipulating RSS feed Content with Custom Fields

Want to display additional meta data or content to your RSS feed users? Using custom fields you can manipulate your WordPress RSS feed and add custom content into your feeds.

First you need to add the following code in your theme’s functions.php file or a site-specific plugin.

function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Now just create a custom field called “coolcustom” and add any value you like. You can use it to display advertisements, images, text, or anything you want.

Manipulate RSS Feed Title with Custom Fields

Sometimes you may want to add extra text to a post title for RSS feed users. For example, if you are publishing a sponsored post or a guest post.

First you add the following code in your theme’s functions.php file or a site-specific plugin.

function wpbeginner_titlerss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true);

if($gpost !== '') {
$content = 'Guest Post: '.$content;
}
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
}
else {
$content = $content;
}
return $content;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

Next, you need to edit the post where you want to display the extra text in the title field and add guest_post and sponsored_post in custom fields.

If any of these two custom fields are found with a value “true”, then it will add the appropriate text before the title. This technique can be utilized in various ways to fit whatever you like.

Want to learn more cool RSS feed hacks? See our guide on how to add content and manipulate your WordPress RSS feeds.

Set Expiration Date for Posts in WordPress Using Custom Fields

Want to set an expiration date for some posts on your WordPress site? This comes handy in situations when you want to publish content only for a specific period like running surveys or limited time offers.

One way to do this is by manually removing the post content or by using a plugin like Post Expirator plugin.

Another way to do this is by using custom fields to automatically expire posts after a specific time.

You will need to edit your theme files and add modify the WordPress loop like this:

<?php
if (have_posts()) :
while (have_posts()) : the_post(); 
$expirationtime = get_post_meta($post->ID, "expiration", false);
if( count( $expirationtime ) != '' ) { 
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}

$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) {
echo 'This post will expire on ' .$expirestring.'';
the_content();
} else { 
echo "Sorry this post expired!"
}
} else { 
the_content();
} 
endwhile;
endif;
?>

Note: You will need to edit this code to match your theme.

After adding this code, you can add the expiration custom field to the post you want to expire. Make sure you add the time in this format mm/dd/yyyy 00:00:00.

Style Individual Posts Using Custom Fields

Want to change the look of an individual post using CSS? WordPress automatically assigns each post its own class which you can use to add custom CSS.

However, using custom fields you can add your own custom classes and then use them to style posts differently.

First you need to edit a post that you would like to style differently. Go to custom fields box and the post-class custom field.

Next, you need to edit your WordPress theme files and add this code at the beginning of WordPress loop.

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Now you need to find a line with the post_class() function. Here is how it looked in our demo theme:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Change this line to include your custom field value, like this:

<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

Now if you examine the post’s source code using Inspect tool, then you will see your custom field CSS class added to the post class.

Now you can use this CSS class to add custom CSS and style your post differently.

That’s all, we hope this article helped you learn more about WordPress custom fields. You may also want to see our ultimate step by step guide to boost WordPress speed and performance for beginners.

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 WordPress Custom Fields 101: Tips, Tricks, and Hacks appeared first on WPBeginner.

April 16, 2020 at 07:00PM

How to Create a Welcome Mat for Your WordPress Site (+ Examples)

Do you want to add a full-screen welcome mat to your website?

A welcome mat is a full screen dynamic overlay that can help you get more newsletter subscribers, eBook downloads, sales to your products, etc.

In this article, we’ll share how to create a welcome mat for your WordPress site along with some great welcome mat examples to learn from.

Why a Welcome Mat Can Boost Your Conversions

More than 70% of visitors leaving your website will never return, unless you convert them into an email subscriber or a customer.

A welcome mat is a large, fullscreen interstitial that blocks the view of the rest of your website’s content to capture user’s attention.

That might sound like a bad idea, but it’s a great way to get your message in front of visitors straight away.

If visitors don’t want what you’re offering, then they can simply close the welcome mat.

Similar to exit-intent popups, welcome mats are effective in driving high conversion rates.

Of course, you’ll want to give people a good reason to sign up. If you don’t already have a lead magnet, then you could offer a discount code or even a freebie.

Here are two very different welcome mat examples that have very high conversion rates:

The above is a welcome mat that we use on our WPForms blog, and it converts very well.

The screenshot below is a welcome mat that we use to give one of our lead magnets that does a really good job in getting users to join our email newsletter:

That being said, let’s take a look at how to easily add a welcome mat to your website.

How to Create a Welcome Mat for Your Website

First, you need to sign up for an OptinMonster account. It is the best lead generation software in the world and allows you to easily create optin forms including welcome mats.

Note: WPBeginner founder, Syed Balkhi, first built OptinMonster to help grow our own subscribers and sales. Now it’s a premium plugin that’s used by hundreds of thousands of websites.

Next, you’ll need to install and activate the OptinMonster WordPress plugin. For more details, see our step by step guide on how to install a WordPress plugin.

The plugin connects the OptinMonster app to your website. Once you’ve activated the plugin, click on the OptinMonster menu in your WordPress dashboard to connect your account.

After that, you’re ready to create your welcome mat.

Creating a Welcome Mat for Your Website

In your WordPress dashboard, click the ‘Create New Campaign’ button to start creating your welcome mat.

This will take you to the OptinMonster website.

Next, choose ‘Fullscreen’ for your campaign type.

You’ll need to choose a template for your campaign. We’re going to use the ‘Entrance’ template, but you can pick a different one if you want.

After you click the ‘Use Template’ button, you’ll see a campaign builder screen like this:

You can change anything you like here. You’ll want to edit the text to correspond to your own offer, of course.

Simply click on any element, and you’ll see that you can edit it in the left-hand pane.

Next, go to Optin Settings » Fullscreen Background. Click on ‘Background Color’ and set the A (Alpha) value to 100.

This ensures that your welcome mat won’t be transparent at all, so none of your site content will show through.

The next step is to let your welcome mat slide in. You can do this by clicking the ‘Home’ button on the left-hand side then clicking ‘Fullscreen Settings’.

From here, you need to toggle the ‘Display a Page Slide?’ option on, so that it’s green.

This means that your welcome mat will slide down from the top of the screen instead of fading into view.

Next, you need to switch to the ‘Success’ view of your welcome mat. This is what your users will see after they perform the desired action.

Once you’re happy with your welcome mat, you can set up how it’s going to display on your site.

Getting Your Welcome Mat to Display on Your Site

You can set how you want to display your welcome mat popup by switching to the Display Rules tab in OptinMonste.

By default, OptinMonster campaigns display on all pages of your site after the visitor has been there for 5 seconds. Since this is a welcome mat, you’ll probably want it to display immediately. Just change this value to 0 seconds.

By default, the welcome mat will display on every page of your site. You can easily include or exclude specific pages by using OptinMonster’s personalization rules.

There are a lot of other personalization and targeting options like user’s location, what items they have in their eCommerce cart, what have they done previously on your site, etc.

Once you are ready to make your welcome mat live, simply click ‘Publish’ at the top of the screen. You will need to switch the toggle next to ‘Status’ so that it shows ‘Live’.

Don’t forget to click ‘Save’ to save your changes.

Now, head to your WordPress website and click on the OptinMonster menu item. You should see your welcome mat campaign, plus any other campaigns you’ve created.

If it’s not appearing, just click ‘Refresh Campaigns’ to fetch data from the OptinMonster website.

To check out your campaign, you can visit your website in a new incognito browser window. You should see your welcome mat slide in seamlessly from the top of your screen.

Examples of Great Welcome Mats

Let’s take a look at some welcome mat examples from different industries. For each, we’ll go through what they’re doing well, plus any minor changes we might suggest.

1. Singularity

This welcome mat from Singularity prompted users to sign up and watch the livestream of the Singularity University Global Summit. It was hugely successful and captured over 2,000 new email signups in under 9 days.

We particularly liked the great use of the logo, the clear fonts, and the bright “Remind Me!” button.

2. Goins, Writer

This welcome mat from Goins, Writer offers a free guide. It’s a clear, simple offer, and the minimalist design is in keeping with the rest of the website.

We felt that the “Yes” and “No Thanks” buttons are clear and easy to use, and the use of numbers in the headline makes for a compelling offer.

3. AVweb

This welcome mat has a large, clear image of a small airplane. It’s instantly eye-catching.

We liked the great image, and the clear “Sign Me Up!” call to action. One small possible tweak would be to shorten the tagline to avoid having it cover the top of the airplane.

4. Loaded Landscapes

This welcome mat from Loaded Landscapes is a little different from other examples. The background is slightly transparent.

We liked the clear offer and the enthusiasm of the red call to action button. The background of the site beneath the welcome mat could be a little distracting, so it might be worth changing it to be fully opaque, however.

5. OptimizeMyBnb

This welcome mat was used on a specific page, linked to from a book the website owner sold through third-party retailers. These retailers didn’t pass on customers’ details, though. Using a welcome mat in this way helped capture customers’ email addresses.

We felt the very clear headline, subheading, and call to action text all worked well. However, we thought that “item” on the button should probably be “items” plural. This highlights the importance of carefully proofreading your welcome mat’s text.

There are dozens more full screen welcome mat examples that you can see, but we didn’t add them all in this guide.

If you’re looking for more inspiration, here are some things you can do with a fullscreen welcome mat:

• Present a targeted offer or coupon
• Showcase new products and services
• Let visitors know what to expect from the site
• Win new subscribers by highlighting their best content
• Point visitors to their social media profiles
• Collect email subscribers as part of a prelaunch phase

If you’re serious about improving your website conversions, then welcome mat and even exit fullscreen interstitial are one of the highest converting items you can add to your website.

We hope this article helped you learn how to create a welcome mat for your website and that you found the examples inspiring. You may also want to take a look at our comparison of the best email marketing services and our list of the must have WordPress plugins.

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 Welcome Mat for Your WordPress Site (+ Examples) appeared first on WPBeginner.

April 15, 2020 at 05:42PM