Tutorials Archives - Page 13 of 29

May 26, 2019

Easy Guide to Add Google Analytics Event Tracking in WordPress

In this tutorial, we will learn how to add Google Analytics event tracking in WordPress.

What is Event Tracking in Google Analytics

Event tracking allows you to measure user interactions on your website. These interactions can be things like clicking on a button, playing a video, downloading files, submitting forms, etc.

Let’s suppose you added a video to your product page, and now want to know how effective is it for your conversions. Event tracking allows you to track how many users played the video, so you can judge for yourself.

Another example is ajax based form submissions. If you are using Gravity Forms or any other contact form plugin, then form submission does not result into a new pageview.

Using event tracking you can see how users interacted with a form.

The same goes for file downloads included on a page. You can track how many users downloaded a file using event tracking and even which button on the page was clicked most.

Event tracking is different from tracking links in Google analytics. You can track links in WordPress using Google Analytics by simply adding UTM source to a link.

These measurable actions allow you to see how users behave on your site. You can then change your strategy to add content that generate more user engagement and interaction. Ultimately this means more sales and conversions on your website.

Getting Started

Before getting started, you will need to setup and install Google Analytics on your WordPress site. If you are not familiar with using Google Analytics, then you can try our beginner’s guide on how to use Google Analytics.

If you are already using Google Analytics, then you can jump right into event tracking.

Upgrade to Universal Analytics Code

There are currently two type of Google Analytics implemented on websites. Google is slowly pushing out the older code by asking webmasters to use newer ‘Universal Analytics Code’.

If your Google Analytics code looks like this:

  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  ga('create', 'UA-XXXXXX-1', 'auto');
  ga('send', 'pageview');

Then you are already using the newer Universal Analytics code. There is no action required, and you can move on to the next step.

If your code does not look like this, then you are probably using the older Google Analytics code. You will need to upgrade, Google has a detailed upgrade guide for that. Basically if you are not using advanced tracking features in Google Analytics, then you can just switch the old code with the new one from your account’s property settings.

Creating Your Event in Google Analytics

First you need to create your event in your Google Analytics account. Simply log into your Analytics dashboard and click on the Admin link at the top. If you have multiple websites under your analytics account, then make sure that you are viewing the dashboard for the site where you want to add the event.

There are three columns under the admin page. Click on the ‘Goals’ link under the ‘View’ column.

Next, click on the new goal button to create a goal. From the Goal Setup options, you need to select the custom option and then click on the next button to continue.

This will bring you to the Goal Description step. You need to provide a title for your custom goal, this is something that will help you identify the goal inside Google Analytics.

Under the goal type, you need to select Event. After that click on the next step button to continue.

The last step is to provide goal details. You will need to enter the event conditions here.

Analytics will count a conversion when all these conditions match.

In this example, we have provided a category and action for the event. We entered a label for the event and provided a value. Depending on what kind of event you are trying to create, you can name your own category, actions, and labels.

If you feel that your event should pass on a value that can be calculated, then you can enter that value here. However, for most common event tracking using the value to be 0 works fine too.

Finally click on the create goal button to save and activate the goal. You have successfully enabled tracking for an event in Google Analytics. The next step is to track this event on your website and send data to Google Analytics.

Adding Google Analytics Event Tracking onClick

The easiest and perhaps the fastest way to add Google Analytics event tracking is by using the onclick method. This method simply sends event conditions to Google Analytics when user clicks on an element.

In this example, we are tracking users who click on eBook download link.

We will add the onClick parameter to the download link using this format.

onClick="ga('send', 'event', 'category', 'action', 'label', 'value');"

You will need to replace category, action, label, and value with your event’s conditions. Finally your download link would look like this.

Download Free Ebook

That’s all, when users click on this link, it will send an event to Google Analytics which will appear in your site’s reporting.

Adding Event Tracking Using Google Tag Manager

Google Tag Manager is an online tool which allows you to add different tracking codes as tags under one dashboard.

You can also use it to create tags to track events in your Google Analytics account. The main benefit of using Google Tag Manager is that you wouldn’t have to manually insert code into your website, and you can manage all your tags from one location.

If you have already added Google analytics tracking code to your site manually, then you will need to remove it. Use our tutorial on how to install and setup Google Tag Manager in WordPress to add Analytics code to your website.

Once you have successfully added Google Analytics tag in the tag manager, the next step is to create a new trigger. For the sake of this tutorial, we will be tracking a contact form submission as an event.

Click on Triggers in tag manager and then click on the New button.

This will bring you to the trigger creation wizard. This is where you would choose event select form.

Under the configure trigger section, you need to uncheck wait for tags and check validation options. Next, click on the continue button to go to the next step.

In the next step, you need to choose when to fire the trigger. If your page has only one form on it, then you can choose all forms. If your page has more than one form, then you click on some forms button.

If your page has more than one form and you want to track a specific form, then you need to tell Google Tag Manager which form you want to track. When you click on some form buttons you will see filters.

A filter is simply a set of instructions like if A matches B, then fire the trigger. You need to select new variable.

Selecting new variable will bring up a popup where you can create your own variable. Select DOM element as your variable type. Next, under configure variable choose ID as your selection method.

Now you will need to find your form’s ID. Visit the form page on your WordPress site, take the mouse over to the first form field and select inspect element.

Your browser screen will split into two. You will see the HTML for your page in the bottom screen. The id attribute will either be part of your <form> tag or the div containing the form.

Copy and paste the form ID under the element ID and attribute. Next, click on the create variable button.

You will come back to Fire on filter where you can now select your custom variable. In the matching rule select ‘contains’ and then enter your form’s ID again.

Now click on the create trigger button to continue.

The next step is to create a tag for the event we want to track. In the Google Tag Manager, click on Tags and then click on the New button.

This will bring you to tag creation wizard. Select Google Analytics as your product and then click on the continue button.

Now you need to choose Universal Analytics as your tag type. You will be asked to provide your Google Analytics tracking ID. You can obtain this from your Google Analytics account.

Under the track type you need to select event and then provide category, action, label, and value information. In this example we used Forms for category, form submission for action, contact form as label, and submitted as the value.

Click on the continue button to proceed to next step. This is where you select when to fire the tag. Click on the more button and select the trigger you created earlier.

Finally you can click on the create tag button to save your tag.

Remember that saving a tag does not make it go live on your website. You will still need to click on the publish button to make it live.

That’s all, you can now go to your website and submit the form. Go to Real Time » Events in your Analytics account and you will see your event tracked and recorded.

Using the tag manager you can create different kind of events and manage them all from Google Tag Manager. It also saves you from editing your WordPress themes or adding tracking code manually.

We hope this tutorial helped you add Google Analytics event tracking in your WordPress site.

May 26, 2019

Easy Guide to Add a Shortcodes User Interface in WordPress

In this tutorial, we will show you how to add a user interface for shortcodes in WordPress with Shortcake.

What is Shortcake?

WordPress offers an easier way to add executeable code inside posts and pages by using shortcodes. Many WordPress themes and plugins allow users to add additional functionality using shortcodes. However, sometimes these shortcodes can become complicated when a user needs to enter parameters for customization.

For example, in a typical WordPress theme if there is a shortcode to enter a button, then the user will probably need to add atleast two to five parameters. Like this:

[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”]

Shortcake is a WordPress plugin and a proposed future WordPress feature. It aims to solve this problem by providing a user interface to enter these values. This will make shortcodes a lot easier to use.

Getting Started

This tutorial is aimed for users who are new to WordPress development. Beginner level users who like to tweak their WordPress themes would also find this tutorial helpful.

Having said that, let’s get started.

First thing you need to do is install and activate the Shortcake (Shortcode UI)plugin.

You will now need a shortcode that accepts a few parameters of user input. If you need a little refresher, here is how to add a shortcode in WordPress.

For the sake of this tutorial we will be using a simple shortcode that allows users to insert a button into their WordPress posts or pages. Here is the sample code for our shortcode, and you can use this by adding it to your theme’s functions file or in a site-specific plugin.

add_shortcode( 'cta-button', 'cta_button_shortcode' );
 
function cta_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '' . $title . '';
}

You will also need to add some CSS to style your button. You can use this CSS in your theme’s stylesheet.

.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

This is how a user will use the shortcode in their posts and pages:

[cta-button title="Download Now" url="http://example.com"]

Now that we have a shortcode that accepts parameters, let’s create a UI for it.

Registering Your Shortcode User Interface with Shortcake

Shortcake API allows you to register your shortcode’s user interface. You will need to describe what attributes your shortcode accepts, input field types, and which post types will show the shortcode UI.

Here is a sample code snippet we will use to register our shortcode’s UI. We have tried to explain each step with inline comments. You can paste this in your theme’s functions file or in a site-specific plugin.

shortcode_ui_register_for_shortcode(
 
/** Your shortcode handle */
'cta-button',
 
/** Your Shortcode label and icon */
array(
 
/** Label for your shortcode user interface. This part is required. */
'label' => 'Add Button',
 
/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-lightbulb',
 
/** Shortcode Attributes */
'attrs'          => array(
 
/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/
 
array(
 
/** This label will appear in user interface */
'label'        => 'Title',
 
/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',
 
/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',
 
/** Add a helpful description for users
'description'  => 'Please enter the button text',
),
 
/** Now we will define UI for the URL field */
 
array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),
),
),
 
/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

That’s all, you can now see the shortcode user interface in action by editing a post. Simply click on the Add Media button above a post editor. This will bring up the media uploader where you will notice a new item ‘Insert Post Element’ in the left hand column. Clicking on it will show you a button to insert your code.

Clicking on the thumbnail containing the lightbulb icon and your shortcake label will show you the shortcode UI.

Adding Shortcode With Multiple Inputs

In the first example, we used a very basic shortcode. Now lets make it a little more complicated and a lot more useful. Let’s add a shortcode that allows users to choose a button color.

First we will add the shortcode. It is nearly the same shortcode, except that it now excepts user input for color.

add_shortcode( 'mybutton', 'my_button_shortcode' );
 
function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '' . $title . '';
}

Since our shortcode will be showing buttons in different colors so we will need to update our CSS too. You can use this CSS in your theme’s stylesheet.

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
}
 
.blue-button  {
    background-color: #50A7EC;
}
.orange-button { 
background-color:#FF7B00;
} 
 
.green-button { 
background-color:#29B577;
}

This is how the buttons will look like:

Now that our shortcode is ready, the next step is to register shortcode UI. We will be using essentially the same code, except that this time we have another parameter for color and we are offering users to select from blue, orange, or green buttons.

shortcode_ui_register_for_shortcode(
 
/** Your shortcode handle */
'mybutton',
 
/** Your Shortcode label and icon */
array(
 
/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',
 
/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',
 
/** Shortcode Attributes */
'attrs'          => array(
 
/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/
 
array(
 
/** This label will appear in user interface */
'label'        => 'Title',
 
/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',
 
/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',
 
/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),
 
/** Now we will define UI for the URL field */
 
array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),
 
/** Finally we will define the UI for Color Selection */
array(
'label'     => 'Color',
'attr'      => 'color',
 
/** We will use select field instead of text */
'type'      => 'select',
    'options' => array(
        'blue'      => 'Blue',
        'orange'    => 'Orange',
        'green'     => 'Green',
    ),
),
 
),
 
/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

That’s all, you can now edit a post or page and click on the Add Media button. You will notice your newly added shortcode under ‘Insert Post Elements’.

Clicking on your newly created shortcode will bring up the shortcode UI, where you can simply enter the values.

You can download the code used in this tutorial as a plugin.

wpb-shortcake-tutorial

We have included the CSS, so you can use it to study or use it to add your own call to action buttons in WordPress using an easier user interface. Feel free to modify the source and play with it.

We hope this tutorial helped you learn how to add a user interface for shortcodes in WordPress with Shortcake.

May 21, 2019May 21, 2019

Easy Guide to Display Random Posts in WordPress

In this tutorial, we will learn how to easily display random posts in WordPress.

Why and Where to Display Random Posts in WordPress

By default WordPress lists your blog posts in reverse chronological order (from newest to oldest). This allows users to see your latest posts first.

However, most users will not get to see your older articles. If you have been running your site for quite some time now, then your older articles will not be prominently displayed anywhere.

One way to overcome this is by making internal linking a habit. Linking to your older articles in new posts will help users discover them. It will also increase your pageviews and improve your SEO score.

Another way around that is by displaying random posts in your sidebar. This way your users will get to discover posts that they would not see otherwise.

Having said that, let’s see how you can easily display random posts in WordPress.

Method 1: Display Random Posts in WordPress with a Plugin

This method is easier and is recommended for most users.

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

Upon activation, you need to visit Appearance » Widgets page. You will notice a new widget labeled ‘Random Posts’ under the list of available widget.

You need to add this widget to a sidebar. See our guide on how to add and use widgets in WordPress.

Now, you will be able to see the widget settings. The default options will work for most websites, you can just click on the save button.

Advanced Random Posts Widget is a powerful plugin with tons of customization options. You can select different post types, show excerpt, show thumbnail, and skip posts you don’t want to show, or displays posts from specific categories or tags.

For more experienced users, the plugin also allows you to add custom before and after HTML, and your own custom CSS as well.

Don’t forget to click on the save button to store your widget settings. You can now visit your website to see random posts widget in action.

Method 2: Display Random Posts in WordPress Using Code

This method requires you to add code to your WordPress theme files. See our guide on how to copy paste code in WordPress.

First thing you need to do is add this code in your theme’s functions.php file or a site-specific plugin.

function wpb_rand_posts() { 
 
$args = array(
    'post_type' => 'post',
    'orderby'   => 'rand',
    'posts_per_page' => 5, 
    );
 
$the_query = new WP_Query( $args );
 
if ( $the_query->have_posts() ) {
 
$string .= ''; 
while ( $the_query->have_posts() ) { $the_query->the_post(); $string .= '
 	'. get_the_title() .'

'; } $string .= ' '; 
/* Restore original Post Data */ 
wp_reset_postdata(); } 
else { $string .= 'no posts found'; } return $string; } 
add_shortcode('wpb-random-posts','wpb_rand_posts'); add_filter('widget_text', 'do_shortcode');

This code simply creates a function that displays 5 random posts. It then creates a shortcode so that you can easily display random posts anywhere on your site. Lastly, it enables shortcodes to be executed inside WordPress widgets so that you can use shortcode inside a text widget.

Now you can display random posts inside a WordPress post, page, or text widget using the shortcode [wpb-random-posts].

That’s all, we hope this tutorial helped you learn how to display random posts in WordPress.

May 21, 2019

Easy Guide to Add Title Attribute in WordPress Navigation Menus

In this tutorial, we will learn how to add title attribute in WordPress navigation menus.

Why Use Title Attribute in Menus?

Title attribute is an HTML attribute that can be added to any element, but it is most commonly used with links and images.

It allows you to provide additional information about the link or the image. See our guide on the difference between what’s the difference between image alt text vs title.

Typically web browsers display the title attribute on mouseover. This allows users to see where this link will take them before they click on it.

Screen readers may also read title attribute, but many screen readers will ignore it and will only read the anchor text.

Some SEO experts believe that it is not useful while others claim it is useful for SEO as it allows you to provide more context.

WordPress removed title attribute from insert link popup in version 4.2. However, you can easily add the title and rel=nofollow options in insert link popup.

Adding Title Attribute in WordPress Navigation Menu Items

First you need to visit Appearance » Menus page and click on the ‘Screen Options‘ tab in the top right corner of the screen.

This will bring down a menu where you need to click on the check box next to Title Attribute option.

After that, simply scroll down and click on any menu item in your existing menu to expand it. You will now see the title attribute field.

You can now add the text you want to use as title and then repeat it for all menu items in your navigation menu.

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

You can now visit your website and take your mouse to a link in navigation menu. You will see the title attribute displayed as tooltip.

You can take title attributes even further with jQuery by adding fancy tooltips on mouseover effect.

We hope this tutorial helped you learn how to add title attribute in WordPress navigation menus.

May 21, 2019

Easy Guide to Move WordPress to a New Host or Server With No Downtime

In this tutorial, we will learn how to properly migrate your WordPress site to a new host with no downtime.

Step 1: Choose Your New WordPress Host

If you are stuck with a slow web host even after optimizing WordPress speedand performance, then it’s time to move your WordPress site to a new host that can handle your growing traffic.

Step 2: Set Up Duplicator for Easy Migration

The first thing you need to do is install and activate the free Duplicator plugin on the website that you want to move. For more details, see our step by step guide on how to install a WordPress plugin.

Duplicator is a free plugin that we highly recommend. You can also use it to move your website to a new domain name without losing SEO.

However, in this article we will walk you through how to use it to migrate your WordPress site to a new hosting provider with zero downtime.

Once you have installed and activated Duplicator, go to the Duplicator » Packages page in your WordPress admin area.

Next, you need to click the ‘Create New’ button in the top right corner.

After that, click the Next button and follow the steps to create your package.

Make sure that your scan results check out (everything should say “Good”), and then click the Build button.

The process may take several minutes to complete, so leave the tab open as it works.

Once the process is complete, you will see download options for Installer and the Archive package. You need to click on the ‘One click download’ link to download both files.

The archive file is a copy of your site, and the installer file will automate the installation process for you.

Step 3: Import Your WordPress Site to Your New Host

Now that you have downloaded both the archive and installer files, the next step is to upload them to your new web host.

You can do this by connecting to your new web host using FTP. If you’ve never done this before, check out our beginner’s guide to uploading files via FTP to WordPress.

Normally, you would enter your website’s domain name as host when connecting your FTP client. However, since your domain name is still poiting to your old host, you’ll need to connect by entering your server’s IP address or server host name. You can find this information from your new hosting account’s cpanel dashboard.

If you are unable to find this information, then ask support at your new web host and they will help you out.

Using your FTP client, upload both installer.php file and your archive .zip file to the root directory of your website. This is usually /username/public_html/folder. Again, if you are not sure, then ask your web hosting company.

Make sure that your root directory is completely empty. Some web hosting companies automatically install WordPress when you sign up. If you have WordPress installed in your root directory, then you need to delete WordPress first.

Now you need to upload both the archive zip file and installer.php file to your site’s root directory.

Step 4: Change The Hosts File to Prevent Downtime

Once you’ve uploaded both files to your new host, you need to access the installer.php file in a browser.

The file can be accessed using a URL like this:

http://www.example.com/installer.php

However, this URL will take you to your old web host, and you will get a 404 error. This is because your domain name is still pointing to your old web host.

Normally, folks will tell you to change your domain nameservers and point to your new host. However, that will result in your users seeing a broken website as you migrate it.

We’ll show you how you can access your new site temporarily on your computer, without affecting your old site.

This is done with a hosts file on your computer.

The hosts file can be used to map domain names to specific IP addresses. In this step, we will show you how to add an entry for your domain name in the hosts file so that it points to your new host, but only when using your computer.

Making these changes will allow you to access the files on your new host using your own domain name, while the rest of the world will still be accessing your site from the old host. This ensures 100% uptime.

The first thing you need to do is find the IP address of your new web hosting server. To find this, you need to log into your cPanel dashboard and click on expand stats link in the left-hand sidebar. Your server’s address will be listed as Shared IP Address.

On some web hosting companies you will find this information under ‘Account Information’ heading.

In the next step, Windows users need to go to Programs » All Programs » Accessories, right click on Notepad and select Run as Administrator. A Windows UAC prompt will appear, and you need to click on Yes to launch Notepad with administrator privileges.

On the Notepad screen, go to File » Open and then go to C:\Windows\System32\drivers\etc. Select hosts file and open it.

Mac users will need to open the Terminal app and enter this command to edit hosts file:

sudo nano /private/etc/hosts

For both Windows and Mac users, at the bottom of the hosts file, you need to enter the IP address you copied and then enter your domain name. Like this:

192.168.1.22 www.example.com

Make sure that you replace the IP address with the one you copied from cPanel, and example.com with your own domain name. Save your changes, and you can now access your files on the new host using your domain name on your computer.

Important: Don’t forget to undo the changes you made to hosts file after you have finished the migration (step 6).

Step 5: Creating MySQL Database on Your New Host

Before we run the installer on the new host, first we need to create a MySQL database on your new hosting account. If you have already created a MySQL database then you can jump to the next step.

Creating a Database in cPanel

Go to your new hosting account’s cPanel dashboard, scroll down to Databases section and click on MySQL databases icon.

You will see a field to create a new database. Enter a name for your database, and click “Create Database” button.

After creating MySQL database, scroll down to MySQL Users section. Now provide a username and password for your new user and click on the ‘Create a user’ button.

Next, you need to add user to the database. This will give the username you just created, all the permissions to work on your database.

Scroll down to ‘Add User to a Database’ section. Select the database user you created from the dropdown menu next to user, then select database, and click on the add button.

Your database is now ready to be used with WordPress. Be sure to make note of the database username and password.

Step 6: Begin the Duplicator Migration Process

Now we’re ready to run the installer. Navigate to this address in your browser window, replacing example.com with your domain name:

http://www.example.com/installer.php

The installer will run a few tests and will show you ‘Pass’ next to archive and validation tests. Check the terms and conditions checkbox and continue by clicking on the next button.

Next, you will be asked to enter your MySQL host, database name, username, and password. Host is typically localhost, after that you will enter the details of database you created in previous step.

You can click on the ‘Test Database’ button to make sure you entered correct information. If duplicator is able to connect, you will see a string starting with Pass. Otherwise, you will see the database connection error details.

Click on the next button to continue.

Duplicator will now import your WordPress database from the archive zip into your new database.

Next, it will ask you to update site URL or Path. Since you are not changing domain names, you DON’T need to change anything here.

Click on the next button to continue.

Duplicator will run the final steps and will show you the login button.

You can now login to your WordPress site on the new host to make sure that everything is working as expected.

Step 7: Update Your Domain

At this point, you’ve created a complete copy of your WordPress database and files on your new hosting server. But your domain still points to your old web hosting account.

To update your domain, you need to switch your DNS nameservers. This ensures that your users are taken to the new location of your website when they type your domain into their browsers.

If you registered your domain with your hosting provider, then it’s best to transfer the domain to the new host. If you used a domain registrar like Godaddy, Namecheap, etc, then you need to update your nameservers.

You will need the nameserver information from your new web host. This is usually a couple of URLs that look like this:

ns1.hostname.com
ns2.hostname.com

For the sake of this guide, we will be showing you how to change DNS nameservers with GoDaddy. Depending on your domain registrar or web host, the screenshots may not reflect the setup on your registrar or web host. However the basic concept is the same.

Just look for domain management area and then look for nameservers. If you need assistance with updating your nameservers, you can ask your web hosting company.

First you need to login to your Godaddy account and then click on Domains. After that click on the manage button next to the domain name you want to change.

Under ‘Additional Settings’ section, click on ‘Manage DNs’ to continue.

Now you need to scroll down to the Name servers section and click on the change button.

First you will need to switch the nameserver type dropdown from ‘Default’ to ‘Custom’ and under Nameservers fill in the your new hosting provider’s information.

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

You have successfully changed the nameservers. DNS changes can take 4 – 48 hours to propagate for all users.

Now since you have the same content on your old host and the new host, your users wouldn’t see any difference. Your WordPress migration will be seamless with absolutely no downtime.

To be on the safe side, you can wait to cancel your old hosting account until 7 days after your migration.

We hope that this step by step guide helped you move WordPress to your new host with no downtime whatsoever.

May 21, 2019

Easy Guide to Properly Setup Google AMP on Your WordPress Site

In this tutorial, we will learn how to set up Google AMP in WordPress.

What is Google AMP?

Google AMP stands for Accelerated Mobile Pages. It is an open source initiative supported by technology companies like Google and Twitter. The goal of the project is to make web content load faster for mobile users.

For many mobile users, reading on the web is often slow. Most content rich pages take several seconds to load despite all efforts taken by site owners to speed up their website.

Accelerated Mobile Pages or AMP uses bare minimal HTML and limited Javascript. This allows the content to be hosted on Google AMP Cache. Google can then serve this cached version to users instantly when they click on your link in the search results.

It is very similar to Facebook Instant Articles. However, Instant Articles are limited only to Facebook’s platform, more specifically to their mobile app.

Accelerated Mobile Pages are platform-agnostic and can be used by any app, browser, or web viewer. Currently it is used by Google, Twitter, LinkedIn, Reddit, and others.

Pros and Cons of Google AMP (Accelerated Mobile Pages)

SEO experts claim that Accelerated Mobile Pages will help you rank higher in Google, and it improves the user experience for mobile users on slow internet connections. However, they are several challenges for website owners, bloggers, and marketers.

AMP uses limited set of HTML, JavaScript, and CSS. This means you cannot add certain widgets and features to your mobile AMP website. This limits your ability to add smart email optin forms, facebook like boxes, and other dynamic scripts.

While Google AMP supports Google Analytics, it does not support many other analytics platforms. Same goes for advertising options which are limited to select few advertising platforms.

Despite its limitations, Google is pushing AMP pages by giving them a boost in mobile search.

If significant chunk of your traffic comes from mobile searches, then you may benefit from adding AMP support to improve and maintain your SEO.

Note: There have been a few complaints about Google AMP by bloggers.

First is by Alex Kras who claim that you can potentially lose mobile traffic if you enable Google AMP. Read the article thoroughly because that’s a huge problem, and despite what the Google Tech Lead for AMP project has said, there aren’t any good solutions that address the issue in our opinion.

Second is by Terrence Eden which highlights the difficulties of switching back from Google AMP should you change your mind in the future. We don’t believe this is a major issue because you can do a 301 redirect which several have pointed out in the comment section of his blog posts, but nonetheless it is something you need to think about.

For the reasons above, we are not switching WPCademy to Google AMP just yet.

Setting up Accelerated Mobile Pages or AMP in WordPress

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

Upon activation, you can head over to Appearance » AMP page to see how your site looks on mobile devices using AMP.

You can change the header background and text color on this page. The header background color you choose will also be used for links.

The plugin will also use your site’s icon or logo if your theme supports it. See our guide on how to add a favicon or site icon in WordPress for detailed instructions.

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

You can now visit any single post on your website and add /amp/ at the end of the URL. Like this:

http://example.com/2016/10/my-blog-post/amp/

This will show you a stripped down AMP version of the same post.

If you view the source code of the original post, you will find this line in the HTML:

<link rel="amphtml" href="http://example.com/2016/10/my-blog-post/amp/" />

This line tells search engines and other AMP consuming apps/services where to look for the AMP version of the page.

Troubleshooting:

If you see a 404 error when trying to view the amp version, then here is what you need to do.

Visit Settings » Permalinks page in your WordPress admin and click on the ‘Save Changes’ button. Remember, don’t change anything here, just press the save button. This will refresh your website’s permalink structure.

View Accelerated Mobile Pages in Google Search Console

Want to know how your Accelerated Mobile Pages are doing in Google Search? You can easily check this using the Google Search Console.

Don’t worry if you don’t see your AMP results right away. It may take a while for Google to index your Accelerated Mobile Pages and then show data in Search Console.

Extending and Customizing Your Accelerated Mobile Pages

The AMP plugin for WordPress comes with very limited customization options. However you can use some other WordPress plugins to add few more customizations.

If you are already using Yoast SEO, then you need to install and activate the Glue for Yoast SEO & AMP.

It is an add-on plugin for Yoast SEO and AMP plugins. Upon activation, you need to visit SEO » AMP page to configure plugin settings.

The plugin allows you to enable AMP support for other post types.

On the design tab, you can choose colors and design options. You can also upload a logo and a default header image which will be used when a post does not have its own featured image.

You can switch to the Analytics tab to add your Google Analytics ID.

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

There are many more plugins which will allow you to add related posts, footer widgets, and even social media icons to your AMP pages.

However, you need to make sure to validate your AMP pages after you install any addon plugins.

We hope this tutorial, helped you learn how to set up Accelerated Mobile Pages (AMP) on WordPress.

May 21, 2019

Easy Guide to Add Post Type Archive in WordPress Navigation Menus

In this tutorial, we will learn how to add post type archive in WordPress navigation menus.

Custom Post Type Archives in WordPress

In WordPress, the term ‘Archives’ is used for a list of entries from a post type or taxonomy (like categories and tags).

If archives are enabled for a custom post type, then you can display them on your website. Typically, the URL of your custom post type archive page is in this format:

http://example.com/post-type-slug/

Post type slug is the nice name for your custom post type.

For example, we have a custom post type called ‘Deals’, and you can view its archive page at a URL like this:

https://www.wpcademy.com/deals/

You can place a link to the archive page of your custom post type in your site’s navigation menus. This will allow your users to see all past entries posted in that post type on a single page.

Having said that, let’s see how to add a link to your custom post type archive page in WordPress navigation menus.

Adding Link to Custom Post Type Archive page in Navigation Menus

First, you need to visit Appearance » Menus page. You will notice a tab for each of your custom post type in the left column.

You need to click on the name of your custom post type to expand it and then click on the ‘View all’ tab.

You will see an option for your post type archives. Check the box next to it and then click on the Add to Menu button.

Your custom post type archive will now appear as a menu item in the right column.

By default, it will use your custom post type name with the word archives for the link label.

You may want to change this into something easier. Click on the menu item to edit it and then change its navigation label.

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

You can now visit your website to see the custom post type archive link in your navigation menu.

Just like posts and pages, you can also add a single entry from your post type to navigation menus.

Simply select an entry and then click on add to menu button.

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

My Custom Post Type Doesn’t Appear on Menus Screen

Custom post types need to match some requirements in order to be displayed on Appearance » Menus page.

First you need to make sure that an archive page exists for your custom post type. Typically it is a URL like this:

http://example.com/movies/

Replace example.com with your own domain name and movies with your post type.

If you can see entries from your post type on this page, then this means your post type supports archives but does not support other requirements.

Good news is that you can still add your custom post type archive page as a custom link.

Visit Appearance » Menus page and then click on the ‘Custom Link’ tab to expand it.

Enter the URL of your custom post type archive page in the URL field and add the label you want to display in the link field.

Next, click on the add to menu button, and you will notice the custom link appear in the right column.

You can now click on the save menu button to store your changes.

We hope this tutorial helped you learn how to add post type archive in WordPress navigation menus.