How to Setup Automatic WordPress Backup with CodeGuard

Do you want to create a time machine for your website? Having an automatic cloud backup of your WordPress site is the first step in securing your website because it gives you the option to revert changes should anything go wrong. In this article, we… Read More »

The post How to Setup Automatic WordPress Backup with CodeGuard appeared first on WPBeginner.

Do you want to create a time machine for your website? Having an automatic cloud backup of your WordPress site is the first step in securing your website because it gives you the option to revert changes should anything go wrong. In this article, we will show you how to setup an automatic WordPress backup with CodeGuard along with sharing our honest CodeGuard review, so you can make an educated decision.

Setting up WordPress Backup Using CodeGuard

What is CodeGuard?

CodeGuard is a website backup service that can automatically backup your WordPress site and save it on the cloud. It also allows you to track your changes daily.

There are plenty of WordPress backup plugins available, and we have created a list of the best WordPress backup plugins.

However, using a plugin means you will have to keep it up to date, and in most cases the backups aren’t stored properly on an offsite location.

If you are managing client websites, then managing all backups separately is quite difficult. Not to mention that clients can accidentally turn off backups.

CodeGuard is a paid backup service that works on all website platforms including WordPress. Their monthly plans start from $5/month for 1 site and unlimited databases with up to 5GB storage. They also offer a free 14 day trial on all their plans.

We decided to give CodeGuard a try because it makes a bold claim of being “a time machine for your website”. In this CodeGuard review, we will put that claim to test.

Let’s start with setting up WordPress backups through CodeGuard.

Setting up WordPress Backup on CodeGuard

First thing you need to do is visit CodeGuard website and click on Start Your Free Trial button.

Start your free trial by clicking on the signup button

This will bring you to the signup form. Fill it out and click on ‘start my free trial’ button. You will be asked to enter a password for your account.

It’s essential that you use a strong password (See how to manage passwords guide for WordPress users), and then click on the next step button.

Enter password for your account

This will bring you to the add website page. First you need to enter your website’s URL and then provide your FTP information.

Adding your website's FTP or SFTP information

If you do not know your FTP username or password, then please contact your WordPress hosting provider. You can also find this information in the email your WordPress hosting provider sent you when you signed up. Alternately, you can also locate this information using cPanel by clicking on FTP or FTP manager.

After entering your FTP/SFTP information, click on the test connection button. CodeGuard will show a success message. You can now click on the connect your website button.

Connect website

CodeGuard will connect to your website, and it will show you all the files stored on your server.

You will need to select the folder that contains all your WordPress files and then click ‘select root directory’ button to continue.

Select root directory

Now scroll down a bit, and you will see ‘Select website content’ section. You need to select all your files and folders.

Simply click on the top folder and all the files inside it will be automatically selected. Next, click on the begin first backup button to continue.

Select website content

You will see a success message. CodeGuard will automatically start downloading your WordPress files to their cloud servers in the background.

You will be asked to add your WordPress database for backup.

Files added successfully

The next step is to connect your database and to do that you will need the following information.

  • Your database hostname or IP address
  • MySQL username
  • MySQL user password

You can find this information in your WordPress website’s wp-config.php file itself. Alternatively, you can contact your web host to provide you this information.

If you connect to your host using localhost as your hostname, then you will need to enter your domain name as the hostname.

On the other hand, if you use a hostname like mysql.example.com, then you will have to enter that or add your MySQL server’s IP address.

Add database

Enter your database connection information. Before you click on the next step button, you will need to copy the IP addresses shown under the Helpful Tips box on the right.

Your web host will not allow an external IP to connect to your database unless you explicitly allow it access. To do that, you need whitelist these IP addresses.

Simply login to your cPanel account and click on the Remote MySQL icon.

Remote MySQL in cPanel

Copy and paste an IP address and then click on add host button. Repeat for all IP addresses given by CodeGuard.

Once you are done, come back to the CodeGuard’s add database screen and click on the next step button.

CodeGuard will connect to your database now. If you have more than one database, then it will ask you to select one. Choose your WordPress database and click on add database button.

CodeGuard will now start backing up your database to their cloud servers. Upon completion it will show your database and some basic WordPress stats.

Database backed up

That’s all you have successfully backed up your WordPress site and database on CodeGuard’s cloud servers.

How to Restore Site and Database from CodeGuard Backups

As a website owner, you need to be sure that the backup solution you are using for your site is easy to restore. CodeGuard offers automatic restore options which allow you to restore your WordPress files and database with one click.

Site restore from backups on CodeGuard

You can also download your backups to your own computer to perform a manual recovery.

CodeGuard Review

CodeGuard really measures up to the claim of being a time machine for your website. Using the FTP / MySQL method, you can backup just about any website including WordPress and your other sites.

We always recommend storing your backups on third-party cloud servers which makes CodeGuard an ideal backup solution for anyone starting out.

While having backups is a choice, we strongly recommend that you have one vs not. We’ve had too many users whose sites were hacked, and they had no backup (which means literally losing years of content).

Regular site backups are the best insurance policy you can purchase for your web based business.

We strongly recommend that you use a WordPress backup solution, and CodeGuard is definitely among the top of our list.

See the full list of our recommended WordPress backup plugins.

That’s all. We hope this article helped you setup automatic WordPress backups with CodeGuard and you found our CodeGuard review helpful. You may also want to see our guide on 11 things to do before launching a WordPress site.

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

The post How to Setup Automatic WordPress Backup with CodeGuard appeared first on WPBeginner.

How to Add Beautiful Mobile App Badges in WordPress

Do you want to create a mobile apps review blog using WordPress? Mobile app review sites not only help users find apps, but you can also make money out of them by signing up as an affiliate to paid apps. In this article, we will… Read More »

The post How to Add Beautiful Mobile App Badges in WordPress appeared first on WPBeginner.

Do you want to create a mobile apps review blog using WordPress? Mobile app review sites not only help users find apps, but you can also make money out of them by signing up as an affiliate to paid apps. In this article, we will show you how to add beautiful mobile app badges in WordPress with WP-AppBox.

Displaying mobile apps in WordPress with beautiful banners

First thing you need to do is install and activate the WP-AppBox plugin. Upon activation, you need to visit Settings » WP-AppBox page to configure the plugin.

Settings for WP-Appbox

WP-AppBox is a powerful plugin with lots of options. We will start by first visiting the settings tab. This is where all the general settings for the Appbox and the badges reside.

The default settings should work for most sites, but you can review and change them if you want.

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

General settings for appbox and badges

If you want to make money as an affiliate, then you will need to click on affiliate IDs tab to enter your app store affiliate ID.

Currently the plugin supports Mac app store and Amazon Partnernet.

Adding your app store affiliate id

If you run a multi-author blog and want authors to use their own affiliate IDs, then you need to activate custom ID. Enabling custom ID will allow authors to visit their profile and add their own affiliate IDs if they want.

Allowing authors to add their own affiliate IDs

The next step is to choose which stores you want to use on your site. Simply click on the buttons tab and then select custom settings from button behavior drop down menu.

Select which stores you want to add

WP-AppBox supports these stores:

  • Google Play Apps
  • (Mac) App Store
  • Amazon Apps
  • Windows Store
  • WordPress
  • Steam
  • Chrome Web Store
  • Firefox Extensions
  • Firefox Marketplace
  • Good Old Games
  • Opera Add-ons

You can select which stores you want to be visible in the post editor. You can also show a button for each store or add these buttons under one WP-Appbox button.

Adding Apps in Your WordPress Posts and Pages

WP-Appbox makes it super easy to add apps into your posts and pages. Simply create a new post and you will notice the appbox buttons in the post editor.

Appbox buttons in WordPress visual post editor

Clicking on a button will add a simple shortcode to your post. For example, clicking on the play store button will add a shortcode like this:

[appbox googleplay ]

You will now need to visit the app store to locate the app you want to add. Copy the app ID from the address bar and add it into the shortcode like this:

[appbox googleplay com.gameloft.android.ANMP.GloftDMHM]

You can add multiple app badges to a post. Once you are done, simply save your post and preview it.

You will see the app information displayed in a beautiful app badge with a download link.

App badge showcasing an app from play store

Changing the App Badges Style and Appearance

WP-Appbox comes with different built-in styles for app badges. You can select the app badges by clicking on the App-Badge tab on the plugin’s settings page.

Choose a default badge style

You can choose different styles for different stores or choose a default style for all your app badges.

Alternatively, you can override this setting in the shortcode by adding the format “compact”, “Screenshots” and “screenshots-only” in the shortcode.

App banners in compact format

We hope this article helped you add beautiful mobile app badges in WordPress. You may also want to check out our guide on how to add post rating system in WordPress.

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

The post How to Add Beautiful Mobile App Badges in WordPress appeared first on WPBeginner.

How to Move Custom Domain Blogger Blog to WordPress

In our Blogger to WordPress migration tutorial, one of our readers asked us for the step by step guide on moving custom domain blogger website to WordPress. Blogger allows you to use 3rd party custom domains as well as Google domains with your blog. In… Read More »

The post How to Move Custom Domain Blogger Blog to WordPress appeared first on WPBeginner.

In our Blogger to WordPress migration tutorial, one of our readers asked us for the step by step guide on moving custom domain blogger website to WordPress. Blogger allows you to use 3rd party custom domains as well as Google domains with your blog. In this article, we will show you how to move custom domain blogger blog to WordPress.

Moving Blogger blog on custom domain to WordPress

Note: If you’re looking for moving a normal Blogger subdomain blog to WordPress, then see our guide on how to switch from Blogger to WordPress.

Only use this tutorial, if you are trying to move a Blogger site on a custom domain to WordPress.

Step 1: Getting Started

Before we start, it is important to note that this guide is for the self hosted WordPress blog. See our guide on the difference between self hosted WordPress.org site vs free WordPress.com blog.

In order to get started, you will need a WordPress hosting provider to setup your self hosted WordPress website. We recommend Bluehost because they are an officially recommended hosting provider of WordPress, and they will give WPBeginner users 50% off discount.

If you want a Bluehost alternative, then take a look at Siteground who also offer the same special offer to WPBeginner users.

Step 2: Change DNS Settings

Blogger allows you to use any domain name registered by a 3rd party. U.S. based users can also use a domain registered with Google Domains.

When you first setup the domain pointing to your Blogger blog, you were asked to add CNAME and A records to your domain’s DNS records. You will need to delete those records and add your WordPress host’s DNS settings.

You can get DNS settings required by your WordPress hosting provider from their documentation or support websites. A typical DNS nameserver looks something like this:

NS1.Bluehost.com
NS2.Bluehost.com

In this guide, we will show you how to update DNS settings in Godaddy. If you have registered your domain with some other registrar don’t worry. The basic settings are the same on all domain registrars.

Important: DNS changes may take anywhere between a few hours to one or even two days to fully propagate. During this time, you can access your Blogger blog by logging into your account.

Changing DNS Settings in GoDaddy

Log in to your Godaddy account and click on the manage button next to domains. Click on the gear icon next to your domain and then select manage DNS.

Launching DNS manager in GoDaddy

You will see your domain information page. Next, you need to click on the DNS Zone File. This is where all the DNS level records for your domain are stored.

Launch DNS Zone File in GoDaddy

On the DNS Zone File page, you need to locate the A record and CNAME aliases you added for your Blogger blog and delete them. Click on save changes button to apply your changes.

The next step is to setup nameservers for your WordPress hosting provider. Go back to manage DNS page for your domain and then click on manage under the namservers section.

Nameservers

On the next page you need to click on custom and then click on edit nameservers link to add your new WordPress hosts nameservers.

Edit nameservers

Click on the save button to make your DNS changes go live.

Step 3: Remove Redirect

Your Bloggger blog’s original blogspot.com address is redirecting users to your custom domain. Since we have changed the domain settings, we need to remove this from Blogger too.

Simply log into your Blogger account and go to Settings » Basic page. Under the publishing section, click on the cross icon to cancel the redirect.

Remove custom domain redirection from Blogger

Step 4: Install WordPress

If your domain’s DNS has propagated now, you can now install WordPress on your hosting provider.

If your domain is registered on a 3rd party service other than your web host, then you will need to add the hosting for the domain. For example, in BlueHost you will add your domain as an Addon domain through cPanel unless it is the main domain on your account.

After adding domain to your new host, the next step is to install WordPress. Follow the instructions in our complete WordPress installation tutorial.

After successful installation of WordPress on your custom domain, you will be ready to import content from your Blogger blog.

Step 5: Export Content From Blogger

Before you can import content into WordPress, first you need to export it from your Blogger blog.

Blogger allows you to export content in an XML file.

Login to your Blogger blog and visit Settings » Other page. Under the blog tools, click on the Export Blog link.

Exporting your Blogger blog

This will bring up a popup where you need to click on the Download Blog button.

Depending on the file size, it may take a few seconds or a few minutes. Once you have your data, it is time to import it into your WordPress site.

Step 6: Import Blogger Blog into WordPress

Login to your WordPress admin area and visit Tools » Import page. There you will see a list of importers for different services. You need to click on Blogger to install the Blogger importer.

Blogger import tool in WordPress

This will bring up a popup where you need to click on the Insall button. WordPress will now download and install the Blogger Importer plugin for you. Once it is finished installing the plugin, you need to click on Activate Plugin and Run Importer link to continue.

Run importer

On the Import Blogger screen, WordPress will ask you to upload the XML file. Simply click on choose file button and upload the XML file you downloaded earlier. Click on the Upload file and import button to continue.

Upload export file

WordPress will now import your blogger posts from blogger, once it is finished you will be asked to assign an author to the imported posts. You can assign your blogger posts to an existing author or create a new one.

Congratulations! you have successfully imported your Blogger blog into WordPress. However, you still need to make sure that you don’t loose any search rankings and that visitors to your old blog can easily land to the same content on your new WordPress powered website.

Step 7: Setup Permalinks

WordPress comes with a feature that allows you to set up SEO friendly URL structure. However, since you are importing content from Blogger, you would want your URL structure to be as close to your Blogger URL structure as possible. To set permalinks you need to go to Settings » Permalinks and paste this in the custom structure field:

/%year%/%monthnum%/%postname%.html

Changing permalink structure in WordPress

Setp 8: Setup Feed Redirects

You have successfully redirected your Blogger blog to WordPress. However, users who have subscribed to your Blogger RSS feed will stop receiving updates.

You need to redirect feed requests to your WordPress feeds. This can be easily achieved by editing .htaccess file in your WordPress site’s root folder. If you can’t find your .htaccess file, then see this tutorial.

Start by connecting to your WordPress site using an FTP client. You will need to enable ‘Show Hidden Files’ option in your FTP client settings. If you are using Filezilla, you will find this option under Server menu.

Show hidden files in Filezilla

Once you are connected to your website, you will find the .htaccess file in your WordPress site’s root directory. You need to edit this file and paste the following code before any other code in the file.

<IfModule mod_rewrite.c>
   RewriteEngine on
   RewriteRule atom.xml /feed? [L,R=301]
   RewriteRule rss.xml /feed? [L,R=301]
   RewriteRule ^feeds/posts/?.*$ /feed? [L,R=301]
   RewriteRule ^feeds/comments/?.*$ /comments/feed? [L,R=301]
</IfModule>

Save your changes and upload the .htaccess file back to the server. Your Blogger feed subscribers will now be redirected to your WordPress site’s feed.

Customizing Your WordPress Site

WordPress comes thousands of beautiful themes and extremely powerful plugins.

See our guide on how to choose the perfect theme for your WordPress site. As for plugins, take a look at WPBeginner’s blueprint to find out the plugins and tools we use on this website.

As a new WordPress user you will often need help. WPBeginner is the largest WordPress resource site for beginners. See how you can make the most out of WPBeginner’s free resources.

We hope this article helped you move your custom domain blogger blog to WordPress. You may also want to see our list of 40 useful tools to manage and grow your WordPress blog.

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

The post How to Move Custom Domain Blogger Blog to WordPress appeared first on WPBeginner.

16 Sources for Free Public Domain and CC0-Licensed Images

Are you looking for free royalty free public domain and CC0-Licensed images for your blog? High quality images can boost the engagement level of your website. In this article, we will show you 16 great websites where you can find free public domain and CC0-Licensed… Read More »

The post 16 Sources for Free Public Domain and CC0-Licensed Images appeared first on WPBeginner.

Are you looking for free royalty free public domain and CC0-Licensed images for your blog? High quality images can boost the engagement level of your website. In this article, we will show you 16 great websites where you can find free public domain and CC0-Licensed images that you can use anywhere.

Best sources to find public domain and cc0 licensed images

Why Use Free Public Domain or CC0-Licensed Images?

All images on the web are protected by copyright. Even if the copyright is not mentioned, you should assume that they are. Using them without permission is illegal.

While you can buy high quality royalty-free images from stock photo websites like ShutterStock, not everyone has the budget to buy licensed photographs and images.

That’s when images with public domain and CC0 license comes in handy.

Public domain is the term used to describe works whose licenses have expired, or works that are explicitly released with no restriction on their usage.

CC0 is a license that allows copyright owners to release their works with no restrictions at all.

Images under public domain or CC0-License can be used by anyone for any purpose. As a website owner you can use these images in your blog posts, featured images, slider, image galleries, backgrounds, and basically anywhere else you want.

Having said that, let’s take a look at some of the best curated sources for free public domain or CC0-Licensed images.

1. Public Domain Archive

Public Domain Archive

A very well organized and large collection of public domain photographs. You can easily browse images filed under categories or use the search feature.

2. Unsplash

Unsplash

A very popular destination for high quality CC0 licensed photographs. The site releases 10 photos every 10 days. It has a nice search feature which you can use to find images matching certain themes like nature, office, work, etc.

3. Little Visuals

Little Visuals

Little Visuals is a beautiful curation of hundreds of hi-res stock photos that you can use on your website. It has a search feature that you can use to locate images, or you can also click on the tags below each image to find similar photographs.

4. Public Domain Pictures

Public Domain Pictures

Public Domain Pictures offers free high quality images, graphics, and vectors for downloads. Images are sorted into categories for easy browsing.

5. New Old Stock

New Old Stock

As the name suggests, this website features a beautiful collection of vintage photographs that are now in public domain.

6. Pixabay

Pixabay

Pixabay offers a large collection of free images. The site updated on a regular basis so you will find new and less used images there.

7. Pickup Image

Pickup Image

Pickup Image offers a huge collection of public domain images. The site can be easily browsed through tags or you can try the search. It also offers free clipart and graphics.

8. SplitShire

SplitShire

SplitShire is a beautiful collection of photographs by Daniel Nanescu released under CC0 license. You can browse the site by using tags filter, or view images in mosaic view.

9. The British Library

The flickr account of The British Library showcases over a million illustrations, drawings, and works taken from 17th, 18th, and 19th century books. All these works are released under CC0 license and can be used anywhere without restriction.

10. Magdeleine

Magdeleine

Magdeleine is a very easy to browse resource for free photographs. It offers both public domain and images that require attribution, so make sure that the image you are downloading is marked under public domain.

11. LibreShot

LibreShot

LibreShot features works of photographer Martin Vorel released under public domain.

12. PDPics

PDPics

An easy to browse collection of free public domain stock photos. PDPics has a large collection of thousands of public domain images that you can download and use in your blog posts.

13. Reusable Art

Reusable Art

Reusable art is a collection of more than 3000 vintage drawings, illustrations and artworks. All works displayed on the website are under public domain.

14. Skitterphoto

Skitterphoto

A beautifully curated collection of CC0 Licensed images. The site features works of theirs own photographers so you will find less used and unique photographs.

15. StockSnap.io

StockSnap.io

StockSnap is a curation of beautiful free stock photos where hundreds of images are added weekly.

16. Barn Images

Barn Images

Barn Images is a beautifully curated collection of CC0 Licensed images. You can browse images in categories or tags, or you can search for keywords. All images are available in high resolution for free downloads.

That’s all, we hope this article helped you find best sources for free public domain and CC0-Licensed images for your website. You may also want to see our guide on how to speed up WordPress by saving images optimized for web.

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

The post 16 Sources for Free Public Domain and CC0-Licensed Images appeared first on WPBeginner.

How to Add a Shortcodes User Interface in WordPress with Shortcake

If you are developing a WordPress site for a client, then it’s likely that you will have shortcodes for your clients to use. The problem is that many beginners don’t know how to add shortcodes and if there are complex parameters involved, then it’s even… Read More »

The post How to Add a Shortcodes User Interface in WordPress with Shortcake appeared first on WPBeginner.

If you are developing a WordPress site for a client, then it’s likely that you will have shortcodes for your clients to use. The problem is that many beginners don’t know how to add shortcodes and if there are complex parameters involved, then it’s even more difficult. Shortcake provides a solution by adding a user interface for shortcodes. In this article, 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.

Shortcake Bakery Plugin

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 '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}

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.

Inserting your shortcode in a post or page

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

User interface for a simple shortcode

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 '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}

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:

Call to action buttons created with shortcode

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’.

Selecting post element or shortcode to insert

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

Shortcode UI with a select field

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 article helped you learn how to add a user interface for shortcodes in WordPress with Shortcake. You may also want to take a look at these 7 essential tips for using shortcodes in WordPress.

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

The post How to Add a Shortcodes User Interface in WordPress with Shortcake appeared first on WPBeginner.

How to Compare Active WordPress Plugins Between Two Sites

Have you ever wanted to compare active WordPress plugins between two sites? WordPress has a search feature on the plugins page, but it is not as efficient when comparing installed plugins. In this article, we will show you how to compare active WordPress plugins between… Read More »

The post How to Compare Active WordPress Plugins Between Two Sites appeared first on WPBeginner.

Have you ever wanted to compare active WordPress plugins between two sites? WordPress has a search feature on the plugins page, but it is not as efficient when comparing installed plugins. In this article, we will show you how to compare active WordPress plugins between two sites.

Search and compare installed plugins in WordPress

Improving Installed Plugins Page in WordPress

The default plugins page in WordPress shows a list of plugins installed on your site. It has a search box on the top right corner and options to manage installed plugins.

Default plugins screen in WordPress

If you have many plugins installed, then it becomes hard to locate a plugin by scrolling down the page. See our guide on how many plugins you should install on your WordPress site.

The installed plugin search is quite slow because it reloads the whole page again.

Users who manage multiple WordPress sites find it hard to compare plugins by switching back and forth between open tabs.

Let’s see how you can improve installed plugins page in WordPress by adding a better search and compare feature.

Adding Quicker Search and Compare on Plugins Page in WordPress

First thing you need to do is install and activate the Better Plugins plugin. Upon activation, simply type few characters of a plugin name in the ‘search installed plugins’ box, and it will start sorting plugins that match.

Quickly searching for installed plugins

This is really helpful when you want to see if you have a plugin installed, but don’t want to scroll down the plugins list. It is faster than the default WordPress installed plugin search, and saves time in managing your plugins.

Compare Plugins Between Two WordPress Sites

Another great feature of Better Plugins is that it allows you to compare installed plugins between two WordPress sites.

Install and activate the Better Plugins Plugin on both WordPress sites. Simply go to Plugins » Compare page on first site, and copy the plugin code.

Compare plugins

Now go to the admin area of the other WordPress site and visit Plugins » Compare page. Paste the code you copied from the first website in the text area and click on compare plugins button.

Paste plugin code on the other WordPress site for comparison

The plugin will now show you the list of missing plugins that are not installed on the second website. You can click on a link to learn more about a plugin and install it.

Missing plugins

It will also show you a tab for the first website where you can see all the plugins used on that site. This feature can also be used as a way to tell someone what plugins you have installed, in case they want to install the same plugins as you.

We hope this article helped you easily compare active WordPress plugins between two sites. You may also want to see our list of 40 useful tools to manage and grow your WordPress blog.

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

The post How to Compare Active WordPress Plugins Between Two Sites appeared first on WPBeginner.

How to Show Recent Posts as a Drop Down in WordPress

You’re probably familiar with the Category widget in WordPress. Recently, one of our readers asked us if it was possible to display recent posts in a drop down as well. In this article, we will show you how to show recent posts as a drop… Read More »

The post How to Show Recent Posts as a Drop Down in WordPress appeared first on WPBeginner.

You’re probably familiar with the Category widget in WordPress. Recently, one of our readers asked us if it was possible to display recent posts in a drop down as well. In this article, we will show you how to show recent posts as a drop down in WordPress.

Add recent posts as drop down menu

Why and Who Needs Recent Posts in Drop Down?

WordPress comes with a built-in recent posts widget that you can add to any sidebar or widget ready area.

This widget simply displays a list of recent posts, and you can choose the number of posts you want to show. But if you want to show more than 5-10 posts, then the list will take a lot of space in your sidebar.

Some WordPress users may need a compact way to display recent posts. In that case, using drop downs or collapsible lists can help you save space.

Let’s take a look at couple of different ways to show recent posts as a drop down menu in WordPress.

Showing WordPress Recent Posts in a Plain Drop Down Menu (Manual Code)

This method uses the built-in wp_get_recent_posts function. All you need to do is copy and paste the following code in your theme’s functions.php file or a site-specific plugin.

function wpb_recentposts_dropdown() { 
$string .= '<select id="rpdropdown">
			<option  value="" selected>Select a Post<option>';

$args = array( 'numberposts' => '5', 'post_status' => 'publish' );

$recent_posts = wp_get_recent_posts($args);
	foreach( $recent_posts as $recent ){
		$string .= '<option value="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</option> ';
	}

$string .= '</select>
			<script type="text/javascript"> var urlmenu = document.getElementById( "rpdropdown" ); urlmenu.onchange = function() {
      		window.open( this.options[ this.selectedIndex ].value, "_self" );
 			};
			</script>';

return $string;
} 
add_shortcode('rp_dropdown', 'wpb_recentposts_dropdown');
add_filter('widget_text','do_shortcode');

Now you can use the shortcode [rp_dropdown] in your WordPress post, pages, and text widgets. It will look like this:

Recent posts in a drop down menu on a WordPress site

Adding Collapsible Recent Posts Using Plugin

The above method simply lists your recent posts in a drop down form. Another way to save space is by adding a collapsible list of recent posts which expands when users click on it.

First thing you need to do is install and activate the Collapse-O-Matic plugin. It works out of the box, and there are no settings for you to configure.

The plugin simply allows you to show anything in a collapsible menu using a shortcode.

Before we use this plugin, we need a way to easily show recent posts anywhere we want. Simply add this code to your theme’s functions.php file or a site-specific plugin.

function wpb_recentposts() { 

$string .= '<ul>';
$args = array( 'numberposts' => '5', 'post_status' => 'publish' );
$recent_posts = wp_get_recent_posts($args);
	foreach( $recent_posts as $recent ){
		$string .= '<li><a href="' . get_permalink($recent["ID"]) . '">' .   $recent["post_title"].'</a></li> ';
	}
$string .= '</ul>';
return $string;
} 
add_shortcode('recentposts', 'wpb_recentposts');
add_filter('widget_text','do_shortcode');

This code simply allows you to display a list of recent posts using the shortcode [recentposts].

Now we will add our shortcode in the Collapse-O-Matic shortcode to create a collapsible list of recent posts.

Simply add the shortcode like this:

[expand title="Recent Posts"][recentposts][/expand]

You can add this shortcode in a text widget, posts, or pages on your WordPress site. This is how it looked on our test site.

Collapsable list of recent posts

That’s all, we hope this article helped you show recent posts as drop down in WordPress. You may also want to see these 6 tips to create a killer editorial calendar in WordPress.

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

The post How to Show Recent Posts as a Drop Down in WordPress appeared first on WPBeginner.

How to Add a Fullscreen Responsive Menu in WordPress

Have you seen the full screen responsive menus being used on popular blogs? These menu appear on the site with a default hamburger icon. When a user clicks or taps on it, a fullscreen overlay containing the site menu appears with a beautiful effect. In… Read More »

The post How to Add a Fullscreen Responsive Menu in WordPress appeared first on WPBeginner.

Have you seen the full screen responsive menus being used on popular blogs? These menu appear on the site with a default hamburger icon. When a user clicks or taps on it, a fullscreen overlay containing the site menu appears with a beautiful effect. In this article, we will show you how to add a fullscreen responsive menu in WordPress without writing any code.

Fullscreen responsive menu overlay in WordPress

First thing you need to do is install and activate the DC Fullscreen Responsive Menu plugin. Upon activation, you need to visit Appearance » DC Fullscreen Menu page to configure the plugin settings.

Fullscreen menu settings

You need to choose a menu from the drop down list. If you have not created a navigation menu yet, then check out our guide on how to add navigation menus in WordPress.

After that, you need to select the direction of the slide-in effect for the fullscreen menu. You can choose from top, right, left, bottom, or no effect.

DC Fullscreen Responsive menu allows you to choose a background and text color for the menu as well. Make sure that you choose a combination that is easy on eyes and matches your color scheme.

When choosing the text or background color, always consider how these colors affect readability.

You can choose a Google font for the menu text. Simply enter the font name, and the plugin will load it for you.

Don’t forget to uncheck the box next to the option ‘Tiny link to Author’. If left checked, it will add a link back to the plugin author’s website on all your pages.

Lastly, click on the Submit button to store your settings. You can now visit your website to see the menu in action. We would recommend you to resize your browser to see how the menu behaves on different screen sizes.

We hope this article helped you add a fullscreen responsive menu to your WordPress site. You may also want to see our guide on how to add slide panel menu in WordPress.

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

The post How to Add a Fullscreen Responsive Menu in WordPress appeared first on WPBeginner.

Should You Network Activate All Plugins on WordPress Multisite

In our article about why you do not see all the plugins your WordPress multisite network, we covered the topic of network activating plugins. This also brings the question of whether you should network activate all plugins on your WordPress multisite. On a multisite network,… Read More »

The post Should You Network Activate All Plugins on WordPress Multisite appeared first on WPBeginner.

In our article about why you do not see all the plugins your WordPress multisite network, we covered the topic of network activating plugins. This also brings the question of whether you should network activate all plugins on your WordPress multisite. On a multisite network, a super admin has the option to either activate a plugin only on the main site, or activate it across the network. In this article, we will discuss how and when you should network activate plugins on WordPress multisite.

Which plugins to activate across multisite network in WordPress

Network Activate vs Activate in WordPress multisite

On a WordPress multisite, only Super Admins can install plugins. After the installation, super admins have these options.

1. Network Activate – Using this option super admins can activate a plugin across the network.
2. Activate – They can also activate a plugin for the main/root site.
3. Individual Sites – Lastly they can allow individual site administrators to activate plugins themselves.

When you log in to your WordPress multisite’s main site, you will be able to see two different plugins screen.

The first one is on the main admin sidebar. It is for plugins installed and available for activation on your main site.

The second plugins screen is located under My Sites » Network Admin » Plugins. This is where you will install new plugins and manage them for the entire network.

2pluginsscreen

If you want site admins to activate or deactivate a plugin, then all you need to do is install a plugin and do not network activate it.

By default, other individual site admins cannot see the plugins menu in their site’s admin area. This means that they cannot activate or deactivate installed plugins. However, it is possible for super admins to give site admins access to the plugins menu.

Here is how you would add plugins menu for child sites on a WordPress multisite network.

Add Plugins Menu for Child Sites in WordPress Multisite

To enable plugin’s menu for individual sites, you need to switch to Network Admin dashboard.

Switching to network admin dashboard

On the network admin dashboard, visit Settings » Network Settings. Scroll down to the bottom of the page and you will see the checkbox to enable plugins menu.

Enabling plugins menu for individual sites

That’s all, save your settings and individual sites will now be able to see plugins menu. They will also be able to see installed plugins and activate them for their site.

Note: Individual site admins cannot see network activated plugins.

Which WordPress Plugins Should be Network Activated?

You don’t need to network activate all plugins on your WordPress multisite network.

For example, if you want to use a plugin on the main site, then you need to install it and then switch to the plugins page for your main site to activate the plugin.

Individual site admins cannot install plugins on their own in a multisite network. This is why you need to install plugins for them. But you don’t need to network activate all those plugins.

Lastly, there are plugins that you might want to activate across your entire network such as Yoast SEO or OptinMonster. Once a plugin is network activated, individual site admins will not be able to deactivate it.

That’s all we hope this article helped you learn how to properly use network activate feature for plugins on your WordPress multisite. You may also want to see our tutorial on how to add/remove default pages in WordPress multisite.

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

The post Should You Network Activate All Plugins on WordPress Multisite appeared first on WPBeginner.

Why Do You Not See All Plugins on WordPress Multisite Installs

One of our users recently asked us why they can’t see some of their plugins on their WordPress multisite network. After they installed the plugins, they were unable to locate them on the plugins page in their multisite network. In this article, we will explain… Read More »

The post Why Do You Not See All Plugins on WordPress Multisite Installs appeared first on WPBeginner.

One of our users recently asked us why they can’t see some of their plugins on their WordPress multisite network. After they installed the plugins, they were unable to locate them on the plugins page in their multisite network. In this article, we will explain why do you not see all plugins on WordPress multisite installs, and how to fix this.

Managing plugins on WordPress multisite

WordPress multisite network allows you to run multiple sites using the single WordPress software. You can install themes and plugins for all sites on that multi-site network.

There are two different plugin screens when you login as super admin to the main site of your WordPress multisite.

The first plugin screen allows you to activate plugins just on your main site, but it does not allow you to install new plugins.

The second plugins screen is located under My Sites » Network Admin » Plugins, it allows you to manage plugins for your entire network.

Site and Network Plugins menus

To install a plugin on a WordPress multisite, you need to visit My Sites » Network Admin » Plugins.

Adding a new plugin in a WordPress multisite network

On the network plugins page, click on the add new button to install a new plugin.

Adding a new plugin in WordPress multisite

After the installation, you will see a link to network activate the plugin. Once you network activate a plugin, it will be available to all the sites on your multisite network.

Individual site admins cannot deactivate or remove it. This is why network activated plugins do not show up on your root site or any child site’s plugins page.

Network activate plugin

If you decide not to network activate a plugin after installation, then you will be able to see the plugin in your root site’s Plugins screen. From this screen, you can activate the plugin only for the root site.

Activating a plugin for an individual site on a multisite network

Plugins on Subsites of a Multisite Network

When you setup WordPress multisite network, you automatically become the Super Admin. This gives you the capability to install plugins and themes for all other sites on the network.

The site admins for an individual site on your network do not have the capability to update, install, or remove plugins. That’s why site admins will not even see the plugins menu in their admin bar.

No plugins page for a subsite in a WordPress multisite

However, if you network activate a plugin, then the site admins will be able to configure the plugin settings for their own site.

WordPress SEO settings on a subsite of a multisite network

Add Plugins Menu for Child Sites in WordPress Multisite

To enable plugin’s menu for individual sites, you need to switch to Network Admin dashboard.

Switching to network admin dashboard

On the network admin dashboard, visit Settings » Network Settings. Scroll down to the bottom of the page and you will see the checkbox to enable plugins menu.

Enabling plugins menu for individual sites

That’s all, save your settings and individual sites will now be able to see plugins menu. They will also be able to see installed plugins and activate them for their site.

Note: Individual site admins cannot see network activated plugins.

That’s all, we hope this article helped you understand why do you not see all plugins on WordPress multisite installs. You may also want to check out our guide on how to add/remove default pages in WordPress multisite.

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

The post Why Do You Not See All Plugins on WordPress Multisite Installs appeared first on WPBeginner.