Understanding and Using the WordPress Hook System

We’ve been covering quite a few WordPress web development topics recently, so you’ve probably already heard about hooks, actions, and filters.

These are an essential part of the using the event-driven architecture used by WordPress. And they are your path to creating your own custom “version” of WordPress to suit your needs.

In a nutshell, an event-driven architecture is a way of listening for events that change a particular state and then reacting accordingly. Your reaction, what you write, is how you can create the functionality you desire to extend the functions of WordPress.

As a very simple example, publishing a WordPress post is an example of an event (publish_post) which changes a state.

This is the foundation of the extensibility of WordPress, which has made the CMS such a rich ecosystem, thriving with thousands of feature-rich themes and plugins.

There is another fundamental reason why using WordPress hooks are critical.

Using hooks, you can extend and build upon WordPress without the need to edit any of the core source code.

Actually, let me rephrase that statement.

If anybody you hire for WordPress development (or work for) suggests a core change to the WordPress code, fire them on the spot.

Anybody, who is willing to break the upgradability of your WordPress website has no idea what they are talking about. If they had a grasp on the basics of security, they wouldn’t even think of doing that.

We’ve spoken about this before. Upgrading WordPress (and its themes and plugins) to the latest available version is one of the fundamentals of securing WordPress. Developers who change the core source code will leave your website a sitting duck.

If your hired developers are willing to take such a treacherous path, chances are they are not well-versed in the basics of coding either. It’s very likely they will wreak havoc with the code they write, leaving you (or the people you hire after them) to clean up the mess that they leave behind them.

On the other hand, if you use hooks and all of the other extensibility options WordPress gives you, the upgradability of your WordPress is assured.

That means, whenever a WordPress core update is released, upgrading your WordPress to the latest version won’t break any of your code. You don’t have to worry about the upgrade of your own custom development. As long as the hooks are not deprecated, your customizations will survive the upgrade.

More importantly, your WordPress is kept protected from any WordPress security vulnerability which has been secured through the latest WordPress core update.

Interested in learning more? The WordPress Codex provides a comprehensive guide to hooks, including a code reference for developers.
Interested in learning more? The WordPress Codex provides a comprehensive guide to hooks, including a code reference for developers.

Hooks, Actions or Filters? What’s What?

Hooks are basically events that happen during the execution of the functionality of WordPress, themes or plugins.

But why are they actually called hooks?

Developers who are looking to extend or implement specific functionality can “hook” onto the event as soon as it happens and perform a specific action related to that event.

As WordPress is going through its execution phases, it “checks” to see whether any plugin (or theme) has registered a function to be executed at that point, and if it finds any, those functions are executed at that point.

The WordPress codex, as part of the documentation of the WordPress API, explains Hooks, Actions and Filters quite nicely, but I’m supplementing this information of course.

There are two main types of hooks

  1. Actions (aka Action Hooks)
  2. Filters (aka Filter hooks)

In reality, these are quite similar in what they can achieve, but there are a few subtle differences.

The Difference Between Action Hooks and Filter Hooks

Let’s start with what’s the same before we discuss the differences.

Both actions and filter hooks receive data through a number of parameters.

Actions and filters are also mostly able to do the same thing (if you had to take a look at the WordPress source code, you’ll see that the code functions that implement actions are just wrappers of the filter code functions).

There is though, one key difference between the two types of WordPress hooks.

Filter hooks are required to return a value, action hooks do not.

In essence, with a filter hook, the hooked function gets a specific value, it does its thing and then returns that a modified (or not) version of that value.

An action hook does not need to return a value.

Putting it in more practical terms, with a filter hook, you’re typically working on content, doing your “changes” and then returning that content. For example, as we’ll see below the title_save_pre filter hook works on the post title, whilst the content_save_pre works on the content of the post.

On the other hand, an action hook does something (which can work on data or just use the data) when an event happens. The publish_post action hook triggers when a post is published.

When and How to Use an Action Hook

You should use an action hook if you want to:

  1. Inject HTML or other content into the response buffer
  2. Modify one or more global variables
  3. Modify the parameters passed to your hook function

The way to add an action hook is as follows:

add_action( $hook, $function_to_add, $priority, $accepted_args );

where $hook would be the action you want to hook onto, whilst $function_to_add is the function you’ve written that will be executed when that hook is triggered.

We’ll see some real examples of doing this further on in this article.

How and When to Use a Filter Hook

You can use a filter when you need to do any of the above, but you also want / need to change the value of the data parameter.

In fact, it’s not just a want, it’s a requirement. You must return a value for the parameter if you are using a filter hook.

The way to adding a filter hook is quite similar to the way of adding an action hook:

add_filter( $hook, $function_to_add, $priority, $accepted_args );

Where once again, $hook would be filter hook to use and $function_to_add is the function you’ll be writing.


Join The Academy for WordPress wisdom

Study with the brightest minds in WordPress – developers and business owners who are experts in their field and passionate about teaching. Ask questions, get direct feedback and support, and when you complete a course get full certification.


Learn More

Removing Filter and Action Hooks

Removing WordPress hooks you’ve added is pretty simple. It’s the inverse of adding hooks and has a very similar syntax:

remove_action( $hook, $function_to_remove, $priority);

remove_filter( $hook, $function_to_remove, $priority);

The $priority argument is an optional argument.

In both the add_filter and remove_filter case, the $prioirity determines the order in which the hook triggers if there are several hooks “chained” or running one after the other on the same filter or action hook.

Enough with the Theory, Give Me Some WordPress Hook Examples!

Whilst I’ve mentioned that there are plenty of WordPress hooks you can use, I haven’t shown you exactly what they are so far.

Here is a list of all of the filter hooks you can use, courtesy of the WordPress Codex, whilst this is a list of all the action hooks. As you can see, the functionality within WordPress which you can hook onto is vast.

In fact, it’s unlikely you’ll come across a use-case for which a hook doesn’t exist.

And if you do come across such a use-case, you may want to contribute to WordPress and propose it’s inclusion in future versions of WordPress!

As at the time of writing, there are over 1900 hooks you can use.

Number of WordPress hooks vs version

Let’s see how we can hook onto them to do some simple additional functionality which is not available through the WordPress core.

Filter Hook Example #1

At the very beginning of this article, I mentioned that an example of a state change is the posting of a WordPress article.

For the sake of this example, what we’re going to do is create an attribution link at the bottom of each post, so that if anybody is reposting our articles on their website lock, stock and (two smoking) barrel(s), we’ll have, at the very least one backlink pointing back to our site.

For this reason, we’re going to hook onto the content_save_pre filter hook, which is executed on the post content prior to saving it to the WordPress database.

.gist table { margin-bottom: 0; }

As you can see, being a filter hook we’re changing, then returning, the content.

Filter Hook Example #2

Another pretty simple filter which is actually editing the output. Let’s say, for branding and SEO purposes, you want to append the name of your company to the titles in each WordPress post. Rather than using a SEO plugin, or asking your authors to do this manually, you can create a filter hook which does this as WordPress title is accessed.

.gist table { margin-bottom: 0; }

As you can see, once again, our filter hook example is using title_save_pre to do some changes to the title and then returning it.

Enough of filter examples, let’s go onto a few examples of action hooks. As you’ll see the primary differences with these is going to be that they won’t return any value.

Action Hook Examples #1

You probably (should) know that pressing the Publish button on your post is the end of the publishing phase, but the actual beginning of the marketing phase. In terms of pushing out your content, you might want to start by pushing out the content to Social Networks as soon the post is published. At the very least, you may want to add them to you social media marketing schedule.

Now, if you want to semi-automate that process, you could hook onto the publish_post action hook and post the content to your social media.

.gist table { margin-bottom: 0; }

I won’t dig into the exact code for posting because this depends a lot on what you want to do exactly and there are plenty of tutorials on the interweb for that.

Action Hook Example #2

Let’s say you’ve created a membership plugin site. You’ve also created a number of bonus resources that you want to send as a separate email from the registration email.

What we will do is use the after_signup_user action hook to send an additional email with the bonus content.

.gist table { margin-bottom: 0; }

As can be seen, we are not actually returning any value (since this an action hook, not a filter hook).

The third argument of add_action in the code above is the so-called hook priority that specifies the order in which the function hooked to the after_signup_user action will be executed. The default (if not specific value) will be set to 10.

The fourth argument indicates the number of arguments the function hook will accept, which defaults to 1 if empty.

The Ubiqutious Code Example: Adding Google Analytics to WordPress Using an Action Hook

Just because this is one of the most prevalent examples online, doesn’t mean it isn’t a great example usage of actions hooks!

We’re hooking onto the wp_head action hook to add our Google Analytics code.

.gist table { margin-bottom: 0; }

Where Else Can WordPress Hooks Be Used?

Plugins and themes of course. Both core and custom WordPress plugins and themes will expose their own hooks for developers to be able to add their own custom functionality to the theme or plugin without breaking the theme or plugin.

As for the actual code, simple changes might go in the functions.php file, but there’s no actual specification or limit where the filters should go.

Useful Hooks You Could Use

If you’re convinced about the usefulness of hooks, you might want to make use of a few of these code snippets using hooks.

Useful code snippets for WordPress from WP Theme Detector – quite a few of these are actually making use of various WordPress hooks (Disclaimer: not tested or endorsed).

More useful code snippets for WordPress from WP Kube using various hooks.

And there’s quite a bunch of hooks in this huge list of WordPress tricks.

WordPress Hooks: Your Imagination Is the Only Limit

As you’ve seen in this article, WordPress hooks give you much power and possibilities in extending the core WordPress functions. This gives great power to WordPress designers, developers and even freelancers who just want to perform small tweaks to WordPress.

How to Properly Update Live Published Posts in WordPress

Have you ever had to make significant edits to an already published WordPress post? Maybe you are rewriting an old article or you have to update screenshots because they’re outdated. Since we have to do this on a regular basis on WPBeginner and on our documentations for our suite of products, we have created a workflow that works. In this article, we will show you how to properly update live published posts in WordPress.

How to update live posts in WordPress

The Problem with Updating Live Posts in WordPress

WordPress makes it super easy to create and edit posts. You can edit all posts whenever you want, even after publishing them.

However, when editing live posts, you cannot save them until you are done editing. Saving live posts will immediately make your changes visible.

This is a little problematic for various reasons.

If you’re on a multi-author WordPress site someone may need to approve the changes before they go live.

Not to mention, there will be times where you may not be able to finish all changes in one session.

An easy workaround for this issue is to simply copy a post and paste it as a new draft. You can edit the draft and then paste it to the original post.

The problem with this method is that you cannot set or change featured images, Facebook post thumbnail, tags or categories, etc. This means that you or an editor must make those changes on a live post.

Well if you run into any of these problems, then this article is good news for you.

We will show you how to properly update live posts while making it possible to save them and make any changes without affecting the live version.

Ready? Let’s get started.

Properly Updating Live Posts in WordPress

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

After activating the plugin, you need to visit Posts » All Posts in your WordPress admin. This is where WordPress lists all your published posts and drafts.

All posts

Take your mouse to the post you want to edit and then click on the Revisionize link. This will create a new revision for your published post by cloning the existing post.

Revision of a published post

You can edit the post like you would edit any unpublished draft. You can save your changes as many times as you want without affecting the live post.

You can have your supervisor or editor review the changes for their approval. You can also use public post preview to share it with people outside your organization.

Once you are done editing, you can click on the Publish button. The plugin will then replace your live post with the new version.

What happens to the draft?

It is still stored as a revision draft, allowing you to reuse it again to edit the same published post again.

Revision draft

That’s all, we hope this article helped you learn how to properly update live posts in WordPress. You may also want to see these 14 tips for mastering the WordPress visual editor.

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 Properly Update Live Published Posts in WordPress appeared first on WPBeginner.

The Art Of Upselling Your Clients [White Paper]

Acquiring a new client is a hurdle in itself. Yet to get reoccurring work after the first project is another feat. In this white paper, we’ll dig deeper into the art of upselling by revealing several hacks you can pitch to clients to increase the value you deliver while driving up profits. Master the art here:

White Paper: The Art of Upselling

As an agency, you can introduce certain features to your clients to prolong the work you provide for them. These services can range from web maintenance to speed optimization and more. Learn about these eight agency hacks to upsell your clients and deliver more value, including:

  • Detecting problems with a site’s HTML
  • Getting clients ready for PHP7
  • Using Cross Browser Testing and Google Analytics
  • A/B Testing
  • And more…

Download the guide now to learn about the ways in which you can establish value and upsell your clients with one of these eight proposals in mind.

The post The Art Of Upselling Your Clients [White Paper] appeared first on WP Engine.

Advanced WordPress Development: Using Gulp to Streamline Your Workflow

No matter what languages you’ve used in the past to development websites, you’ve no doubt had to complete menial, monotonous tasks – image optimization, JavaScript minification, concatenation, compiling supersets like SCSS and CoffeeScript to their native counterparts, creating the final build… just to name a few.

Fortunately, build scripts such as Gulp and Grunt can take care of these rather boring tasks for you. All they require is a bit of setup and some command line know-how.

This is the fifth post in our six-part series focusing on WordPress for advanced developers. This series follows on from our popular WordPress Development for Intermediate Users, which introduced you to some meaty coding topics, including theme development in detail, making themes customizer-ready, building plugins, custom post types and taxonomies, queries and loops, custom fields and metadata, and localization.

In this tutorial, we’ll focus on how you can make the most of Gulp; how you can delegate common tasks to Gulp so you can concentrate on more important tasks like actually coding.

Note: It’s important that you have a working knowledge of PHP as this is the foundational language of WordPress for this series, which covers advanced topics aimed at developers. I’ll be referring to code snippets throughout this series.

Installing Gulp

Gulp can be installed easily with npm, which is short for Node Package Manager. Node itself is a hugely popular and wonderfully useful JavaScript runtime environment, which includes npm.To get started first install Node using the handy installer on the

To get started, first install Node using the handy installer on the main Node site.

Next, use the code below to install Gulp. That’s it!

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=install.sh

A Note About Node and npm Packages

npm is a tool that can be used to install packages like Gulp. Most packages are meant to be installed locally – they will only be available in the folder of the project you add them to.

npm uses a special file named package.json, which contains metadata about your project. It’s name, description, version and – most importantly – the packages that it uses.

As a result, Node projects are very agile. You don’t need to share all the packages used or check them into version control. Just make sure package.json is available and anyone will be able to use the npm install command to get all prerequisites in a few seconds.

Some packages – like Gulp – can be installed globally. This is not a requirement, but it is convenient for tools, especially development tools, that we use all the time.

Installing Packages

We’ll be installing a few packages related to Gulp for this tutorial. The syntax to accomplish this is the following:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=npm-install.sh

You can install one or more packages by separating their names with spaces. --save-dev or -D indicates that we’d like to save the packages as development dependencies. They will be placed in the package file for us.

Starting a New Project

For our first example, we’ll create a WordPress theme. You should know how to do that by now: create a new folder in the themes directory, add an index.php and a style.css file with the appropriate information, etc. We’ll also add a package.json file to store our dependencies.

Let’s set all that up within the terminal:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=setup.sh

Issue these commands one-by-one. Note the && in the first command. This allows me to issue a second command, which means that the first line will create a directory and immediately switch to it as well.

The npm init command is a wizard for the package.json file. It will ask you a series of questions and you can press Enter for each to use the defaults.

Questions following the npm init command
Questions following the npm init command

We’ll need to install Gulp locally as well to make sure we can use it within our project. The following command will take care of it for us:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=gulp-install.sh

When you install your first dependency, you’ll see a new folder named node_modules. This will contain hordes of packages (each one you install will have multiple dependencies of its own). You do not need to add this to your repository; all that is needed is the package file.

The package.json file
The package.json file

Gulp Basics

Gulp is essentially a task runner. You define a condition when a task should run and then define exactly what the task should do. For example: if you run gulp optimize in the command line, Gulp should find all images within your project and optimize them.

Since Gulp is a framework and not a magic solution to everything, you need to tell it what the conditions are and what to do when they are met. You use the gulpfile.js file, which contains all the information Gulp needs to perform its tasks.

Let’s create a gulpfile now with minimal information:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=gulpfile.js

The first line imports Gulp itself. This is followed by our first task named “default.” When you type gulp into the command line the default task is run. We’ll be adding some code in there later to make some magic happen!

To create a task from start to finish we’ll need to follow a simple checklist:

  1. Find a package that can perform the task,
  2. Install the package,
  3. Add it to the gulpfile, and
  4. Configure the task by setting the conditions and its options.


Join The Academy for WordPress wisdom

Study with the brightest minds in WordPress – developers and business owners who are experts in their field and passionate about teaching. Ask questions, get direct feedback and support, and when you complete a course get full certification.


Learn More

Your First Gulp Task

Let’s follow the steps above and make the image optimization happen. But before we do that, let’s add a screenshot.png image to our theme. I used a photo from Unsplash, which I cropped to 880×660, the recommended size for this file. It ended up being 1MB.

A quick Google search turned up the gulp-imagemin package, which minifies PNG, GIF and JPG images. Perfect! Installation and usage instructions are usually available on-site. To install this plugin use the following command:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=install-image-opt.sh

To add it to the gulpfile we’ll include it right under our initial inclusion of Gulp itself:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=gulpfile-imageop.js

Finally, we need to define a condition – when a task is run – and tell Gulp what to do. Here’s the code for a new task named “optimize-images”:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=optimize-images.js

Using the src() function, I told Gulp what files to sort through when searching for images. We’re looking for all GIF, JPG, JPEG and PNG files in the root directory and all files in the images directory.

We’re then “piping” the contents of all matched files into a function named imagemin() which we imported at the top of the file; this is the package we installed earlier. This function will modify the stream and pass it on.

We pipe the received stream to the dest() function which describes the output location for the files. The given value will overwrite the original files with the optimized version.

If you run the gulp optimize-images command in the terminal you should see the following output and find that your image has decreased in size:

Gulp Image Optimization At Work
Gulp Image Optimization At Work

How Gulp Works

I think the example explains it well, but I want to reiterate and add some additional information. The general process behind a gulp task is the following:

  1. Target some source files
  2. Read their content and pass them on to a function
  3. This passing on, or piping, can happen multiple times within a task. Each function takes the result of the previous, modifies it and passes it along.
  4. Take the resulting stream and output it to the designated location

Let’s look at processing SASS files as another example. Here’s how the algorithm above could be applied if we wanted to compile all our sass files, automatically add vendor prefixes and minify the result:

  1. Find all .scss files
  2. Pass their content on to the Sass compiler
  3. Pass the resulting content to the auto prefixer
  4. Pass the result to the minifier
  5. Save the result to the same source file

Let’s make that happen in Gulp. We’ll need three packages:

We can install them in one go using the following command:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=install-3.sh

Next, let’s add them to our gulpfile right at the top

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=add-3.js

We should also add some Sass to our theme. Let’s create a Sass file in the main directory called style.scss with the following content:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=style.scss

Finally, we need to create the task which will perform all the actions we need. Here’s the full code with the explanation underneath.

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=css-task.js

I’ve taken all the SCSS files in the root directory, piped them to the sass() function, followed by the autoprefixer, followed by the cleanCSS function and finally I piped everything to the main directory which will result in style.scss being output to style.css. The resulting CSS is the following:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=style.css

As you can see, everything has been minified – the variable has been replaced with its value and vendor prefixes have been added where necessary.

To come up with this code I went to the documentation of each and copy-pasted the pipe part of the example, it really as that simple. The commands may have some options worth looking into but most work fine out-of-the-box.

Watching Files

By issuing our commands we’ve already come a long way. We can get Gulp to do whatever we want as long as we find the correct package and add it to our Gulpfile. However, we can do more.

When developing, especially CSS, we tend to save and modify a lot. We would need to issue the gulp css command continuously. Gulp has a great mechanism called watching which allow us to detect changes in files and automatically issue commands. We can build this in on top of everything we’ve done already.

We essentially need to add a new directive: when a file within the specified set changes, run a task.

Get started by installing gulp-watch and adding it to the gulpfile, this should be easy now that you’ve done it a couple of times.

The new task is pretty simple. All we’re doing is setting the files to watch, and if one of them is matched, we perform one of our existing tasks:

.gist table { margin-bottom: 0; }https://gist.github.com/149e592a5bb2fc28839e2f2080e4c333.js?file=watch.js

When you run this task with gulp watch-css you should see something like the screenshot below in your terminal. Note that it does not exit back to the prompt it just “hangs” there. It is waiting for an indicated file to change. When it does it will add some more output. If you’d like to return to the prompt, press control + C.

Gulp Watch Output
Gulp Watch Output


That’s all there is to Gulp, a few simple rules to follow when adding a task and you can automate to your heart’s content. You can concatenate files, error check them, copy/move/delete files, and even write your own packages for anything not covered by third party packages.

Tools like Gulp can shave hours of work off your work days, which means they are possibly the most worthwhile additions to your skillset.

Plugged In: Child Theme Plugins

Welcome to Plugged In, where we take a look at some of the most popular WordPress plugins in various categories. This week, we look into the best plugins for creating a child theme. (For more information on WordPress plugins, download our ultimate guide.)

Creating a child theme for your site can save you a lot of pain down the road. You can make adjustments and try things out without compromising the original code. Create the child theme, play around with some new ideas, and have the option of falling back on your default code if you don’t like what you see. It takes the risk out of trying new things. If you don’t want to create your own from scratch, you can use one of these plugins.

We have compiled a few of the most popular from the WordPress Plugin Repository.

Child Theme configurator 


Child Theme Configurator will quickly help you set up a child theme. You can identify the CSS attributes you want to change without having to look for them. The plugin will then automatically create your child theme in a single click. Every stylesheet will be indexed so you can go back at any time to look at the log of what you’ve done. Try making a variety of child themes and go through and use the best one.

As well as creating a child theme, the plugin will also help you identify potential problems with your theme and address them. You will have the power to truly customize every part of your website.

One-click Child Theme


As the title says, this plugin will help you set up a child theme with only one click. One-Click Child Theme allows you to make a child theme from any of your active themes. From the dashboard, go to appearances, find the theme you want to alter and choose the child theme option. It’s as simple as that.

From there you can begin to play around with the changes you want to see, then activate the version you like.

Theme Check


Theme Check is a great all around theme plugin. Run tests to make sure your theme is up to the latest review standards and running correctly. Though this plugin won’t help you create a child theme, it will give you the insight into your theme to see what you may need to change.

The plugin displays all the test results in your dashboard so you can see them at once and move forward how you want. If you see parts of your theme you don’t like, choose one of the above plugins to create a child theme.

What are your favorite child theme plugins? Let us know by leaving a comment below. And check out our list of the 10 most popular plugins our customers use on our platform.

The post Plugged In: Child Theme Plugins appeared first on WP Engine.

How to Start an Online Store in 2016 (Step by Step)

Do you want to start your own online store? We know that building an online store can be a terrifying thought especially when you are not a techy. Well, you’re not alone. After helping hundreds of users start their online store, we have decided to create the most comprehensive guide on how to build your online store with WordPress (step by step)

How to build an online store

What Do You Need to Start an Online Store?

There had never been a better time to start an online business than today.

Anyone with a computer can get started within a matter of minutes and without acquiring any special skills.

The three things you need to start an online store are:

  1. A domain name idea (this will be the name of your online store i.e wpbeginner.com)
  2. A web hosting account (this is where your website lives on the internet)
  3. Your undivided attention for 30 minutes.

Yep, it is really that simple.

You can setup your own online store with WordPress in less than 30 minutes and we’ll walk you through each step of the process.

In this tutorial, we will cover:

  • How to Register a Domain Name for Free
  • How to Choose the Best Web Hosting
  • How to Get a SSL Certificate for Free (required for accepting payments)
  • How to Install WordPress
  • How to Create a WooCommerce store
  • How to Add Products in your Online Store
  • How to Select and Customize Your Theme
  • How to Extend Your Online Store with Plugins
  • Learning to Learn WordPress & Grow Your Business

Ready? Let’s get started.

Step 1: Setting up Your Online Store Platform

The biggest mistake most users make is not choosing the right platform for their online store.

Thankfully you’re here, so you won’t be making that mistake.

There are two popular eCommerce platforms that we recommend: Shopify or WordPress + WooCommerce.

Shopify is a fully hosted eCommerce solution that starts at $29 / month. It’s a hassle-free solution where you just login and start selling. The downside to Shopify is that it gets quite expensive, and your payment options are limited unless you pay additional fees.

This is why most users choose WordPress + WooCommerce because of the flexibility it offers. It does require some setup, but it’s worth doing it for the long run. WooCommerce is the world’s largest eCommerce platform.

In this tutorial, we will walk you through how to setup an online store in WordPress using WooCommerce.

To setup your store, you need to have a domain name, web hosting, and a SSL certificate.

A domain name is your website’s address on the internet. It is what users will type in their browsers to reach your website (for example: google.com or wpbeginner.com).

Web hosting is where your website lives on the internet. It’s your website’s house on the internet. Every website on the internet needs web hosting.

How to Add SSL in WordPress?”>SSL certificate adds a special security layer on your website, so you can accept sensitive information such as credit card numbers and other personal information. This is required for you to accept credit card payments on your website.

Normally a domain name costs around $14.99 / year, web hosting costs around $7.99 / month, and SSL certificate costs around $69.99 / year.

That’s a lot of startup cost.

Thankfully, Bluehost, an official WordPress and WooCommerce recommended hosting provider, has agreed to offer our users a free domain name, free SSL certificate, and a discount on web hosting.

Basically, you can get started for $12.95 / month.

→ Click here to Claim this Exclusive Bluehost offer ←

Bluehost is one of the oldest web hosting companies, started in 1996 (that’s before Google). They are also the largest brand name when it comes to WordPress hosting because they host millions of websites including our own.

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

Let’s go ahead and purchase your domain + hosting + SSL.

Open up Bluehost in a new window using this link and follow along.

First thing you need to do is click on the green Get Started Now button to get started.

Bluehost Signup

On the next screen, select the plan that you need (starter and plus are the most popular).

After that, you will be asked to enter the domain name for your website.

Choose domain

Lastly, you will need to add your account information and finalize the package info to complete the process. On this screen, you will see optional extras that you can purchase.

It’s entirely up to you whether or not you purchase these, but we generally don’t recommend purchasing these. You can always add them later on, if you decide that you need them.

Hosting addons

Once completed, you will receive an email with details on how to login to your web hosting control panel (cPanel). This is where you manage everything from support, emails, among other things.

Go ahead and login to your cPanel. You will be greeted with a popup informing you that WordPress with WooCommerce is pre-installed on your website.

Bluehost first login

You just need to click on ‘Login to your site’ button, and it will take you to your WordPress site’s dashboard.

Congrats, you have finished setting up hosting and domain part.

The next step is to setup your WordPress site and then your online store.

Step 2. Setting up WordPress

Bluehost has automatically installed WordPress and WooCommerce on your website.

When you first login to WordPress, you will see a welcome message. You will be asked what kind of website you want to set up.

Welcome screen

Go ahead and click on ‘I don’t need help’ link. Don’t worry we will walk you through all the necessary steps.

Closing the setup wizard will show your WordPress admin dashboard which looks like this:

WordPress admin dashboard

First, you need to visit Settings » General page to setup your WordPress site title and description.

Set your WordPress site title and description

Setting up HTTPS to Use SSL

Your WordPress hosting package came with a free SSL Certificate. This certificate is pre-installed for your domain name. However, your WordPress site needs to be configured, so it loads as https vs http.

On the Settings » General page, you need to change your WordPress Address and Site Address to use https instead of http.

Change WordPress URL to use HTTPS

Don’t forget to scroll down to the bottom of the page and click on the save changes button to store your settings.

Your basic WordPress setup is complete. Now it is time to setup your online store.

Step 3. Setting up Your WooCommerce Store

Before you can start selling, there are a few things like currency, payments, and shipping information that you need to set up.

You will be seeing a ‘Welcome to WooCommerce’ notification on your WordPress admin pages. Go ahead and click on the ‘Run setup wizard’ button in the notification.

Run WooCommerce setup wizard

This will launch the WooCommerce setup wizard where you need to click on the ‘Let’s go’ button to get started.

WooCommerce setup wizard step 1

WooCommerce needs few essential pages for cart, account, shop, and checkout. You can click on the continue button to automatically create these pages.

WooCommerce pages

This will bring you to the next step.

Now you will need to tell WooCommerce where your store is located and which currency and unit measures to use.

Choosing locale and currency

After selecting your location and currency, click on the continue button to move on.

Next, you need to enter shipping and tax information.

WooCommerce shipping and tax information

WooCommerce can be used to sell both digital downloads and physical goods that need shipping.

You need to check the box if you will be shipping goods, or you can leave it unchecked if you will only be selling digital goods.

Next you need to answer the tax question. WooCommerce can help you automatically calculate and add taxes to your prices.

If you are not sure, then you can leave it unchecked. You can always add tax information later from WooCommerce settings.

Click on the continue button to move on.

Next, you will be asked to choose a payment method for your online store.

WooCommerce payment method

By default, WooCommerce comes with support for PayPal, PayPal Standard, and Stripe payment gateways. There are many other payment methods available for WooCommerce which you can install later if you need.

The easiest way to accept payment is using PayPal Standard.

Simply enter your PayPal email address and click on the continue button.

A lot of people including us, use both PayPal and Stripe. By using Stripe, you allow your users to enter their credit card information on the checkout page without having to leave your site and going to PayPal.

You can setup Stripe by following the instructions on the WooCommerce screen.

Once you’re done, your WooCommerce online store is all setup.

WooCommerce setup finished

You need to click on the ‘Return to WordPress dashboard’ link to exit the setup wizard.

After finishing the WooCommerce setup, you are now ready to add products to your online store.

Step 4. Adding Products to Your Online Store

Let’s start with adding the first product to your online store.

You need to visit Products » Add New page to add a new product.

Add new product

First, provide a title for your product and then some detailed description.

On the right hand column, you will see the ‘Product Categories’ box. Click on the ‘+Add New Product Category’ to create a category for this product. This allows you and your customers to sort and browse products easily.

Add product category

Scroll down a little and you will notice the Product Data box. This is where you will provide product related information like pricing, inventory, shipping etc.

Enter product data

Below product data box, you will see a box to add product short description. This short description will be used when users are viewing multiple products on a page.

Product short description

Lastly, on your right hand column you will see boxes to add a main product image and a product gallery.

Product images

Once you are satisfied with all the product information you have added, you can click on the Publish button to make it live on your website.

Repeat the process to add more products as needed.

Step 5. Select and Customize WordPress Theme

Themes control how your WordPress sites look to the users when they visit it. For a WooCommerce shop, they also control how your products are displayed.

There are thousands of paid and free WordPress themes available.

Your Bluehost hosting account, automatically installs the Storefront theme for your website. You will need to customize it to meet your needs.

Head over to Appearance » Customize page. This will launch theme customizer where you can change different theme settings.

Customizing your theme

If you don’t like the Storefront theme, then you can use another theme by visiting Appearance » Themes page.

Change theme

If you need help selecting a theme, then please refer to our guide on 9 things you should consider when selecting a perfect WordPress theme.

Step 6. Extend Your Online Store With Plugins

Now that you have your online store ready, you probably want to get started with adding other usual elements on your website such as a contact form, about page, and more.

To further customize WordPress and add features like contact forms, galleries, sliders, etc, you need to use WordPress plugins.

WordPress plugins are apps that allow you to add new features to your website.

There are over 46,000 WordPress plugins available. At WPBeginner, we feature the best WordPress plugins to help you add the functionality that you need.

We have a step by step guide on how to install a WordPress plugin.

Here’s a list of 24 must have WordPress plugins for business websites and another one with 20+ best free WooCommerce plugins.

Often readers ask us which plugins do you use on your website. You can check out our Blueprint to see the list of plugins and tools that we use.

Learning WordPress to Grow Your Online Business

WordPress is incredibly powerful and WPBeginner is the largest free WordPress resource site for beginners.

At WPBeginner, our main goal is to provide cutting-edge helpful WordPress tutorials that are easy to understand even for non-techy WordPress website owners (see more about us).

You can also subscribe to WPBeginner’s YouTube Channel where we regularly share video tutorials to help you learn WordPress.

We also have a guide to show users how to make the most out of WPBeginner’s free resources.

Many of our users type their question in Google and just add wpbeginner at the end of it. This shows them related article from WPBeginner.

We hope that this tutorial helped you learn how to build an online store. You may also want to see these 19 actionable tips to drive traffic to your new 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 Start an Online Store in 2016 (Step by Step) appeared first on WPBeginner.

12 Tested and Easy Ways to Grow Your Email List Faster

Are you looking for easy ways to grow your email list? Many beginners just install a sidebar optin form on their website and wait for users to subscribe. This results in slow growth. There is so much more you can do to grow your email list much faster. In this article, we will show you some of tested and proven ways to grow your email list that are actually easy to implement.

Grow your email list faster

Getting Started

First thing you need is to make sure that you are using a professional email marketing service.

Using the best email marketing company ensures that your emails don’t end up in the spam folder. It also provides you with the industry standard tools to build and grow your email list.

We recommend using Constant Contact. It is one of the largest and most popular email service provider in the world.

Next, you will need OptinMonster. It is the best lead generation software in the world. It helps you convert abandoning website visitors into email subscribers.

Having said that, let’s take a look at some of the most effective ways to grow your email list.

1. Use Multiple Sign up Forms

Using multiple signup forms

As we mentioned earlier many beginners start with just a simple signup form in their sidebar.

If you want to grow your email list quickly, then you need to use multiple sign up forms to give users more opportunity to join your email list.

We recommend combining your sidebar sign up form with a floating footer bar or a lightbox popup to make your signup forms more noticeable

2. Use an Exit Intent Popup

Exit intent popup

Exit-Intent® is an advanced technology built by OptinMonster that tracks your user’s mouse behavior and show them with a targeted form at the precise moment they are about to leave your website. Think of it as Onsite Retargeting.

You can use this technology in combination with full screen welcome gates, lightbox popups, or other optin types to convert abandoning visitors into subscribers.

We use an exit intent popup on WPBeginner, and it has helped increase our subscribers by 600%.

Michael Stelzner from Social Media Examiner used it to add over 250,000 new email subscribers.

3. Offer Content Upgrades

Content upgrades

Content upgrade is a marketing technique where you offer users a chance to get exclusive bonus content by signing up to your email list.

This additional premium content offered for completing an action is also known as content bribe.

Human psychology plays an important role in the effectiveness of content upgrades. The psychology principle known as Zeigarnik Effect states that people are most likely to complete a task if they initiate it themselves.

Because the user initiates (click to download the content upgrade), they are more likely to complete the task (subscribe to your list).

See our step by step guide on how to add content upgrades in WordPress to grow your email list.

4. Add Full or Partially Gated Content in WordPress

Adding gated content

Gated content is content on your website that can’t be accessed until the visitor enters their email address. You can use it to hide some of your content or hide the entire blog post until the user enters their email address.

Here’s a step by step guide on how to add content locking in WordPress.

5. Create Multiple Lead Magnet Pages

Lead magnet page example

Lead magnet (also known as opt-in bribe) is an incentive you offer to potential buyers in exchange for their contact information such as name, email, phone number, etc.

Your blog posts with locked content, content upgrades, and premium content all fall into the lead magnet category.

Lead magnets need to offer additional value to your users. This could be an ebook, a resources newsletter, checklists, workbooks, etc. See these 9 highly effective lead magnet ideas for inspiration.

6. Add Sign up Call to Action on Your Facebook Page

Facebook has introduced call to action buttons for business pages. These buttons are prominently displayed on top of your cover image and are visible without scrolling.

Call to action button on a Facebook business page

Here is how to add a sign up button as call to action on your Facebook page.

You need to visit your Facebook page, and you will notice a blue ‘Add a button’ button.

Adding a call to action button

This will bring up a popup with multiple choices. You need to click on ‘Get in touch with us’ tab and then select ‘Sign up’.

Next, you need to provide a link to your website where users will be taken when they click signup.

Add a link to your sign up page

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

6. Use Twitter Lead Generation Cards

Twitter Ads

Twitter Ads offers another social platform that you can use to boost your lead generation efforts.

In fact, Twitter even allows you to run lead generation directly from Twitter. This way users can sign up for your email list without leaving Twitter.

You can also drive traffic to your website and use email sign up as a conversion. You can create special offers for Twitter users and tweet the links to your followers.

7. Use YouTube Call to Action Cards

YouTube action cards

YouTube is one of the largest social media platforms, and the second most popular search engine in the world. If you are using YouTube videos as part of your marketing strategy, then you can utilize your YouTube channel to grow your email list.

YouTube action cards allow you to add interactive information cards to your videos. You can use them to add call to actions and link them to lead magnets on your website.

Here is how to add YouTube action cards to your videos.

8. Use After Post and In-Line Optin Forms

After post optin forms appear when a user has already scrolled down an entire article. This means that they are already interested in your content and are much more likely to sign up.

After post and in-line optin forms

You can also use in-line optin forms with in your blog posts and long reads. The middle of a long read is the point where users are most engaged with the content. Reminding them to sign up at that point, works like a charm.

9. Add Polite Slide-in Scroll Box Forms

As we mentioned earlier that users simply ignore most static signup forms. The goal is to divert user’s attention to your offer and sign up form.

Slide in scroll box

Slide-in scroll box forms do that beautifully. They stay out of the way so that users can look at the content while diverting user attention to the sign up form with slide in animation.

10. Prominent Headers with Call to Action

Prominent headers with call to action

Header is the area of your website most prominently visible to users when they arrive. This makes it the most effective spot to place your call to action.

You will need a WordPress theme that comes with large or full screen header. You can also use a page builder plugin like Beaver Builder to create custom pages with your own layout.

11. Use Social Proof to Encourage More Sign ups

WPBeginner social proof

Social proof is a psychological effect used to describe a social behavior where people feel more comfortable following other people. Marketers use social proof as a tactic for easing the minds of worried customers and increasing conversions.

There are many ways you can use social proof to get more subscribers. You can use testimonials on your landing pages, add reviews, show number of registered users, etc.

Many popular websites show the number of subscribers in their sign up forms to encourage new sign ups.

12. A/B Test Your Optin Forms

A/B test your optin forms

Many beginners continue to rely on guess work to understand what works on their website. You need to understand how your audience react to different call to actions, optin placements, colors, design, and copy.

With A/B testing, you can find out which optins work better on your website. You can use these A/B testing tips to continuously test and improve your optins.

We hope this article helped you find the best ways to grow your email list. You may also want to see our list of 10 WordPress plugins that will quickly help you get more traffic.

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 12 Tested and Easy Ways to Grow Your Email List Faster appeared first on WPBeginner.