Saturday, September 24, 2016

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?


post-tags

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


content-tag

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


title-tag

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.


page-tags-hubspot

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.


page-tag-boa

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.


post-tags-subpanel

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


post-tags-categories

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.



SEO


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.


TRY SMARTCRAWL FREE
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

    multi-column-tag-map

    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

    categories-tags-panel

    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

    google-trends

    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

    yoast-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

    seo-optimized-images-plugin

    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.


Receiptful Review: Supercharge Your Emails to Boost Online Sales

People that have already purchased from you are most likely to purchase from you again in the future.  In fact, loyal customers are often worth up to ten times as much as their original purchase. And, capitalizing on this fact can be as easy as boosting your communication with current customers using WooCommerce's newest product – Receiptful.

Here at WP Mayor we have shown you ways to increase revenue via affiliate marketing.  We have also shared our thoughts on the best available eCommerce plugins for your online shop, as well as the top WooCommerce themes supporting the popular WooCommerce plugin.

However, today we are going to show you an even better way to drive revenue using nothing more than what you already have: an email and a customer. Oh, and of course the Receiptful plugin. You need that too!


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.

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:




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:




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.



THEMES


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.


TRY UPFRONT FREE
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:




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:




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:




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:




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.




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:




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:




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:




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:




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.


How to Get More Social Shares on Your Blog Posts Using These Plugins

To earn the trust of your blog readers, you need to write good posts that resonate with them. Among the many factors that determine the quality of blog posts are social shares. The more social shares your posts have, the more chances visitors will take it that your posts are good. Therefore, you need to find a way to increase your social shares and get the trust of your audience. In this post are five WordPress plugins that will help you boost your social shares.


The Major Differences Between WordPress.org and WordPress.com

Choosing a WordPress website extension may look like a herculean task for the website owner purely because one needs to balance the equilibrium of benefits and trade-offs. This blog will guide you to set your requirements right before owning a domain extension for your WordPress site.


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:




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. */:




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.



SECURITY


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.


TRY DEFENDER FREE
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 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.