The 5 Best WordPress Age Verification Plugins to Help You Add an Age Gate

In this article, we will be providing you with the best 5 WordPress Age Verification Plugins to help you add an age-gate to your website.

If you need to add an age check gate to your WordPress website, then you are in the right place. Using a pre-built WordPress age verification plugin is a simple way to action this as opposed to writing custom code. Although age verification systems are not essentially required by law in most jurisdictions, a lot of businesses dealing in age-sensitive industries choose to use an age gate to control the age of their visitors. These tend to be industries such as alcohol, tobacco, gambling and various others.

So let’s dive into it!

The Best WordPress Age Verification Plugins in 2021

1. Age Gate

Age Gate is a fantastic plugin with a great list of features. We always tend to favour the authors of plugins that have very frequent updates.

Why is the plugin so great? Well, the plugin excludes search engine crawlers and bots so that they do not run into any issues when crawling your website. Other than that, it offers great flexibility allowing you to:

  • Choose between restricting your entire site or just specific content
  • Add an age-gate specifically to your registration forms
  • Allow users to input their age via three different methods (Has simple yes/no option)
  • Add an optional “remember me” box that users can check to avoid future age checks
  • Exclude logged-in users from age checks
  • SEO Friendly – common bots and crawlers are omitted from age checks

In addition to this, it also allows full customisation such as adding your logo and customising all the text that appears. On top of that, the default styling offers quite a nice modern design. It even offers the ability to switch over to a JavaScript triggered version. This essentially means that you can bypass your host of plugins cache, awesome right?

2. Dispensary Age Verification

Technically, the Dispensary Age Verification plugin is an add-on for the WP Dispensary plugin. However, you don’t need to use the core plugin to use this add-on.

What is great about this plugin is that it is super lightweight, quite flexible and it’s a simple age-gate you can apply to your whole website. It will show the age-gate regardless of which page on your website that you first visit. If that all sounds good, you can also adjust the design through the WordPress Customizer.

Once you activate the plugin, you can head over to AppearanceCustomizeAge Verification, and within here you can set up the following:

  • Logo
  • Title
  • Message
  • Minimum Age
  • Using the WordPress Customizer to make changes
  • Using the WordPress Customizer to make changes

The great thing about being able to edit via the WordPress Customizer is that you can view your changes in real-time. This plugin offers a very quick and efficient setup, what more could you ask for.

3. AgeVerify

The AgeVerify plugin isn’t a light-weight as the rest, the reason for this is that this plugin offers various templates which can match a variety of use cases.

The downside to this plugin is that the free version supports ads. This basically means that if you want to remove the ads from the age verification gate, you will need to purchase the pro version which costs $59.

What could make this worthwhile is that it offers you great flexibility allowing you to set:

  • Custom cookie expirations
  • Custom redirect URLs
  • And the background images that it uses are a nice touch.

Having the banners doesn’t really look that professional and doesn’t help your website whatsoever. If you are willing to pay, then great, but from experience, the free option just doesn’t cut it.

4. Age Verifier for WordPress

Age Verifier for WordPress doesn’t offer any free version, unfortunately. However, for just $18 you should bear this in mind once you check out the plugin.

For just $18, you can get some pretty clean and modern designs along with a very helpful visual builder to customise the appearance of the age-gate. You can even select different verification methods as well as defining how long the cookie should last.

Another great feature is that you can add animation effects for when the age-gate appears. In all honestly, though, the core functionality doesn’t offer that much more than the free plugins we have mentioned previously.

The question is if you are willing to pay $18 to make your age-gate look more attractive without having to add some custom code, then it’s a no brainer really. If not, then the other free plugin suggestions would definitely suffice.

5. Age Checker

The Age Checker for WordPress is another premium plugin you can choose from. It’s the same price as the previous one at $18 and it offers a few unique features that the other plugins above don’t offer.

What this plugin offers is 3 different background modes, either a solid colour, image or video. Whilst some of the other plugins offer a date of birth as an option, one of the unique features about this plugin is to have a simple checkbox or enter your verification method. If you are looking for a simple verification like having a button to confirm they are over the required age then this works a treat.

You can also redirect users, change the form validation text and the life of the cookie. Crawlers can be omitted from age verification to ensure it doesn’t effect the SEO of your website.

Lets conclude…

Which WordPress Age Verification Plugin Should You Choose?

Overall, the Age Gate plugin for us is the best. It has the best combination of functionality and styling. The other thing it lacks is the track record of well-reviewed options like the Age Verifier for WordPress. Dispensary Age Verification also provides a nice lightweight solution, though it doesn’t offer the same depth of functionality as the other plugins.

Well, we hope this article helps you decide which Age Verification plugin is the best, depending on your website and your programming knowledge, one plugin could be the best fit for one website, and another plugin for another.

You can even create your own Age Gate verification plugin quite easily if you have the programming knowledge.

Let us know in the comments below as to which your favourite Age Verification plugin is!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Add a Custom Author Profile Page to Your WordPress Site

If you are looking to add a custom author profile page to your WordPress site then you’ve come to the right place. In this tutorial, we will show you how to create a custom author profile page with and without the use of a plugin.

As always, we will show you how to add this without a plugin and then provide the plugin alternative method.

1. How to Manually Add a Custom Author Profile Page to Your Theme

The first step is to create the author.php file, this will go within your theme/child theme folder. Now we can simply copy and paste the contents of the archive.php file and paste it within the author.php file.

If your theme already has an author.php file, then you can edit that as well.

Our main goal here is to get the author’s profile information and then display it. You will need to decide where you want to start editing. As a general rule of thumb, you can usually edit anything between the get_header(); and get_sidebar() lines.


<?php
	$theauthor = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author));
?>
     
<div class="author-profile-card">
    <h2>About: <?php echo $theauthor->nickname; ?></h2>
    <div class="author-photo">
    <?php echo get_avatar( $theauthor->user_email , '90 '); ?>
    </div>
    <p><strong>Website:</strong> <a href="<?php echo $curauth->user_url; ?>"><?php echo $theauthor->user_url; ?></a><br />
    <strong>Bio:</strong> <?php echo $theauthor->user_description; ?></p>
</div>
     
<h2>Posts by <?php echo $theauthor->nickname; ?>:</h2>
 
 
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<h3>
		<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a>
	</h3>
	<p class="posted-on">Posted on: <?php the_time('d M Y'); ?></p>
	 
	<?php the_excerpt(); ?>
	 
	<?php endwhile; 

	the_posts_pagination();
	 
	else: ?>
	
	<p><?php _e('This author hasn\'t posted yet.'); ?></p>
 
<?php endif; ?>

The above code will add the author’s profile details at the top of the page and then it will display their recent posts below.

This code can be customised to your needs, for example, you could add social links, display featured images for the post, customise the posts to look like your blog archive page, and so on.

To get you started, here is some CSS code that you can add to make your author profile look more presentable. Feel free to make changes and further improve to match the theme of your website.


.author-profile-card {
    background: #eee;
    border: 1px solid #ccc;
    padding: 20px;
    margin-bottom: 20px;
}

.author-photo {
    float: left;
    text-align: left;
    padding: 5px;
    margin-right: 10px;
}

img.avatar {
    border-radius: 50%;
}

You will end up with a page that looks something along the following lines:

2. How to Add a Custom Author Profile Page in WordPress with a Plugin

For this method, we are going to install and active the WP User Manager plugin.

Once activated, you need to go to Users » WPUM Settings page to configure the plugin to your requirements.

This plugin will automatically create pages for a custom login, user registration, forgot password, account and profile pages.

WP User Manager comes fully packed with a lot of options and customisation. You will have to go through the settings and enable/disable the features that you require for your site.

Once completed, we can click on the Profiles tab to setup the user profile settings.

In this tab, we can enable the profile page option for guest which allows anyone to view the user’s profile. You can also allow members to view one another profile. If unchecked, you will only be able to see your own profile page.

You can also allow users to upload a custom profile image and display their recent posts as well as comments on their profile page. Once you’ve configured it to your liking click the Save Changes button.

Now, we will need to select SEO friendly URLs on permalinks for the author profile pages. This can be done by going to Settings » Permalinks page. Scroll down to the ‘User profile permalink base’ section.

This plugin allows you to use the user ID, username, or nickname in the URL. Both nickname and username are more SEO friendly options than user ID. Click to select either one of them and then click on the save changes button to store your permalink settings.

For the next step, we need to let users easily find their profile pages on your website. What you can do here is go to Appearance » Widgets and add the WPUM Login Form widget to one of your sidebars

Once done, you can now view your new author’s profile page. If you are logged in, you will see your own account details in the sidebar widget. Click on the username and this will take you to the author profile page.

The sidebar widget will show a login form for users who are logged out. If you wish users to register on your website, the form will also include a link to sign up. This plugin will also change author links on your website and point them to the author profile page as opposed to the default author’s archive page.

If you want to customise the plugin you can add some CSS to match it with your WordPress theme. However, if you want to take it one step further and adjust the layout, you will need to edit the plugin’s template files. The plugin comes with custom templates support which means you can create your own templates within your theme folder.

To do this, head over to the /wp-content/plugins/wp-user-manager/templates/ directory and download all the files. Next, head over to your theme/child theme folder and create a new folder called wpum. Now, we can add the files you downloaded previously within this folder.

Now you can edit these files to customise the appearance of your profile page as you wish.

Conclusion

And that’s it! We have now learned how to add a custom author profile page in WordPress with and without the use of a plugin.

We hope you found this tutorial useful. If you need any help with anything, feel free to drop a comment below.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Add Instagram Photos to Your Website or WordPress Website

In this tutorial, we will show you how you can add an Instagram feed using a WordPress plugin, and how you can add one using an external plugin for any type of website.

Adding Instagram Photos to your website using a Premium WordPress Plugin

The best plugin in which we have come across and use on a lot of our website builds is Instagram Feed – WordPress Instagram Gallery which is created by Elfsight. The plugin can be purchased here. This plugin can be purchased for $59 and can be used across multiple WordPress websites.

All you have to do is install the plugin, activate it and connect your Instagram account either using Facebook Business or Personal Instagram and then you can fully customise it to your needs.

A shortcode is provided so that you can add it anywhere on your website. The beauty of this plugin is that it’s very easy to use, it allows you to fully customise the appearance. You can use either a slider or tile display, specify how many items you want per row or column, and it even allows you to hover the images to see the post description, amount of likes, and comments which links to the feed. Sounds awesome right? That’s exactly why it’s our go-to plugin for Instagram feeds on WordPress websites.

The best part of using a plugin for this sort of thing is that Instagrams policies are forever changing, so by simply updating to the latest version, we can always ensure this plugin works as intended.

Here is an example of how this plugin looks on your WordPress website:

We actually use this plugin on this website which you will see just above the footer. You will see the description and comments/links in the first image above.

Looks great right?

We’ve used a variety of plugins, but this one has definitely proved to be the best on the market!

Add Instagram Photos to your website using Instafeeed.js

We came across a really good light-weight plugin to add Instagram photos to your website and this was by using Instafeed.js. No jQuery required, just plain old javascript.

https://raw.github.com/stevenschobert/instafeed.js/master/instafeed.min.js

How do I set it up?

Setting up Instafeed.js is pretty straight-forward. Just download the script and include it in your HTML:


<script type="text/javascript" src="path/to/instafeed.min.js"></script>

Instafeed.js also supports AMD/CommonJS:


// AMD
require(["path/to/instafeed"], function(Instafeed) {

});

// CommonJS
var Instafeed = require("instafeed.js");

NPM/Bower

Instafeed.js is also available on NPM and Bower:


npm install instafeed.js      # npm
bower install instafeed.js    # bower

Basic Usage

Here’s how easy it is to get all images tagged with #awesome:


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID'
    });
    feed.run();
</script>

Instafeed.js with automatically look for a

and fill it with linked thumbnails. Of course, you can easily change this behaviour using the standard options. Also, check out the advanced options and the section on templating for additional customizations.

Requirements

The only thing you’ll need to get going is a valid client id from Instagram’s API. You can easily register for one on Instagram’s website.

If you need help with that step, try Googling “How to get an Instagram client ID“.

Standard Options

  • clientId – Required. Your API client id from Instagram.
  • accessToken – A valid oAuth token. Can be used in place of a client ID.
  • target – The ID of a DOM element you want to add the images to.
  • template – Custom HTML template to use for images. See templating.
  • get – Customize what Instafeed fetches. Available options are:
    • popular (default) – Images from the popular page.
    • tagged – Images with a specific tag. Use tagName to specify the tag.
    • location – Images from a location. Use locationId to specify the location.
    • user – Images with a user. Use userId to specify the user. More info here.
  • tagName – Name of the tag to get. Use with get: ‘tagged’.
  • locationId – Unique id of a location to get. Use with get: ‘location’.
  • userId – Unique id of a user to get. Use with get: ‘user’.
  • sortBy – Sort the images in a set order. Available options are:
    • none (default) – As they come from Instagram.
    • most-recent – Newest to oldest.
    • least-recent – Oldest to newest.
    • most-liked – Highest # of likes to lowest.
    • least-liked – Lowest # likes to highest.
    • most-commented – Highest # of comments to lowest.
    • least-commented – Lowest # of comments to highest.
    • random – Random order.
  • links – Wrap the images with a link to the photo on Instagram.
  • limit – Maximum number of Images to add.
  • resolution – Size of the images to get. Available options are:
    • thumbnail (default) – 150×150
    • low_resolution – 306×306
    • standard_resolution – 612×612

Advanced Options

  • before – A callback function called before fetching images from Instagram.
  • after – A callback function called when images have been added to the page.
  • success – A callback function called when Instagram returns valid data. Takes the JSON data as an object argument.
  • error – A callback function called when there is an error fetching images.Takes an error message as a string argument.
  • mock – Fetch data without inserting images into DOM. Use with success callback.
  • filter – A function used to exclude images from your results. The function will be given the image data as an argument, and expects the function to return a boolean. See the example below for more information.

Example Filter (get username + tagged):


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'user',
        userId: 'USER_ID',
        filter: function(image) {
            return image.tags.indexOf('TAG_NAME') >= 0;
        }
    });
    feed.run();
</script>

Templating

The easiest way to control the way Instafeed.js looks on your website is to use the template option. You can write your own HTML markup and it will be used for every image that Instafeed.js fetches.


<script type="text/javascript">
    var feed = new Instafeed({
        get: 'tagged',
        tagName: 'awesome',
        clientId: 'YOUR_CLIENT_ID',
        template: '<a href="{{link}}"><img src="{{image}}" /></a>'
    });
    feed.run();
</script>

Notice the {{link}} and {{image}}? The templating option provides several tags for you to use to control where variables are inserted into your HTML markup. Available keywords are:

  • {{type}} – the image’s type, can be image or video.
  • {{width}} – the image’s width, in pixels.
  • {{height}} – the image’s height, in pixels.
  • {{orientation}} – the image’s orientation, can be square, portrait, or landscape.
  • {{link}} – URL to view the image on Instagram’s website.
  • {{image}} – URL of the image source. The size is inherited from the resolution option.
  • {{caption}} – Image’s caption text. Defaults to empty string if there isn’t one.
  • {{likes}} – Number of likes the image has.
  • {{comments}} – Number of comments the image has.
  • {{location}} – Name of the location associated with the image. Defaults to empty string.
  • {{id}} – Unique ID of the image. Useful if you want to use iPhone hooks to open the images directly in the Instagram app.
  • {{model}} – Full JSON object of the image. If you want to get a property of the image that isn’t listed above you access it using dot-notation. (ex: {{model.filter}} would get the filter used)

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Display Related Posts in WordPress

In this tutorial, we are going to show you two ways to display related posts on your WordPress website.

If you know a bit about bounce rate, you are probably already showing related posts on your website. Essentially, the bounce rate is a metric that measures the percentage of people who land on your website and do completely nothing on the page they entered. So they don’t click on a menu item, a ‘read more’ link or any other internal links on the page. This can have an effect on things such as your AdSense earnings. By following this tutorial and adding Related Posts to your WordPress; you are killing three birds with one stone. You are decreasing your bounce rate, increasing your AdSense income, and lastly, you are increasing your page views. As always, we will show you two methods in which you can add related posts to your WordPress website.

How to Display Related Posts in WordPress without a Plugin

As always, we start with our preferred method of adding this without a plugin. In our example, we are going to display two related posts which link to the post. We are adding the featured image, the category, the date, the title and a read more button.

The code can simply be pasted into your single.php file in a position in which you want to display your related posts.


// Related Posts
$tags = wp_get_post_tags($post->ID);
if ($tags) {
	echo '<h3>Related Posts</h3>';
	$first_tag = $tags[0]->term_id;

	$args=array(
		'tag__in' => array($first_tag),
		'post__not_in' => array($post->ID),
		'posts_per_page' => 2, // How many Posts to display
		'caller_get_posts' => 1 // A way to turn sticky posts off in a query.
	);
	$my_query = new WP_Query($args);
	if( $my_query->have_posts() ) {
		while ($my_query->have_posts()) : $my_query->the_post(); ?>										
			<a href="<?php the_permalink(); ?>">
				<?php if(get_the_post_thumbnail_url()) { ?>
    				<img alt="Related - <?php the_title(); ?>" src="<?php echo get_the_post_thumbnail_url(); ?>" />
    			<?php } else { ?>
    				<div class="img-holder"></div>
    			<?php } ?>	
			</a>												
			<?php $category = get_the_category(); ?>
			<p><?php echo $category[0]->cat_name; ?> / <?php echo get_the_date(); ?></p>													
			<a href="<?php the_permalink() ?>" rel="bookmark"><h4><?php the_title(); ?></h4></a>
			<a class="btn" href="<?php the_permalink(); ?>">Read More</a>
	<?php
	endwhile;
	}
wp_reset_query();
}

How to Display Related Posts in WordPress with a Plugin

A plugin can be used instead to do a similar thing. We used Yet Another Related Posts Plugin (YARPP) which gives a list of posts or pages related to the current blog post.

The key features of this plugin are:

  • You can use thumbnail or list view for your related content.
  • It will display related posts, pages, and custom post types.
  • It has a templating system which gives you advanced control of how your results are displayed.
  • It has an advanced and versatile algorithm. This is a fully customisable algorithm which considers post titles, content, tags, categories, and custom taxonomies. A very great feature to ensure your posts are accurately related to the post.
  • It includes an option to display related posts in RSS feeds with custom display options.
  • It includes REST API support which enables you to embed related posts in your web or JavaScript-driven app!
  • It includes shortcode support. So you can simply add the [yarpp] shortcode to place related posts anywhere you like.
  • It supports HTTPS and WordPress Multisite
  • And it's a plugin that is maintained with regular updates

Sounds good right? Download YARPP.

Conclusion

We now know of two methods on how we can add Related Posts to our WordPress website. We also now know the importance of how this can improve our bounce rate. So, which method did you prefer? Let us know in the comments below!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Remove Website URL Field from WordPress Comment Form

In this tutorial, we are going to show you how to remove the Website URL Field which appears by default in the WordPress comment form.

As you might be aware, spam comments are a big issue for any WordPress Blog. The biggest reason you get spam comments as well is for people to get a backlink to their website using the Website URL field that appears in the comment form by default.

Since most of the spam is generated by automated bots, you can combat this with free tools and plugins. The trickiest part is to discourage spam comments submitted by real people. These are generally comments submitted by actual users are tend to either be off-topic, irrelevant, but also add no value to the discussion of the post. A good tool for this is Akismet along with removing the URL field from the comment form.

We are going to show you two ways to remove the Website URL Field; first one being with custom code and the second with the use of a plugin.

How to Manually Remove the Website URL Field From WordPress Comment Form

We always supply the manual removal first, as if you can get away without adding additional plugins to your website, it’s always better. What you need to do is actually quite simple; simply add the below code to your functions.php file and jobs a good’n.


add_filter('comment_form_default_fields', 'unset_url_field');
function unset_url_field($fields){
    if(isset($fields['url']))
       unset($fields['url']);
       return $fields;
}

What this does is simply removes the Website URL field from your WordPress comment form.

How to Remove the Website URL Field From WordPress Comment Form With A Plugin

If you want to go ahead with the plugin method, again, this is very simple. All you need to do is install and activate the Comment Link Remove and Other Comment Tools plugin

First, you need to install and activate the Comment Link Remove and Comment Tools plugin. For detailed instructions, please follow our step by step guide on how to install a WordPress plugin.

Once activated, you will see a new menu item called QC CLR Settings in the left sidebar of your WordPress Dashboard. Clicking on this will take you to the plugins settings page as shown below:

The main option to select is the “Remove WEBSITE Field from Comment Form” option, then simply scroll down and click “Save Changes”.

Now to check, log out of WordPress and view any of your posts and you will see the field is now removed.

Do note, the comments that are already approved will still have their author names linked to their website URL.

To remove them, you need to go back to the settings page of this plugin and check the box next to the “Remove hyperlink from comment AUTHOR Bio” option.

Once you save the changes, the links from the existing comments will be removed as well.

Conclusion

We hope this tutorial has helped you in removing the website URL field from the WordPress comment form.

In relation to spam, you might also want to check out the following blog post:

How to stop spam emails coming from WordPress’ Contact Form 7

If this has helped, feel free to leave a comment below!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Import WordPress Posts Including Images From One WordPress Site To Another

Today, we are going to show you how to import the images from WordPress posts from one website to another.

I’m sure you have tried going to Tools –> Import / Export and checking the box to include images and then you see that only the post content gets imported right?

Why the images do not get imported

The reason for this is the export step that causes issues with the image attachment. The WordPress export feature doesn’t include the ‘attachment’ post type unless you select the All content export option. If you are simply just trying to export posts from one website to another; you will lose your attachments, unfortunately.

If you do a compare from exporting just Posts and All content, the issue is quite obvious. Within the first file; in which we specified we only wanted Published statuses, the attachments are referenced in the posts, but the attachment table is ignored. In the second file, in which we exported All Statuses; the attachment table is included. In other words, the WordPress export function defines Attachment posts as something other than Published. Seems a bit of a pain but fortunately, we have a solution to the problem.

Imagine if you had a blog with 900 posts all with featured images and images within the posts and then there wasn’t a way to import this to a new site? Well, whenever there is a problem, there is always a good solution 😉

How to get your images into your new website…

Okay so if you are only wanting to import/export posts with images, then we recommend using the Auto Upload Images plugin, which can be used even to upload the images after you’ve imported the posts already.

What exactly does this plugin do?

  • It looks for image URLs in your posts (imported posts do still have image URLs in them, but they point to the site the content was exported from);
  • It then gets those external images and uploads them to the local WordPress uploads directory and adds the images to the media library;
  • And finally, it replaces the old image URLs with new URLs.

This process is easy to do and is relatively quick. Once you’ve finished the import, you can remove the plugin once the work is completed.

Step by step process

Step 1: Prepare your export file from the old website

Simply go to Tools > Export and export your posts only.

Step 2: Import your posts into your new website

On your new website, again go to Tools > Import and import the posts you exported. The importer has an option to download and import file attachments, but this won’t work if you’re not migrating all content, so you can simply ignore this option.

Step 3: Install and activate the Auto Upload Images plugin

Download the Auto Upload Images plugin and add it to your plugins folder, or simply search the name in your new website and install and activate the plugin. This will add an option under Settings > Auto Upload Images, but the default settings are all you need.

Step 4: Get the image from your old site into your new site

As of now, the plugin doesn’t have an option to automatically go through your posts and bulk upload all the images. Instead of this, it updates each post individually when you save them. If you have a lot of blog posts on your website, this can be some serious tedious work but we have a solution to that. You can go to your posts overview screen and bulk update your posts.

So what you do here is you select multiple posts and then under Bulk Actions; choose Edit and press the Apply button. Then, without making any adjustments, click the Update button. Depending on your server you may get a timeout error as the process runs, so it’s a good idea to do this maybe 20 to 50 posts at a time.

To change the Pagination, you can click Screen Options at the top right and change the default value to the value of your choice.

Step 5: Check your posts and deactivate/uninstall the plugin

When all is done you can check your posts and confirm they now reference local images. You then no longer need the plugin and you can safely deactivate and delete it.

Do note, it’s always a good idea to make a backup of your new site first (at least of your site’s database).

Alternative Solution?

The other solution is to use the Export Featured Images plugin. Although the plugin hasn’t been updated in a very long time, it still works! This will allow you to export the featured images from posts or custom post types (CPT’s) by creating a WordPress XML export including the images.

Step by step process

  • First export the posts from your old site via Tool > Export and Import the posts to your new website
  • Then use this plugin in your old site and go to Tools > Export Featured Images and select post types. This will create a new .xml file for you.
  • Now, in your new site go to Tool and select WordPress Import. Then select the .xml file which you downloaded in the previous step.

And that’s it, just as simple as that. Now you will have all your posts mapped with featured images, pretty sweet right?

If you have found this helpful, or have a different solution you would like us to mention, please leave a comment below!

Happy Coding.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Build a WordPress Plugin

In this tutorial, I will go through the process of creating a plugin for WordPress. A WordPress plugin extends the WordPress core and is intended to be reusable code or functionality across multiple projects. This is one of the most interesting things about it – you can share your code or functionality on the web.

I am sure many, if not all of you, have already searched for a plugin in the WordPress repository or any of the available market places. This is one of the reasons why WordPress is so widely used. It’s extremely extensible and has a huge community of developers around it. As of today, there are more than 39,000 publicly available free plugins on the WordPress repository.

Creating a Plugin

When creating a WordPress plugin there are some standards to uphold to when doing so. Below I’ll outline some key points to remember when creating your own.

Plugin Name

If you’re planning on making a plugin that doesn’t exist yet you will need to first determine its name. To be extra sure you will want to do a search in the WordPress Plugin repository. Some developers choose a name that describes more of what the plugin does so the end user can establish a quick connection with the name. The name itself can be multiple words.

Plugin Files

Typically a plugin lives within its own folder under wp-content/plugins/ inside your WordPress installation. There is usually at least one PHP file that is typically named after the plugin. So if your plugin was named amazing-plug then your PHP file name would most likely be amazing-plug.php. Using a unique name is crucial so no two plugins use the same name.

You can also choose to split your plugin into multiple files; similar to the way WordPress is built. Assets such as images, CSS, and JavaScript are common to see within installed plugins.

Readme File

Readme files are useful for other developers and users. Usually these files give a quick description of the plugin as well as sometimes offer change logs which indicate previous updates and maintenance announcements to users.

Home Page

If you plan to share you plugin with the WordPress community, having a dedicated home page would be wise. This page can be used as a place to download the plugin, report bugs, and announce updates to your user community.

Standard Plugin File

A plugin must contain a bit of meta information which tells WordPress what it is and how to handle it within your website. Plugins can be installed, deleted, activated, and inactivated. A standard header is introduced below to establish your plugin’s presence. The parameters shown will tell WordPress how to optimize it within your website and WordPress admin area.


<?php
/**
* Plugin Name: My Plugin Name
* Plugin URI: http://mypluginuri.com/
* Description: A brief description about your plugin.
* Version: 1.0 or whatever version of the plugin (pretty self explanatory)
* Author: Plugin Author's Name
* Author URI: Author's website
* License: A "Slug" license name e.g. GPL12
*/

The minimum WordPress needs to establish your file as a plugin is the line

Plugin Name: My Plugin Name

The rest of the information will be displayed within the Admin area under the Plugins section.

Programming the Plugin

Now the time comes to create our own demo plugin. I’ll be working on a local copy of WordPress using the our Divi 2.0 theme. You can follow along whichever method you prefer but to limit any downtime on your website I suggest you work locally or on a testing server. Our blog features other posts about installing WordPress locally if you are new to the concept. Find the links below depending on your platform.

For this tutorial I will be creating a plugin that creates a custom post type for our blog as well as establishes some other custom parameters. This plugin will be useful because we will be able to use it among any theme rather than just modifying one.

Plugin Scope

Our plugin will start with a simple PHP file. We will call this file custom-music-reviews.php. Within our file we will create a custom post type as well as define some new categories within that post type. The purpose of this plugin will be to write music reviews within specific genres without needing to touch code in the future. Each review will have a feature image, excerpt, rating, and genre type.

Starting Off

Assuming you have a local copy of WordPress ready to use, navigate to your wp-content folder inside of a code editor of your choice. Inside that folder you should see a folder called plugins. Inside of that folder create a new folder called custom-music-reviews.

With the folder created create a new file inside it called custom-music-reviews.php.

The path to the file should now be wp-content/plugins/custom-music-reviews/custom-music-reviews.php.

With your new file created we need to add some parameters in comment form like I explained earlier. For our plugin our parameters will look like this:


<?php
/**
* Plugin Name: Custom Music Reviews
* Plugin URI: https://www.elegantthemes.com/
* Description: A custom music review plugin built for example.
* Version: 1.0
* Author: Andy Leverenz
* Author URI: http://justalever.com/
**/

With this information added, save your file and navigate to your WordPress admin area. Click on Plugins on the left side navigation and you should now see our plugin available. Wasn’t that easy?

With our parameters in place our plugin becomes available to activate under “Installed Plugins”.

Even though our file is empty we can go ahead and activate the plugin. Go ahead and do that now. You’ll hopefully notice nothing different about your site with the plugin activate. If you do you probably typed the content above wrong or failed to close the comment.

Adding Our Plugin Code

With our file all set up and plugin active we can now add the inner workings of the plugin which we will be using for this tutorial.

Add the code below:


// Register the Custom Music Review Post Type
 
function register_cpt_music_review() {
 
    $labels = array(
        'name' => _x( 'Music Reviews', 'music_review' ),
        'singular_name' => _x( 'Music Review', 'music_review' ),
        'add_new' => _x( 'Add New', 'music_review' ),
        'add_new_item' => _x( 'Add New Music Review', 'music_review' ),
        'edit_item' => _x( 'Edit Music Review', 'music_review' ),
        'new_item' => _x( 'New Music Review', 'music_review' ),
        'view_item' => _x( 'View Music Review', 'music_review' ),
        'search_items' => _x( 'Search Music Reviews', 'music_review' ),
        'not_found' => _x( 'No music reviews found', 'music_review' ),
        'not_found_in_trash' => _x( 'No music reviews found in Trash', 'music_review' ),
        'parent_item_colon' => _x( 'Parent Music Review:', 'music_review' ),
        'menu_name' => _x( 'Music Reviews', 'music_review' ),
    );
 
    $args = array(
        'labels' => $labels,
        'hierarchical' => true,
        'description' => 'Music reviews filterable by genre',
        'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'page-attributes' ),
        'taxonomies' => array( 'genres' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'menu_position' => 5,
        'menu_icon' => 'dashicons-format-audio',
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );
 
    register_post_type( 'music_review', $args );
}
 
add_action( 'init', 'register_cpt_music_review' );

This code above may look like a lot and almost seem like an unknown language to you if you’re new to WordPress but if not you’ll recognize this code as a Custom Post Type. In this case our custom post type is called music_review. The code is essentially telling WordPress to establish a new type of post within your theme. The post type has parameters that go along with it such as labels, arguments, and more. I won’t go into a ton of detail on how Custom Post Types work because I’ve already covered it within another article on Elegant Themes. Be sure to read it to gain a full understanding.

With our post type set up you can already see it active within the WordPress admin area.

Our custom post type is successfully implemented.

Lets take things one set further and include a custom Taxonomy called Genre inside our plugin. Think of a Taxonomy as a type of categorizing feature that is completely custom. WordPress already includes Categories and Tag support by default but developers can create custom taxonomies to extend their themes or plugins even further.
Read more about WordPress Taxonomies here.

Add the code below under the custom post type function we just added.


function genres_taxonomy() {
    register_taxonomy(
        'genres',
        'music_review',
        array(
            'hierarchical' => true,
            'label' => 'Genres',
            'query_var' => true,
            'rewrite' => array(
                'slug' => 'genre',
                'with_front' => false
            )
        )
    );
}
add_action( 'init', 'genres_taxonomy');

Registering a new Taxonomy is relatively easy. We have made the connection to our custom post type by using the
register_taxonomy() function which creates a new taxonomy called genres and assigns it to our post type music_review.

We need to add one more line to our custom post type to make everything sync up. Add this code just below the supports argument within the custom post type.

Here’s all our plugin code up until this point. For better legibility I’ve stripped our code of any comments we had prior to this.


function register_cpt_music_review() {
 
    $labels = array(
        'name' => _x( 'Music Reviews', 'music_review' ),
        'singular_name' => _x( 'Music Review', 'music_review' ),
        'add_new' => _x( 'Add New', 'music_review' ),
        'add_new_item' => _x( 'Add New Music Review', 'music_review' ),
        'edit_item' => _x( 'Edit Music Review', 'music_review' ),
        'new_item' => _x( 'New Music Review', 'music_review' ),
        'view_item' => _x( 'View Music Review', 'music_review' ),
        'search_items' => _x( 'Search Music Reviews', 'music_review' ),
        'not_found' => _x( 'No music reviews found', 'music_review' ),
        'not_found_in_trash' => _x( 'No music reviews found in Trash', 'music_review' ),
        'parent_item_colon' => _x( 'Parent Music Review:', 'music_review' ),
        'menu_name' => _x( 'Music Reviews', 'music_review' ),
    );
 
    $args = array(
        'labels' => $labels,
        'hierarchical' => true,
        'description' => 'Music reviews filterable by genre',
        'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'page-attributes' ),
        'taxonomies' => array( 'genres' ),
        'public' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'menu_position' => 5,
        'menu_icon' => 'dashicons-format-audio',
        'show_in_nav_menus' => true,
        'publicly_queryable' => true,
        'exclude_from_search' => false,
        'has_archive' => true,
        'query_var' => true,
        'can_export' => true,
        'rewrite' => true,
        'capability_type' => 'post'
    );
 
    register_post_type( 'music_review', $args );
}
 
add_action( 'init', 'register_cpt_music_review' );
 
function genres_taxonomy() {
    register_taxonomy(
        'genres',
        'music_review',
        array(
            'hierarchical' => true,
            'label' => 'Genres',
            'query_var' => true,
            'rewrite' => array(
                'slug' => 'genre',
                'with_front' => false
            )
        )
    );
}
add_action( 'init', 'genres_taxonomy');

The only line that changed was the 'taxonomies' => array('genre') line within our custom post type. I added this line to tell our custom post type to connect to our new taxonomy and use it instead of the default category or tag structure WordPress comes installed with.

If you’ve made it this far you can now visit your WordPress admin area and see your new custom post type and taxonomy(Genres) present. Congrats!

custom-pt-and-tax-available
Our custom post type and taxonomy are successfully implemented. Here we can add a new Music Review which contains various types of genres decided upon by the user.

Getting Our Code To Output
Below I’ll try adding a new music review. You should see the new Genres section that we set up with our custom Taxonomy. With some data entered I’ll publish the post.

new-music-review
Create a new music review as an example.

At this point we have our functionality set up within our plugin.

In order to make things effortless we will rely on the plugin to create a new page called Music Reviews. The page will be referenced by our plugin and output any new music reviews the user posts. We are doing this so the user doesn’t have to edit a single line of code.

Tying it All Together

Our code now works but we should create a page that will use

<code class="language-PHP">
// Function used to automatically create Music Reviews page.
function create_music_review_pages()
  {
   //post status and options
    $post = array(
          'comment_status' => 'open',
          'ping_status' =>  'closed' ,
          'post_date' => date('Y-m-d H:i:s'),
          'post_name' => 'music_review',
          'post_status' => 'publish' ,
          'post_title' => 'Music Reviews',
          'post_type' => 'page',
    );
    //insert page and save the id
    $newvalue = wp_insert_post( $post, false );
    //save the id in the database
    update_option( 'mrpage', $newvalue );
  }

And finally we need to create our Music Reviews page once the plugin is activated. Adding the code below initiates the function we just wrote above ( function create_music_review_pages(){…}).


// // Activates function if plugin is activated
register_activation_hook( __FILE__, 'create_music_review_pages');

Testing

Our plugin should be ready to test at this point. Lets create an example music review and see what outputs.

new-music-review-test
Create another music review to verify our plugin is working correctly.

If you click View Music Review once the post is published you should be taken to a screen which looks similar to the image below. Your theme and styles may vary…

You may notice that I modified the menu to include our new Music Reviews page. Doing this gives us easy access.

With your menu in place and saved click on Music Reviews to see all the posts we have made so far.

Based on the page template supplied by your theme the Music Review should output all together and be clickable through to the single review template. You will probably notice that the music review I posted earlier has output as well as the one we just created.

Our feature image, title, genre, and review all have posted successfully. Our plugin works!

To verify, you can deactivate the plugin and reinstall it or activate it. Upon doing so a new Page called Music Reviews should be created. You can delete or reuse the one from before if there are duplicates but there should be only one “Music Reviews” page. We could have added a function to delete and restore this page within our plugin but I wanted to keep things as simple as possible.

Finish

Our plugin is a relatively simple one. You can extend it so much further by including it’s own predefined templates, custom widgets, more taxonomies and so much more. Creating a plugin is no easy feat. You will want to plan your plugin before even moving to development. Knowing what you can an can’t do with WordPress before coding your own plugin is a crucial step to developing a quality one. The plugin create in this tutorial is meant to teach by example. There are better standards to follow and more useful practices to endure. Be sure to read the WordPress Codex and get familiar with the WordPress Plugin API. If a plugin isn’t out there and you need custom functionality for your website then I stronger encourage trying to create your own!

All album covers and rights belong to their creators. Elegant Themes does not own or have any relation to the artists being reviewed in this tutorial. Imagery and titles were used by example only.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share