WP Engine Supports Austin Startup Week 2016 By Organizing The Marketing Educational Track

As part of our commitment to support startup communities around the world, WP Engine is leading the charge for Austin Startup Week’s marketing track.

Austin Startup Week, which will be held on October 2-7, is a five-day event where the technology community comes together to learn and celebrate its uniquely Austin culture. National experts from the Austin tech community will host tracks on topics ranging from cyber security and design to health tech, fundraising, gaming, and beyond.

This year, WP Engine is helping to organize a marketing track at ASW, which is completely free and open to anyone wanting to learn more about digital marketing. The track features talks from leaders in the field, including Jason Cohen, Founder and CTO of WP Engine; Shawn Collins, Founder of Affiliate Summit; and Noah Kagan, Founder of AppSumo.

The impressive lineup of sessions will equip marketers with the ideas and insights needed to take their startup to the next level. The AWS marketing track schedule is as follows:

October 3

4:00-5:00 p.m.: Marketing Mindset for Developers (WP Engine) will help you build products that sell and features an impressive lineup of experts. Speakers include,

  • Jason Cohen, CTO at WP Engine
  • Noah Kagan, Founder at AppSumo
  • Jamie Tardy, Eventual Millionaire

October 4

10:00-11:30 a.m.: Mastering Online Advertising: PPC, Affiliate, Email Marketing (Capital Factory) will equip you with new techniques to help take your PPC marketing the next level. Speakers include,

  • Bill Leake, CEO at Apogee Results
  • Shawn Collins, Founder at Affiliate Summit

October 5

10:00-11:30 a.m.: Winning With Words: Content Marketing, SEO, and Social (Capital Factory) dives into the basics of online marketing with the following experts:

  • Kate Buck Jr., Social Media Manager at KBJOnline
  • Lani Rosales, COO at TheAmericanGenius.com
  • Paul O’Brien, Startup Executive

4:00-5:00 p.m.: Conversion Rate Optimization for Marketers and Designers (WP Engine) will help you turn your site visitors into customers and features insights from the following speakers:

  • Brian Masey, CEO at Conversion Sciences
  • Jeffrey Eisenburg, CEO at Buyer Legends LLC
  • Claire Vo, CEO at Experiment Engine

6:00-8:00 p.m.: ASW Marketers Happy Hour (Austin Ale House)

You can view a complete list of Austin Startup Week events here.

WP Engine is also organizing a special happy hour for all the marketers in Austin for ASW at the Austin Ale House on Wednesday, October 5 from 6:00 – 8:00 p.m. Space is limited, so be sure to register as soon as possible.

The famous Startup Crawl will take place on October 6. A massive city-wide event ending at the Capital Factory, the Startup Crawl showcases the legendary Austin entrepreneurial hospitality with startups all over the city opening their doors to job seekers, investors, and potential customers. With good drinks, cool office spaces, and interesting people you’ll find yourself wishing you had a little more time.

Organizing the marketing track at Austin Startup Week is just one small way WP Engine is committed to building local talent and further expanding our thriving startup culture. It is a community that helped us grow and thrive and we are excited to help other new startups and entrepreneurs do the same, right here in Austin.

The post WP Engine Supports Austin Startup Week 2016 By Organizing The Marketing Educational Track appeared first on WP Engine.

Getting the Most out WordPress Tags for Improved SEO and Readability

Vincent Van Gogh once said, “Great things are not done by impulse, but by a series of small things brought together.” If I didn’t know any better, I’d think he were talking about WordPress tags.

In all seriousness though, Van Gogh had a point. Much like his own pointillist style of painting – one which utilized small dots of color to create beautiful looking images – there is a lot of power that can be drawn from the smallest pieces of your website.

Let’s face it: there’s a lot that goes into optimizing a website, so tags can easily get overlooked when placed side-by-side with more obvious optimizations like page speed, responsive design, and security. That doesn’t mean that it’s okay to ignore tags though. When used correctly, they can be of great benefit to your website.

The word “tag” can mean a number of things within the context of a WordPress website. But if you’ve spent a significant amount of time creating content, then you know you can (and should) use WordPress tags to accomplish a number of goals:

  1. To enhance content organization.
  2. To improve readability.
  3. To increase your site’s searchability.

As a WordPress developer, your job is all about digging into the nitty-gritty of the websites you build – to the parts that directly improve the user experience as well as the parts that indirectly improve your business’s reputation. This is why the inclusion of tags in your web page and blog post content needs to be part of that drill-downed focus into the details.

Why WordPress Websites Would Be Nothing Without Tags

Any developer that’s been in the “biz” for a while knows that there are a variety of tags you can use when building content for a website. But when you hear the word “tag” what’s the first image that springs to mind?

Is it something like the Tags box found on the Post setup page?


Or maybe it looks like the HTML header tags you include within your content?


Perhaps you associate tags with the title and description you’d find in Google search results?


Regardless of which tag you first think of, each of these plays an essential role in the scheme of things – and for a variety of reasons, too.

In this blog post, I’m going to touch on three areas of your website that can be improved and optimized by using tags:

  1. Page Hierarchy
  2. Taxonomy
  3. Search Engine Optimization (SEO)

Let’s start by looking into what tags do for your web pages.

Page Tags

Okay, so let’s talk about your website’s main, non-blog content. This is the real reason you want people to visit your website. They find your site, are wowed by the awesome aesthetics, and then they want to get down to reading what you’re all about.

How do people find your website (and all that great content) in the first place?

If you’re lucky enough to have a brand that ranks well based off of sheer popularity, then you might not have to worry about this. For smaller websites and companies though, search engine optimization is very important in getting your name out there and helping your website rise through the ranks. This is where those header and description tags come into play.


Let’s take a look at this Hubspot example. Suppose the focus keyword – the main idea around which a page is built – is “inbound marketing and sales.” This focus keyword then helps shape the header and description tags on this particular page so that it’s clear to search engines (and online visitors) what this page is about.

Once you’ve got people on your site, how do you ensure they actually read your content?

One of the tips you’ll receive most often is to include shorter paragraphs and lots of headers to increase reader scannability. If these headers are actually embedded with tags (like



, and so on) instead of simply bolded, they serve a dual purpose in letting search engines know what your page is really about.


If you look at the Bank of America example above, you’ll see how they’ve used header tags to make the most important pieces of content on their auto loans page stick out. This helps readers quickly scroll through to find the information most relevant to them. It also helps the search engines know exactly what this page is talking about.

The tagging you do for your web pages is one of the most important choices you’ll make when setting up your website. In sum:

  • Page Hierarchy: A page’s hierarchy is clearly defined by how certain pieces of content are tagged; H1 tags being the most important information (almost always the title) and H6 tags being the least important of the headers.
  • Taxonomy: By making good use of header tags, you can break large amounts of text into smaller, more digestible chunks and also communicate to visitors what the page is about without them having to do a deep-dive read.
  • SEO: Any tags that appear within a web page-including the title tag-are important in building a consistent identity for search optimization purposes. While the focus keyword is the main “idea” around which they’ll all rotate, it’s those tags that will be read by the search engines and communicated to the people looking for you in search.

While the examples we’ve presented above speak solely to the pages of your website, all of these types of tags-header tags, title tags, and description tags-should be used when composing blog posts, too. Blog posts can benefit from SEO and hierarchical structures just as much as the rest of your website. The biggest difference between pages and posts, however, will lie in the taxonomy:

Post Tags

Blog posts have come a long way since we were first introduced to WordPress in 2003.

  • First, there were Categories. These allowed WordPress users to assign different posts to a high-level category or topic frequently covered on the blog.
  • With version 2.3, WordPress gave us the ability to start assigning tags to blog posts. Whereas Categories are more broad and general in nature (like “WordPress,” “Plugins,” and “Tips & Tricks”), Tags focus more on the micro-details of a post (like “Hummingbird,” “CloudFlare,” “site speed,” and “DNS settings”).
  • Then in version 2.5, WordPress gave us a separate Tags sub-panel. This gave users better control over the Tags page of a website as well as the organization of all the tags/keywords found within it.

Now, there are some who would argue that this Tag isn’t as important as the other types of tagging. When it comes to SEO, they’re technically right. Blog post Tags will not explicitly help improve your website’s SEO. However, they are essential to your visitor’s experience.

As visitors navigate around your website in search of topics that interest them, post tagging will serve as their guide. So while these Tags won’t get you noticed by the search engines, they will improve the on-site experience of visitors and consequently lead to lower bounce rates and higher pages consumed (which will have a positive effect on your search ranking).


It’s also important to remember that these post tags aren’t just about helping visitors get around your site. Tags were actually added to WordPress in order to clean up Categories.

Ideally, a website should only have five to ten main Categories (in total) that reflect all the topics associated with a website or blog. This helps the search engines and your visitors get a better understanding of what your website is really about. But without the more granular Tags to segment out keywords from the posts, users had nowhere else to put them except in Categories-and it got really messy.

So what’s the moral of the story here? Tags serve to improve the usability of a blog-not just for a better user experience, but also for helping keep your website better organized. In sum:

  • Post Hierarchy: Tags do not contribute to post hierarchy. What they do is keep Categories free from keywords so they can do a better job at organizing your content.
  • Taxonomy: Tags are extremely important for blog posts. For starters, they clearly identify the keywords found within blog post content. Secondly, they make it easier for users to find content centered around topics that interest them instead of having to scroll through a chronological list of your posts. And thirdly, they serve as a gentle guide towards other related content on the site, keeping visitors interested for longer.
  • Search Engine Optimization: Most marketers would advise you to noindex and nofollow your tags as well as the main tag page. Because your blog posts are already optimized with a focus keyword, title tag, and header tag, if you start throwing your tag pages into the search indexing mix, you’re only going to create more competition for the actual content you want to be found.


Boost your traffic with SmartCrawl

SmartCrawl supercharges your SEO using proven methods for optimization, ensuring high impact results with little effort. Set up automated sitemap generation, alert search engines when you have new and updated content, and control exactly how your web pages are displayed in search results.


Find out more

Tips & Tricks to Using WordPress Tags Better

As you can see, tags are quite a bit more complicated than they appear at first glance. With different types of tagging, different types of content that can be tagged, and a number of ways to execute tagging, there’s a lot to take into consideration here.

Of course, this being WordPress, there are plenty of tips, tricks, and tools to help you better implement and manage your tags.

Since you’re already familiar with HTML coding and page creation best practices, you’re a few steps ahead of the novice WordPress user. So let’s focus on some other tips and tricks to help you enhance your tagging even more.

  • Visualize the Hierarchy


    While WordPress does offer an easy way to visualize the structure and hierarchy of your web pages (under Appearance > Menus), it does not offer an easy way to visualize your blog’s categories, sub-categories, or tags. A visual hierarchy tool can really come in handy when you’re trying to get a handle on your blog’s categorical structure, both for search engine purposes as well as for overall usability.

    Recommended Tool: Multi-column Tag Map Plugin

  • Create Category & Tag Rules


    If you’re struggling with how to define a Post Category over a Post Tag, follow these guidelines:

    • Identify no more than ten Categories. These should reflect what your website and services are about, as well as provide some insights into the types of content you create.
    • All other keywords related to the content should become a Tag.
    • Never use the same word for a Tag if it already exists as a Category.
    • Never use both the singular and plural version of a Tag. Just choose one and stick with it.
    • Don’t use a Tag it’s not a common keyword or topic covered on your blog.

    Recommended Tool: The Categories and Tags sub-panels found under WordPress Posts.

  • Use Search-Friendly Tags


    Regardless of where tags go on your website (title, header HTML, blog posts, etc.), you should use words that rank well for your business in Google. If you use a keyword that’s too long, irrelevant, or uncommon, all of that work you put into creating your website’s tags will have been a waste.

    Recommended Tool: Google Trends

  • Be Mindful of Your SEO


    Optimizing your site for SEO is a vital component of being a web developer. Full stop. But monitoring all the bits and bobs can be tedious and/or next to impossible. That’s why an SEO plugin is a smart move. Yoast is free, highly supported, well reviewed, and it’s easy to use. Perhaps the best thing about it is the built-in guidance it provides on the quality of your SEO. Remember all that talk earlier about focus keywords? If your tags are not optimized with those keywords (or your content, in general), Yoast will tell you when more work needs to be done with a super obnoxious red or orange light indicator. Never settle for less than green!

    Recommended Tool: Yoast SEO Plugin

  • #5: Tag Images


    Did you know that the images on your website can be tagged? If not, you should make sure you start giving them title tags and alt-tags, too. Every piece of your website contributes to this singular story about who you are and what you offer your audience. The same could be said of all this tagging. So if you can add tags to your images that relate to the surrounding content, you’ll only bolster the argument you’re making to the search engines.

    Recommended Tool: Seo Optimized Images Plugin

Wrapping Up

If you haven’t been getting the most out of your WordPress tags, I hope this guide has been helpful. We really do believe that every little detail counts in web development-and tagging should be no exception. When details like these matter so much to the search engines and to your site’s visitors, they’re really hard to ignore.

Ultimate Guide: How to Start a WordPress Blog (Step by Step)

Do you want to start a WordPress blog the right way? We know that starting a blog can be a terrifying thought specially when you are not geeky. Guess what – you are not alone. Having helped over 130,000+ users start a blog, we have decided to create the most comprehensive guide on how to start a WordPress blog without any technical knowledge.

How to Start a WordPress Blog

The process is easy to follow whether you are 20 years old or 60 years old. However if you need help, our expert team will help you setup your blog for free. → Click Here to Get Your Free WordPress Blog Setup! ←

What do you need to start a WordPress blog?

There are three things you need to start a WordPress blog:

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

Yes, you read it right. You can start a blog from scratch in less than 30 minutes, and we will walk you through the whole process, step by step.

In this tutorial, we will cover:

  • How to Register a Domain Name for Free
  • How to Choose the Best Web Hosting
  • How to Install WordPress
  • How to Change Your Theme
  • How to Write Your First Blog Post
  • How to Customize WordPress with Plugins
  • Resources to Learn WordPress

Ready? Let’s get started.

Step 1. Setup

The biggest mistake beginners make when starting a blog is choosing the wrong blogging platform. Thankfully you’re here, so you won’t be making that mistake.

For 95% of users, it makes more sense to use WordPress.org also known as self-hosted WordPress. Why? Because it is free to use, you can install plugins, customize your site design, and most importantly make money from your site without any restrictions (see the difference between WordPress.com vs WordPress.org).

Now you have probably heard that WordPress is free.

You might be wondering why is it free? What’s the catch?

There’s no catch. It’s free because you have to do the setup and host it yourself.

In other words, you need a domain name and web hosting.

A domain name is what people type to get to your website. It’s your website’s address on the internet. Think google.com or wpbeginner.com

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

A domain name typically costs $14.99 / year, and web hosting normally costs $7.99 / month.

That’s a lot for beginners who are just starting out.

Thankfully, Bluehost, an official WordPress recommended hosting provider, has agreed to offer our users a free domain name and over 60% off on web hosting.

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

On top of all this, Bluehost has been working with WordPress since 2005, and they are committed to giving back. That’s why they have promised us that if you cannot get your blog online within 30 minutes by following this tutorial, then our expert team will complete the process for you without any cost. They will compensate us, so you don’t have to. Contact us for free blog setup help.

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.

Open up Bluehost in a new window and follow along.

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

Start with Bluehost

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

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

Select your Domain Name

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 Checkout

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. But most importantly, this is where you install WordPress.

Step 2. Install WordPress

In the cPanel, you will see dozens of small icons for different services and features. This can be a bit overwhelming, so ignore 95% of them because you will never need to use them.

Scroll down to the website section and click on the WordPress icon.

cPanel Install WordPress

You will be redirected to the Bluehost Marketplace Quick Install screen for WordPress. Click on the Get Started button.

On the next screen, you will be asked to select your domain name. Choose the domain from the dropdown and then click Next.

Enter your Domain Name - WordPress Setup

After that, you need to enter your Site Name, username, and a password for your site. You also need to check all the checkboxes and then click Install.

Install WordPress - Bluehost Marketplace

The QuickInstall will start installing WordPress. The marketplace will prompt you to browse WordPress themes, while WordPress is being installed.

No need to do that right now. We’ll show you how to get free WordPress themes in the next step.

Once WordPress is finished installing, you will see the success notice in the top header bar.

Bluehost WordPress Install Complete

Click on the Installation Complete link, and it will take you to the screen with your WordPress login URL and password.

Bluehost Marketplace - WordPress login details

Congratulations, you have created your WordPress site. That wasn’t too bad right.

Your WordPress login URL will look like this:


Click on the WordPress login link to login to your dashboard.

Now we’re ready to customize your site’s appearance and start blogging.

Step 3. Selecting your WordPress Theme

The visual appearance of your WordPress blog is controlled by themes. When you first visit your blog, it will look something like this:

Default WordPress Theme

This is not very appealing to most people.

Customizing the look and feel of your blog is by far one of the most exciting and rewarding part in the journey of creating your WordPress site.

There are thousands of pre-made WordPress themes that you can install on your site. Some of them are free, while others are paid.

You can change your theme by going to your WordPress dashboard and clicking on Appearance » Themes.

Install WordPress Themes

Go ahead and click on the Add New button.

On the next screen, you will able to search from the 4100 free WordPress themes that are available in the official WordPress.org themes directory. You can sort by popular, latest, featured, as well as other feature filters (i.e industry, layout, etc).

Select a Theme

When you have found the theme that you like, simply bring your mouse on it, and it will show the Install button. Click on it and wait for the theme to be installed. After that, the install button will be replaced with an Activate button. You need to click on it to Activate the theme.

Install and Activate WordPress Theme

Once you have installed your theme, you can customize it by clicking on the Customize link under the Appearance menu.

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.

Once you have selected your WordPress theme, you are now ready to create your first blog post.

Step 4. Creating Your First Blog Post

To write your first blog post, click on the Posts » Add New menu in your WordPress dashboard.

You will see an editor area where you can write your first blog post.

WordPress Blog Post Editor

Once you’re done writing, go ahead and click on the Publish button on the right to publish your first blog post to the world.

Publish Button

On the posts screen, you will notice several other sections such as Categories and Tags. You can use these to organize your blog posts. We have a great writeup on the difference between categories vs tags, which we highly recommend that you read.

To utilize all the features on the posts screen, you should read our article on how to add a new post in WordPress (video included).

Often beginners are confused between posts and pages menu in the WordPress dashboard. That’s why we have written a complete guide on the difference between posts vs pages in WordPress.

Step 5. Plugins & Customizations

Once you have written your first blog post, 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.

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.

Here’s a list of 24 must have WordPress plugins for business websites.

Step 6. Mastering WordPress

Business Learning and Support

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 for small businesses, bloggers, and non-techy WordPress website owners (see more about us).

To expand your WordPress knowledge, you should check out:

  • WPBeginner Dictionary – The best place for beginners to start and familiarize themselves with the WordPress lingo
  • WPBeginner Videos – New to WordPress? Watch these 23 videos to master WordPress.
  • WPBeginner Blog – The central place for all our WordPress tutorials.

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

Lastly, you can use Google to type your question and add WPBeginner in front of it. Our users find this very helpful because you’ll likely find an answer to any WordPress questions that you have.

In case you don’t find an answer to your question, simply use our contact form to send us a message. We love helping users get started with WordPress.

We hope that you found our tutorial on how to start a WordPress blog to be helpful. You may also want to check out our article on 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 Ultimate Guide: How to Start a WordPress Blog (Step by Step) appeared first on WPBeginner.

How to Connect Constant Contact to WordPress (Step by Step)

Are you using ConstantContact for your email marketing? Want to connect ConstantContact with your WordPress site? In this ultimate guide, we will show you how to connect ConstantContact with WordPress.

Using Constant Contact with WordPress - The Ultimate Guide

Why Building an Email List is so Important?

Have you ever wondered that why every website on the internet wants to have your email address? Whether you are creating an account on Facebook, Twitter, or New York Times, they all want your email address.

The answer is dead simple. Email is the best way to reach your customers.

A recent study showed that small businesses get $40 back for every dollar spent on email marketing. It is the most effective way to convert visitors into customers.

You can learn more on this topic by reading our article on why you should start building your email list right away.

Now that you know the importance of building an email list, let’s see how to get started with Constant Contact to build an email list for your WordPress site.

What is Constant Contact?

Constant Contact is one of the most popular email marketing service providers in the world. They specialize in sending mass emails to your customers, manage your email lists, and run effective email marketing campaigns.

It can be quite overwhelming for small businesses to start their own email list. Constant Contact makes sure that even absolute beginners can run their email campaigns like a pro.

It is a paid service with free 2 month trial. After the trial period, pricing starts as low as $20 per month.

How to Set up Constant Contact

First, you need to visit Constant Contact website and sign up for an account.

Sign up for a Constant Contact account

Upon sign up, you will land on the Constant Contact dashboard. You will see three simple steps to help you get started.

Constant Contact dashboard

Step 1: Setting up your first email list

First, you need to click on ‘Set up your first list’ link. This will bring up a popup where you need to provide a name for your email list and some email addresses to add into it.

Next, click on the save list button to continue.

Step 2: Add your organization info

The CAN-SPAM act requires a valid postal address in all outgoing marketing emails. Constant Contact makes it easy for you to comply with this law by providing your organization info. Constant Contact will then automatically add this information in the footer of your emails.

You need to click on ‘Add your organization info’ link. It will take you to a form where you need to provide your business information.

Add your organization information

You will need to provide your website address and postal address. You will also be asked to select an industry for your business and upload an image logo.

Don’t forget to click on the save button to store your settings and continue to the next step.

Step 3: Send your first email

Lastly, you need to click on ‘Send your first email’ link. Constant Contact will show you a number of beautiful email templates to choose from.

Select a template for your first email

This will open the template in Constant Contact’s live WYSIWYG email composer. This drag and drop design tool allows you to easily design your email.

First you need to provide a title for your campaign. After that you can replace the images used in template with your own, add your own text and branding.

Compose email

Click on the continue button when you are satisfied with the result.

Now you will reach the email options page. This is where you need to select which email list to use, when to send an email, or change sender name and reply-to email address.

Email options

Once you are done, click on the Send Now or Schedule button to continue.

That’s all, you have successfully finished setting up your Constant Contact account.

Adding Constant Contact Signup Forms in WordPress

Now that you have set up your Constant Contact account, the next step is to collect email addresses by asking users to join your email list.

There are multiple ways to do this. You can copy and paste the signup form code from your Constant Contact account to your WordPress site.

You can also use OptinMonster to add highly optimized signup forms to your WordPress site. It will help you get many more email subscribers faster. See our case study of how we increased our email subscribers by 600% using OptinMonster.

We will show you both of these methods in this guide. Let’s get started.

Adding Default Constant Contact Signup Forms in WordPress

Constant Contact comes with built-in tools to create your email signup forms. You can then embed these forms into your WordPress site.

First you need to login to your Constant Contact account and then click on ‘Contacts Growth Tools’ from the navigation menu on top.

Contacts growth tools

On the next page, you need to click on create a signup form button.

Create a signup form

This will bring you to the form builder wizard.

First, you need to provide the form name. This name will be used internally, so that you can identify a form in Constant Contact dashboard.

Signup form details

Next, you need to provide a title, and taglin for your form. Both of them will be visible on your form.

Lastly, you need to select at least one email list. Users signing up using this form will be added to these lists.

Click on the continue button for the next step.

Now you need to add the fields you want to display on your signup form. The email address field is required. You can click on ‘Additional fields’ to add more fields to your signup form.

Add fields to your email signup form

After adding the form fields, click on the continue button.

In the last step, you can choose your font color, background color, and add a logo.

Change form appearance

You can click on the preview button to see how your form looks. Once you are satisfied, click on the ‘Finish’ button.

You will be redirected back to the contacts growth tools page. You will notice the form you just created under ‘Additional Web Sign-Up Forms’ section.

You need to click on the actions drop down menu and then select ‘Embed Code’.

Get embed code for your signup form

This will bring up a popup with the embed code to add your form anywhere. You need to copy this code and paste it in a text editor like Notepad.

Embed code for your signup form

Now visit your WordPress admin area and click on Appearance » Widgets.

From the list of available widgets, drag and drop the Text widget to a sidebar where you want to display your signup form.

Paste the code you copied from Constant Contact website in the widget’s text area. Once you are done, click on the save button to store your widget settings.

That’s all, you can now visit your website to see the signup form in action.

Constant Contact email signup form in WordPress

Adding Constant Contact Signup Forms with OptinMonster

While the basic forms are relatively easy to add, they are not ideal for high conversions.

An average users visiting your website spends very little time looking at non-content element. You need email signup forms that grabs your user’s attention.

This is where OptinMonster comes in. It is the most popular lead generation tool in the market. You can create beautiful sign up forms that are optimized for conversions and A/B test them without hiring a developer.

OptinMonster comes with different kinds of signup forms such as exit-intent popups, floating bars, after post forms, sidebar forms, slide-in forms, full screen welcome gates, and more.

You also get powerful features like MonsterLinks (2-step optins), Scroll detection, A/B testing, page level targeting, and more.

OptinMonster works great with WordPress and all popular email service providers including Constant Contact.

Send WordPress Posts to Your Constant Contact Email List

Constant Contact makes it super simple to add your WordPress content into your email campaigns.

Note: Constant Contact does not currently offer automatic sending of blog posts to email list.

First, login to your Constant Contact account and visit the Campaigns page. You need to click on the create button and then select send a new email.

Send an email

You will be asked to select a template for your email. After that you will reach the email builder screen.

From the left pane drag and drop the “Read More” block into your email preview. Next, click on the read more block in the email preview to edit it.

Add read more content block

This will bring up a popup window. You need to provide the URL of your WordPress blog post and click on the preview button.

Constant Contact will automatically fetch an image from your article and an article summary. You can click on the Insert button to add it to your email.

Fetch blog content into your email

Repeat the process to add more content from your WordPress blog into your email. Once you are done, go ahead and click on the continue button.

You will then reach the last step of creating your email. This is where you can select whether you want to send the email right away or schedule it.

That’s all, Constant Contact will now send your email with your blog content to your subscribers.

We hope this article helped you learn how to connect Constant Contact to WordPress. You may also want to see our list of 19 actionable tips to drive traffic to your 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 Connect Constant Contact to WordPress (Step by Step) appeared first on WPBeginner.

Testing WordPress Website Backups to Avoid Future Disasters

If you’ve used WordPress for a while, you know keeping regular backups can save you from losing your website (you know, the site you’ve put all that time and effort – literally hours – into building). But have you tested your WordPress backups to see if they actually work?

Sometimes, backups could be missing files or become corrupted. It may not be a common occurrence, but can you afford to take that risk the next time you need to restore your site?

Your WordPress backup could become unusable for many possible reasons, some of which include:

  • Your backup software experiences an issue
    • It contains bugs
    • There’s a compatibility issue with other plugins or WordPress core
  • There’s a temporary glitch
  • Your computer has been infected by a virus
  • A hacker infiltrates your site and a backup is created with malware or other unwanted content

Instead of guessing and hoping everything’s fine, in this post I’ll show you the ropes of testing a backup locally or with our Snapshot Pro plugin to ensure you have at least one backup you can rely on.

Note: If you run into troubles along the way, you don’t have to go it alone. Ask our expert support heroes and they’ll help you out in the flashes of flashes. If you’re not a WPMU DEV member yet, you can still sign up for a premium account for free and get help from our heroes in your hour of need.

Testing Your WordPress Backups Locally

Before you can test your backup locally, you need to install and fire up the local environment of your choice. In case you don’t have a program installed already to do this, here are some other posts with details on setting up many different options:

Once you have one of these or a similar program installed on your computer, uncompress your backup and locate your wp-config.php file.

In most cases, you should be able to find the following in your uncompressed WordPress backup:

  • A backup of your database, usually as an SQL, ZIP or GZIP file
  • Your WordPress core and custom files

Some WordPress backups won’t include these files in quite the same structure, which means you may need to create a manual backup or on your local environment, you would need to install the same plugin or program you use for backups. From there, you would restore your WordPress backup to test it out.

You should also consult the documentation for your backup software if you’re not sure how to complete these steps since it would be different from other programs and plugins.

Speaking of documentation, if you prefer to know how to restore a Snapshot, skip down to that section below. You can also view Snapshot Pro’s documentation and check out How to Backup Your WordPress Website (and Multisite) Using Snapshot.

Finding Your Database Credentials

Assuming you have uncompressed your WordPress backup and found your database file and your WordPress files, open up your wp-config.php file and look for the following similar lines:

.gist table { margin-bottom: 0; }

Make a note of your database’s name. You can find it listed after DB_NAME and instead of seeing database_name_here, your real database’s name would be written there.

Similarly, make a note of your database’s username which you would see instead of username_here. Also, record the password which would replace password_here in the above example.

Head back to your local environment program and open up phpMyAdmin. The location is different for each software so consult their documentation if you’re not sure where to find it.

Creating a New Database

In phpMyAdmin, create a new database by clicking the New button in the menu on the left.

phpMyAdmin main page
Start by creating a new database.

Under the Create database field, enter the name of the database for your original site which you made note of earlier, then click Create.

The default for the Collation drop down box should be fine in most cases, but if you find that you run into issues later on, backtrack and try these steps again, but choose uft8_bin instead.

Databases page in phpMyAdmin
You need to create a new, empty database before you can import your existing one.

Creating a New Database User

Now that you have created a new database for your backup-testing site, you need to create a user for it.

If you don’t create a user for your database that’s the same as the one you noted earlier in your wp-config.php file, your test site for your backup won’t work. Although, you can assign one of the existing users to your database and update your wp-config.php file later.

If you think this would be easier for you, go ahead and click Edit Privileges for the existing user of your choice. On the next page, select all privileges, then under Privileges > Database, select the new database you created, then click Go.

If you prefer not to edit your core files, you can add a new user instead. Once your database has been successfully created, click on the Privileges tab while your new database is highlighted on the left, then click on the Add user link.

The database privileges page
After creating a new database, create a user for it by clicking on the Privileges tab.

On the next page, enter the username and password you made note of earlier that was written in your wp-config.php file. Under Database for user, be sure that the third checkbox is the only one checked for Grant all privileges on database. It should be checked by default.

If you don’t see this option, that means your new database wasn’t selected in the menu before clicking the link to add a new user. Try again with your database selected.

Next, click the Check All box under Global privileges, then click Go at the bottom of the page.

The create new user page
Check the box to select all privileges or else your site won’t work.

Importing Your Database Backup

When you see a message toward the top letting you know your user was successfully created, click on your new database in the menu, then on the Import tab.

Click Choose file and select your database backup from your computer. All the default settings should be fine, but keep in mind that if the file doesn’t end in .sql, .sql.zip or .sql.gzip format, then select the correct one under the Format drop down box.

Once you have selected your file, click on the Go button.

Import page
Once you created a new database and username, you can import your database backup.

Uploading Your Files

At this point, your database backup has been imported and now you need to upload your site’s files. Copy the uncompressed files to the folder where your test site is held.

This is usually different for most local environment creating programs so consult their documentation if you’re not sure where you test site is located on your computer. You can also check out the links in the first section of this article.

For single installs of WordPress, you should be all set. you can type in localhost into your browser to see your site. If that doesn’t work, check your software’s documentation for the correct link.

If you had Multisite installed, there’s one final step before you can visit your site locally to test your WordPress backup.

When you have copied the files over to your local test site’s folder, open up the wp-config.php in a code-editing program and search for the following line a little before /* That's all, stop editing! Happy blogging. */:

.gist table { margin-bottom: 0; }

Instead of seeing your-site.com, you should see your real domain. Replace that with localhost and save the file.

You can go ahead and check out your site locally to test your WordPress backup.


Ultimate security with WP Defender

Defender protects you against evil bots and hackers with automated security scans, vulnerability reports, safety recommendations, blacklist monitoring and customized hardening in just a few clicks.


Find out more

Testing Your WordPress Backup Locally with Desktop Server

For Desktop Server, setting up your backup on a local environment is a lot different and easier.

Start by installing the free Duplicator plugin on your live site. Create a backup, then fire up Desktop Server and check out the importing details in the posts Getting Started With Import And Export and Using Duplicator to Import a Live Website.

Testing Your WordPress Backup with Snapshot

On your live site, install, activate and set up Snapshot Pro, then create your backup. You can check out How to Backup Your WordPress Website (and Multisite) Using Snapshot and Snapshot Pro Usage for all the details on that.

Make a note of all the plugins you have installed on your site since you’ll need this information later.

Create a fresh install of WordPress on a local or live site, then install Snapshot Pro there and set it up. Install all the plugin you had on your original site, but keep them all inactive.

Go to Snapshot > Import and enter the URL where your snapshot is located.

Import page
Import your snapshot so you can activate it to verify it works.

Next, click Scan / Import Snapshots and when you see a message letting you know the import was successful, go to Snapshot > All Snapshots.

You should see your snapshot listed. Hover over the name and click on the restore link.

All Snapshots page
Click to restore your snapshot and test it out.

On the next page, click the restore link under the snapshot’s file name.

On the next page, go through the options and make sure they’re set correctly:

  • Restore Blog Options > Site URL – Click the Change button if the URL of your test site is different, otherwise, skip down to the next section.
  • What Tables to Restore? – Click on the button for Restore selected database tables and check all the boxes for all the tables listed that are dynamically displayed.
  • What Files to Restore? – Choose the Include selected files option, then check all the boxes for the files that are listed dynamically.
  • Restore Theme Options – Check the box for Plugins > Turn off all plugins, then select the theme you want to activate.

Finally, click the Restore Snapshot button. Pat yourself on the shoulder while you wait for your snapshot to percolate and when the process has completed, you can go ahead and test your snapshot to make sure it works.

How Often Should You Test Your WordPress Backups?

Now that you can test your backups locally and with Snapshot Pro and you know why it’s important to test your backups, one question remains: How often should you test your backups to make sure they work?

The answer to that question really depends on the frequency of activity on your site. If you don’t post often and you don’t receive comments regularly, you can probably get away with checking your backups less frequently.

On the other hand, if your site flourishes regularly with your activity, it’s a good idea to verify your WordPress backups regularly and consistently.

As a general rule of thumb, you can test your WordPress backups once for every three or four backup cycles. If your backups are far and few such as every few months or once a year, it’s probably best you test each of your WordPress backups after they’re made.

You can also look at it this way: Think about how long you can go without having to worry about losing content if your site broke and you had to restore it. This timeframe is good starting point to start considering the maximum amount of time you should go without testing your backups.

With all things considered, verify your WordPress backups as frequently as you deem necessary.

How to Choose The Best Premium WordPress Theme for Your Site

When you are starting a blog, choosing the right theme is crucial for your success. During the process, you will likely have to decide between free WordPress themes vs premium WordPress themes. Often users ask us which one is better and what’s our selection process when choosing a premium WordPress theme. In this article, we will cover how to choose the best premium WordPress theme for your site. By the end, you will know exactly what to look for and what you absolutely need to AVOID!

Choosing the best premium WordPress theme

Free WordPress Theme vs Premium WordPress Theme

One of the main reason why a lot of users choose a premium WordPress theme over a free one is because you get guaranteed support.

Free WordPress themes are often built as a passion project, so you are not guaranteed to get support or updates.

On the other hand, when you pay for a premium WordPress theme, you get good documentation, access to support, and regular updates.

Some theme shops even go beyond and offer video tutorials, demo content, and even a free blog setup service.

Aside from that, premium themes are make your website more unique because free themes are being used by everyone.

Having said that, here’s what you need to look for when selecting a premium WordPress theme.

1. Aesthetically Pleasing Modern Design

Modern web design

You will probably be using this theme on your website for quite sometime. You users will become accustomed to it. That’s why you need to choose a theme which is aesthetically pleasing and can be used for a long time without requiring any major changes.

There are certain elements of design that are used by all good designers to create beautiful websites.

  • Good Color Combination
  • Awesome Typography
  • Clean Layout
  • Beautiful Images

Together these elements create a beautiful harmony and consistency that appeals to your users. It not only looks great, but it also helps you achieve your business goals.

Most premium themes come with unlimited color choices and built-in tools to select fonts. You need to make sure that your premium WordPress theme uses better typography out of the box.

Don’t just look at the homepage. Go deeper in the theme demo and explore other sections. For example, if you are building a portfolio site then check theme’s demo for portfolio. If you will be adding testimonials, then checkout how testimonials look in the theme demo.

Make sure that there are plenty of page templates and layouts to use. Examine homepage, single pages, posts, and blog sections to make sure that they all maintain the same design consistency and appeal.

2. Features vs Presentation

Features vs presentation

The main difference between WordPress themes and plugins is that themes handle the presentation part of your website and plugins handle the functionality.

However, the premium WordPress theme market is highly competitive and sometimes theme developers cannot resist the temptation to add more plugin-like functionality into their themes.

Why is this considered bad practice?

When a WordPress theme crosses over into the plugin territory, it becomes difficult to switch themes. For example if a WordPress theme is using a custom post type, then switching to another theme would make those custom post types disappear from the admin menu.

Shortcodes defined by theme would also stop functioning which also makes switching a difficult and time consuming process.

On the other hand, there are WordPress themes which behave exactly like a plugin. Offering functionality needed to create very specific niche websites. For example real estate themes or hotel themes. Some of these themes are really useful, but if you are going to use those themes, then you need to understand that it will be difficult to switch themes later because other themes may not have the similar functionality.

3. Security and Performance

Theme performance

Many WordPress beginners don’t pay much attention to speed and good coding practices when choosing a premium theme.

In the race to win new customers, theme developers can integrate unsafe and quick solutions that can compromise your site’s security. The insane amount of features can cost you speed and performance issues.

Now the problem is that most beginner level users do not have the skills to study code. So how do you know that the code behind a premium theme is of good quality?

First, you need to buy your premium themes from trusted and well reputed WordPress theme shops. Some of the theme shops that we trust and recommend are:

Secondly, look around for reviews and customer testimonials. See who else is using themes developed by that particular theme shop or developer. Are there any big websites or blogs using their themes? Checkout the testimonials page on the theme shop or search for their reviews on Google.

4. Compatibility Check

Before you start browsing for a premium theme, take a few moments to write down all the features you are looking for. For example:

  • Do you need eCommerce support?
  • Translation readiness for non-English websites
  • BuddyPress or bbPress support
  • Any other plugins that you might be using

Many premium themes come with built-in templates and support for popular eCommerce platforms like WooCommerce and Easy Digital Downloads.

If a theme you are looking for is not available in your language, then ask the theme developer to see if a translation is in progress.

Some users may want to use very specific plugins to create niche websites like job boards, question answer websites, etc. Feel free to ask the theme developers if their theme would work with a specific plugin.

You need to make sure that you are investing your money in the right place.

After Selecting the Perfect Premium WordPress Theme

A good premium WordPress theme would help you easily build high quality websites. However, there are still many things you can do to improve your site.

We recommend taking a look at these 24 must have WordPress plugins for all websites.

If you want to further customize your website, then you should look at CSS Hero which makes it easy to customize websites (see our CSS Hero review).

We hope this guide helped you choose the best premium WordPress theme for your site. You may also want to see our comparison of the best WordPress contact form plugins.

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

The post How to Choose The Best Premium WordPress Theme for Your Site appeared first on WPBeginner.

Plugged In: Video 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 monetizing your WordPress site. (For more information on WordPress plugins, download our ultimate guide.)

Images are a great way to supplement your content, but videos can be even more dynamic. An engaging video can not only pull in more viewers but keep them on your site. That said, the native media hub in WordPress may not format your videos the way you want. That’s where plugins come in.

We have compiled a few of the most popular from the WordPress Plugin Repository. With these, you will be able to display your own videos or pull them in from somewhere else.

YouTube Embed Plugin

Screen Shot 2016-09-21 at 10.02.54 AM

One of the easiest ways to upload and view videos online is through YouTube. Once you upload your content, use the YouTube Embed Plugin to put it into your site. The plugin allows you to add an entire YouTube playlist right onto your site, or opt for a video gallery. You can choose to enable automatic play or let users scroll through the playlist. YouTube Embed creates custom thumbnails do you don’t have to.

Upon downloading the plugin, you’ll get a special button for YouTube right next to Add Media. That makes it incredibly easy to pull in any videos you want. If the channel is your own, add a Subscribe button below the video gallery and boost your numbers.

Video Thumbnails

Screen Shot 2016-09-21 at 11.06.43 AM

Making video thumbnails can be a pain. They need to be clickable but also informative. Get rid of those awkward screenshots of someone’s face with the Video Thumbnails plugin. The plugin works with YouTube, Twitch, Vine, Vimeo, and more to create the perfect thumbnail. Once the image is created, you can save it to your media library and even set it as your featured image. This is a great option for anyone solely posting a video.

Video Thumbnails has over 100,000 active downloads and is actively updated. It’s a great way to remove the stressful thumbnail creation process.

WP Video Lightbox

Screen Shot 2016-09-21 at 12.59.35 PM

WP Video Lightbox allows you to display videos in a different way. When a user starts to play a video, it will pop out and make the screen behind the player dark. This makes it easier to view the video without the distractions of the post and ads behind it. The plugin works with YouTube or Vimeo and it’s a very easy embed process. Some sites begin playing the video in the form it appears on the site, which makes it hard to properly view. WP Video Lightbox puts special attention on it.

If you don’t have a lot of video content, the plugin can also be used to create a lightbox for photographs and other images. A great idea for infographics or diagrams.

What are your favorite video 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: Video Plugins appeared first on WP Engine.

Introducing WPMU DEV Cloud Backups (Members Get 10GB for Free!)

Hey, we just took your WPMU DEV membership to the next level by giving you 10GB unlimited site managed cloud backups.

Oh, and guess what? It’s part of your regular WPMU DEV membership so is gonna cost you zero dollars and zero cents🙂

How does it all work? Well, first up you can manage all of your backups along with your sites through The Hub (just sign up for a free trial of WPMU DEV to have a play, or if you are already a member, go to My Websites).

The managed backups dashboard.
The managed backups dashboard.

And there you have it, all that you need to do is install (or update) our backup plugin Snapshot and every site you manage via WPMU DEV will come with managed backups.

What’s that I hear? You wanna check out some of the features? Well, sure thing!

Scheduled and One-Off Backups

The managed backups dashboard.
The managed backups dashboard.

By default, when you set up Snapshot you’ll run an initial backup and also set up a backup schedule.

So as soon as you’re up and running we’ll backup your site, by default, on a weekly basis, storing the latest three backups, which you can easily configure up or down.

Then we’ll recycle the oldest with a new one. How easy is that!

10GB Storage to Use on Unlimited Sites… For Free!

Yep, that’s a nice healthy 10GB of storage space there for you, absolutely on the house.

And there’s absolutely no limit (as with all of WPMU DEV) on the number of sites you can use it with.

We’re starting with 10GB ‘cos it seems like a nice, reasonable amount, but there will definitely be options for more in the future and you can easily manage it by setting your number of stored managed backups to less than three.

Snapshot is standing by, ready to backup your WordPress site.
Snapshot is standing by, ready to backup your WordPress site.

And Store to FTP, S3, Dropbox, Google Drive…

And if you do run low on data, you can always take advantage of Snapshot’s native third party integrations, which are as easy to set up as clicking Add New.

Snapshot storage to other locations is sooooper easy, so you never need to worry about running out of space.
Snapshot storage to other locations is sooooper easy, so you never need to worry about running out of space.

And When it Comes to Restoring, Oh My!

Restoring couldn’t be easier. Just visit The Hub and select the managed backup you would like to restore.

You can also download the backup directly if you like and review where the backup is stored.

And then we’ve got options for you.

Easily restore your website from backup.
Easily restore your website from backup.

So, ideally your site is still up, in which case you can just click on the top box (or follow the navigation) to restore via Snapshot itself.

But sadly we want to restore a managed backup because WordPress is broken, disks have been corrupted etc.

So we’ve got you covered for that, too!

Just download the backup, upload our Snapshot installer and then click the link in step 2 and you’ll be guided through a complete restore.


And We’re Not Done Yet…

So first up we’ve got a spanking new version of Snapshot itself coming out soon, which will make things a lot more beautiful and easy to use (as well as adding in some cool new things).

But most importantly, we’re here to serve you, our members, so how about you take our new managed backups for a spin and let us know what extra features you’d like.

And if you’re not already a member, sign up now for a 14-day free trial to try it out!

How to Convert Any HTML5 Template Into an Awesome WordPress Theme

What do you do when you can’t find the perfect WordPress theme? In all likelihood, you probably turn to a theme framework. However, every once in a while, you probably have this thought flit across your mind: “I should just code an HTML5 template and convert it into a WordPress theme.”

But that’s just a pipe dream right? Let’s be realistic.

The truth is, as long as you have some basic WordPress programming skills, converting an HTML5 template into a WordPress theme is within reach – provided you’re willing to put in the effort. In this post, I’ll show you how.

Why Convert an HTML Template Into a WordPress Theme?

There are a few good reasons why you might want to take on this project.

  • Using an HTML5 template means you have complete control over every minute detail of the appearance of your website. Don’t like some part of the template? Change it. It’s a lot easier to tweak a simple HTML template than a complex WordPress theme.
  • Using an HTML5 template means you don’t end up loading up your site with a bunch of features you don’t plan to use.
  • If you want a WordPress theme that isn’t being used by thousands of other sites, converting an HTML5 template is one way to end up with a completely custom WordPress theme.
  • If you’ve never built a WordPress theme before, converting a template will really stretch your WordPress development muscles – in a very good way.

In this article, I’ll start with a simple HTML5 template and turn it into a full-fledged WordPress theme. Follow along, and you’ll be able to do the same.

Setting Up Your Development Environment

In order to convert an HTML5 template into a WordPress theme, the first thing you’ll need to do is get your development environment set up.

Here are the tools you will need in place before you start work:

  • A local server to power WordPress: There are many options to consider. We’ve detailed how to use XAMPP, MAMP, WAMP, VVV and Vagrant. Pick one and get it working.
  • A local WordPress installation: It’s best to build a WordPress theme while you have as few plugins activated as possible, so either create a new installation or use an existing installation after deactivating as many plugins as possible.
  • A git repo to keep track of your changes: While this isn’t technically a requirement, it’s a good idea. I’ve used GitHub to track my changes and host the finished product, and Sourcetree to serve an easy-to-use GUI for git.

You’re also going to need to be familiar with how WordPress themes work and have basic PHP coding skills before diving headfirst into this project. If the terms “template hierarchy”, “codex”, and “the loop” are unfamiliar to you, then you need to do some homework before jumping into this tutorial. You can learn what you need to know by taking a course or two from The Academy or by reading through our beginner and intermediate WordPress development series.

If you get stuck at any point along the way and want to compare the template files I used with the finished WordPress theme, you can get a copy of the template files from Start Bootstrap and see my WordPress theme’s source code at GitHub.

Step 1: Find a Template or Build Your Own

You can convert any HTML template into a WordPress theme. However, your task will be much easier if you pick a template layout that sticks closely to the core functionality built into WordPress: posts, pages, a sidebar, a header, and a footer. When looking at templates – or coding your own – think about how the parts of the template will translate into a WordPress theme.

That doesn’t mean that you can’t convert any template into a WordPress theme. You can. However, the more non-traditional the template you select, the more work it will take to convert it into a fully-functional WordPress theme.

I’m a minimalist when it comes to web design and a proponent of “mobile first” design. As a result, a basic blog template based on Bootstrap is exactly the sort of thing I’m looking for.

For this tutorial, I’ve settled on the Blog Post and Blog Home templates from Start Bootstrap.

screenshot of the blog home template by start bootstrap

These templates are free, minimalist, will translate easily to WordPress, and they’re built with Bootstrap. Perfect.

Once you’ve settled on the perfect them, or coded your own, you’re ready to move on to the next step: turning the template into a WordPress theme.

Step 2: Turn the HTML5 Template into a WordPress Theme

At this point, you should have an HTML5 template in hand. It should be composed of a directory that includes an index.html file and subdirectories for CSS and JavaScript resources. Copy the entire theme directory into the wp-content/themes/ directory of your WordPress development site.

The WordPress theme is now located where it needs to be for WordPress to find it. However, to activate the WordPress theme on your development site you have to make two changes:

  • Rename index.html as index.php.
  • Add a style.css file with a properly formatted theme file header to the theme directory.

Alternatively, you could just move the template’s primary CSS file up one level – out of the /css directory and into the WordPress theme root directory. The key is that there must be a style.css file in the theme root directory, and it must include a proper theme header.

If you’d like to, this would also be the right time to add a theme screenshot to your theme directory.

Once you make those changes, your WordPress theme will be available for activation when you go to Appearance > Themes in the WordPress admin area. Go ahead and activate your WordPress theme and view your site front end.

At this point, your WordPress theme won’t look pretty. Here’s how my site looked at this point:

how my site looked before enqueuing styles and scripts properly

What’s happening is that all of your theme’s CSS and JavaScript resources are contained in your theme directory, but your HTML template is set up to find the files relative to your site domain. In other words, WordPress theme resources are located in http://yourdomain.com/wp-content/themes/your-theme-directory/, but your site template is looking for those resources in http://yourdomain.com.

Obviously, it’s not finding them. So, the next step is to add CSS and JavaScript resources to our WordPress theme in such a way that WordPress will find them.

Step 3: Properly Enqueue Scripts and Styles

The proper way to add scripts and styles to a WordPress theme is to enqueue them. In order to do that, you will need to create a functions.php file in your theme’s root directory.

Now, take a look at the CSS and JavaScript resources linked to your HTML template. The CSS resources will be added in the template head and the scripts may be added in either the head or just before the closing body tag.

Once you’ve located all of the CSS and JavaScript resources you need to add to your WordPress theme, build a function that enqueues all of the scripts and resources – don’t forget to include your theme’s style.css – and then hook the function into your WordPress theme with the wp_enqueue_scripts hook. You’ll want to add the function and the hook to your theme’s functions.php file.

Your enqueuing function will look somewhat different. However, for reference, here is a look at the enqueuing function I built:

.gist table { margin-bottom: 0; }

With the CSS and JavaScript resources enqueued, WordPress will now recognize the resources your theme depends on. However, in order to actually insert them into your live site, you need to add two hooks to your WordPress theme’s index.php file:

  • wp_head: Must be added just before the closing tag in index.php.
  • wp_footer: Must be added just before the closing tag in index.php.

Here’s an approximation of what your index.php file should look like with these tags added:

.gist table { margin-bottom: 0; }

With those hooks added, and scripts and styles properly enqueued, your WordPress theme should now look just like the original HTML template.

The next step is to we’ll break index.php into the multiple parts so that we can reuse the header, footer, and sidebar with posts, pages, archive pages, and more.


Stunning drag ‘n’ drop themes with Upfront

Drag, scale, position, customize and see every edit you make to your website – in real-time – with our Upfront theme framework for WordPress. Choose from our collection of starter themes and get started customizing your site right away. Or start from scratch with the Upfront Builder and bring the site you’ve always dreamed of to life.


Find out more

Step 4: Create Template Partials

A template partial is part of a WordPress theme that is only used when it is referenced by one of your theme’s template files.

Let’s look at an example, virtually all WordPress themes break the document head out into a header.php file. That way, the header can be reused with pages, posts, the home page, archive pages, and the 404 and search pages. However, header.php is never called directly. It is only used when it is called by a template file such as index.php.

In most cases, you will want to create at least three template partials:

  • header.php
  • footer.php
  • sidebar.php

Create header.php

Create a new file in your WordPress theme’s root directory and name it header.php. Your theme’s header.php file will include the document type declaration, the opening HTML tag, the entire head element, the opening body tag, and your site navigation – in short, everything you want to appear at the top of every page of your site.

Before you copy over that code, you need to create a file header. Every file in your WordPress theme should include a file header which is simply a brief explanation of the purpose of the file. Take a look at a couple of file headers from themes available from the WordPress theme directory. You’ll see that they all look quite similar. Your file header for header.php should look something like this:

.gist table { margin-bottom: 0; }

Once you have a file header in place, go ahead and copy over all of the header code from index.php over into header.php. Next, delete all of the header code from index.php and replace it with the get_header() WordPress function like this:

.gist table { margin-bottom: 0; }

Create sidebar.php and footer.php

Repeat the same process by creating a separate file for all sidebar contents and an additional file for all footer contents. After copying the code from index.php to the relevant files and delete it out of index.php, use the get_sidebar and get_footer WordPress functions to tie all of the template files together.

When you’re done, index.php should begin with a file header and get_header, and end with get_sidebar followed immediately by get_footer. In between those three functions should be the main contents of your page.

Here’s a simplified look at what index.php should look like at this point:

.gist table { margin-bottom: 0; }

Step 4: Add the Loop

The loop is the function that queries the WordPress database and generates the content displayed on every page of your WordPress website. In general, you will want to have at least two different versions of the loop:

  • One version of the loop for your blog page that displays post titles, meta data, the featured image, and a post excerpt.
  • A second version for your pages and individual posts that displays the full content of the page or post.

In addition, you may want to refine the loop even further by crafting variations for individual pages, individual posts, search results pages, and more.

At its most basic, here’s what the WordPress loop looks like:

.gist table { margin-bottom: 0; }

Of course, the comment in that bit of code would have to be replaced with WordPress functions to generate content and HTML tags to render that content properly.

The loop needs to take pages, individual posts, the blog page, the homepage, archive pages, and the 404 and search pages into account. As a result, getting it all done in a single file is a challenge. For this reason, most public themes break the loop out of index.php and put it into multiple separate files with titles like content.php, content-single.php, content-page.php and so forth.

If you decide to put the loop into multiple files, use conditional tags along with the get_template_part function to reference the version of the loop you wish to use.

My recommendation is to start simple and slowly iterate your loop(s) until you’re happy with what shows up on your WordPress site. If all else fails, the following loop should work for virtually every WordPress website, although the result may not be as stunning as you’d like. However, it’s a good jumping-off point if the loop is brand new to you.

.gist table { margin-bottom: 0; }

Covering the loop in-depth is beyond the scope of this tutorial. However, it’s a topic we’ve covered before and you can learn all about it by reading WordPress Development For Intermediate Users: Queries and Loops.

Step 5: Replace Template File Content with WordPress Functions

This next step may vary considerably from one HTML template to the next. What you want to do is work your way through each template file – header, index, content (if applicable), sidebar, and footer – replacing every piece of static content with an appropriate WordPress function.

Start with header.php. Every time your run into a bit of content, replace it with a WordPress function. If you aren’t sure what function to use, there are two things you can do to find the correct function:

  • Take a look at the template files of a well-coded WordPress theme such as Twenty Sixteen and copy what they do. Twenty Sixteen is GPL, copying is fine – even encouraged!
  • Use Google to locate the appropriate functions in the WordPress Codex by searching for terms like “WordPress charset function.”

One step that can be particularly tricky is setting up the header menu. Let’s take a minute to look at that step in detail.

Setting Up the Header Menu

Adding a header menu is a two-step process:

  • Add the header location to your WordPress theme by adding a function to functions.php.
  • Insert the menu into header.php being careful to duplicate the classes and ids employed by the HTML template.

You will need to use the register_nav_menus function to add a menu location to your WordPress heme. In the case of the example WordPress theme, I dropped the following function into functions.php:

.gist table { margin-bottom: 0; }

Next, you need to use the wp_nav_menu function in header.php to generate your menu. Pay special attention to the classes and ids applied to the menu in your HTML template. You will need to duplicate these selectors so that the template’s CSS will be applied to your new menu. Thankfully, the WordPress function makes that pretty easy. Here’s how the code that adds the menu to my WordPress theme’s header.php looks:

.gist table { margin-bottom: 0; }

Note that I added two classes to the menu itself, nav and navbar-nav, as well as an ID and two classes to the menu container. I just copied these selectors from the HTML template. This ensures that the menu will pick up the template styles.

Setting Up Widget Areas

You will also need to set up sidebar, header, and footer widget areas as applicable based on the template you’re using. Adding widget areas is a two-step process:

The register_sidebar function accepts an array of values that includes the name of the widget area, the widget area ID, as well as the bits of HTML that should appear before after each widget and the widget title. The register_sidebar function is nested inside of a custom function, and that custom function is hooked into WordPress using the widgets_init hook.

Here’s how the function that registers the sidebar area for my WordPress theme looks in my theme’s functions.php:

.gist table { margin-bottom: 0; }

With the widget area registered, we can add it to sidebar.php with dynamic_sidebar. The dynamic_sidebar function accepts the widget area ID that we registered with register_sidebar in functions.php.

Here’s how the code adding the widget area to sidebar.php looks in my theme:

.gist table { margin-bottom: 0; }

Those two functions work together to generate my theme’s sidebar widget area. The widget area will be contained in a div with a class of col-md-4. In addition, each widget will be contained in a div with a class of well, and each widget title will be nested inside of a fourth-level heading element.

You can apply this process to add any number of widget areas to your WordPress theme. All you have to do is:

  1. Create a different register_sidebar function with a unique ID for each widget area. You can stack all of your register_sidebar functions inside of a single custom function, and then initialize them all at once using the widgets_init hook.
  2. Use the dynamic_sidebar function and the unique widget area ID to load the widget area wherever you want it to appear: in the sidebar, header, or footer.

Next Steps…

If you’ve followed along, step-by-step, at this point you have converted an HTML5 template into a functional WordPress theme. Congratulations!

I followed this same process to create this WordPress theme:

screenshot of completed simple blog theme

If you look back at the template at the top of this tutorial you’ll see that it’s pretty much a spot-on duplicate.

While you’re undoubtedly pleased with what you’ve accomplished so far, there’s a good chance you aren’t completely satisfied with what you’ve created. The next steps you will probably want to take include:

  • Creating custom templates and loops for individual posts, pages, search results, and a 404 page template.
  • Adding a comments section to your individual posts and pages.
  • Building custom widgets that match the styling of the widgets shown in your template.
  • Internationalizing your WordPress theme if you plan to make your theme publicly available.

If you’ve made it this far, then you have the skills necessary to take on each of these additional tasks. However, walking you through the process is beyond the scope of this tutorial. If you need help taking on these tasks, take a look at the following resources that teach the concepts necessary to tackle these next steps:

In addition, I’d be remiss not to mention that I’ve taken two courses from The Academy over the past few months. It was in those courses that I learned the skills necessary to complete this project.

Wrapping up

Converting an HTML5 template into a WordPress theme can be a time-consuming, challenging endeavor. However, going through the process means you will end up with a genuinely unique WordPress theme, and if you’ve never converted a template into a theme before, you’re sure to learn a lot along the way as well.