WPMU DEV's Blog - Everything WordPressWordPress Tutorials - WPMU.org http://premium.wpmudev.org/blog The WPMU DEV WordPress blog provides tutorials, tips, resources and reviews to help out any WP user Thu, 30 Oct 2014 15:52:21 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.2 Free WordPress Themes: How to Choose the Perfect Theme for You http://premium.wpmudev.org/blog/free-wordpress-themes-how-to-choose-the-perfect-theme-for-you/ http://premium.wpmudev.org/blog/free-wordpress-themes-how-to-choose-the-perfect-theme-for-you/#comments Wed, 29 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=133402 The volume of free quality themes available for WordPress boggles the mind.

With nearly 3,000 themes available on WordPress.org at the time of writing, we’re certainly spoilt for choice.

However, that choice comes with a dilemma: how to separate the relatively low percentage of high-quality themes from the rest. And, unfortunately, the “rest” aren’t that great.

With that in mind, in this article I want to show you how to separate the WordPress wheat from the chaff, so to speak. We’ll cover every aspect of what you need to consider when choosing a free theme for your WordPress website.

Make no mistake: free themes can be seriously good-looking.

Why Choose a Free WordPress Theme Over Premium Options?

This article is going to focus on how to pick a free theme, but I do want to briefly touch upon the free versus premium debate first, mainly because it gives me an opportunity to link to Raelene Wilson’s excellent article on free WordPress themes.

In short, most free WordPress themes are free for a reason: they’re not as good as their premium counterparts.

However, there is a big overlap between the two. Many free themes are better than lower quality premium offerings, and it could well be that you do not need a premium theme; that a free theme will do the job perfectly well for you.

To hammer my point home, here are a selection of free themes available on WordPress.org right now that I consider top quality:

There’s plenty more where that came from — trust me.

Ultimately it’s up to you, but we’re going to proceed on the assumption that you want to find a free theme for your site and are willing to put a little time into finding the best option for you.

WordPress Theme Customization: What You Need to Consider

Ideally, you should make a decision about customization before you start looking for themes. More specifically, you need to ask yourself if you want to find a theme that you can use as-is, or one that you can tweak to your satisfaction.

The first option is obviously very simple, while option two can be akin to opening a can of worms.

The issue is this: high quality themes are put together with a great deal of thought. Everything “fits.” As soon as you start customizing such a theme, you run the risk of negatively affecting the harmony of the designer’s original vision.

To put it another way, you can make a mess of something pretty. I say this with affection; I am guilty of having done this many times in the past. You’re not alone!

My recommendation for design newbies is to pick a theme you love the look of it and leave it well alone in terms of advanced customization.

It is, of course, your prerogative. If you want to change the color scheme, fonts and so on, more power to you. That being the case, you should be on the lookout for information in the theme’s description on WordPress.org as to how easily it can be customized. A simple rule of thumb is this: assume that a theme cannot easily be customized unless it is explicitly stated in the theme’s description. In my experience, that tends to be the case.

WordPress' default themes (such as Twenty Fourteen, above) usually do a great job of listing customization options.
WordPress’ default themes (such as Twenty Fourteen, above) usually do a great job of listing customization options.

The simplest path is to find a theme that you are happy enough with; that you can install and then continue with what really matters: creating content and marketing your site.

There is no such thing as a perfect design; you just need to find something that works for you. The path to perfectionism is filled with dead ends and many wasted hours.

The Basics of Choosing a Free WordPress Theme

I don’t want to insult your intelligence, but there are a few basic things worth recapping when it comes to choosing a free WordPress theme.

1. (Almost) Only Ever Download Free Themes from WordPress.org

WordPress logo

Since WordPress.org essentially acts as a free advertising platform for any free theme developer, there is no obvious reason for an honest theme developer not to upload their theme.

Therefore, if someone doesn’t upload their theme, one has to consider why.

With that in mind, a good rule of thumb is to never download free themes from anywhere else other than WordPress.org.

Of course, there are always exceptions that prove the rule.

2. You Can Download Free Themes from Reputable Third-Party Sources


Some reputable developers release free versions of premium themes (or free offerings in an attempt to entice people into purchasing premium themes sometime down the line), which aren’t made available on WordPress.org. WooThemes is an obvious example.

You’ll want to be a little careful about downloading these themes. Obviously, a company as reputable as WooThemes are perfectly safe to download themes from, but in general you’d do well to stick to the carefully considered recommendations we’ve made here on WPMU DEV in the past.

If you’re interested in going down this road, check out Joe’s huge collection of 120 free WordPress themes from premium theme developers.

3. Check Key Theme Information on WordPress.org

WordPress theme information

There’s another good reason why you should only download themes from WordPress.org: you’re provided with valuable information that you will not generally find elsewhere.

In brief, here’s why each piece of information shown to the right is valuable (and how you can best analyze it to make an informed decision):

  • Last Updated: You will want to pick a theme that has been updated recently (say in the past 3-6 months).
  • Downloads: As a rough rule of thumb, the more downloads a theme has, the better you can expect it to be.
  • Ratings. Star ratings should be used as a guideline, and taken with a pinch of salt. Don’t necessarily let one star reviews put you off a theme; you can click on each line of star ratings to see written reviews, and you’ll often find that people have left low ratings with no justifiable reason.
  • Support. The ratio of resolved/unresolved support threads serves as a good indicator of the developer’s willingness to resolve issues. Quality free theme support is a pretty rare commodity, so finding a well-supported free theme can serve as a a compelling reason to choose it.

How to Find Free Themes For Your WordPress Website

From here on in I’m going to continue on the assumption that you are using WordPress.org to find your free theme of choice, because it is, in my opinion, the best tool for our purpose.

Having said that, if you do choose a theme from a third-party provider (such as WooThemes), you’ll still find plenty of useful information below.

When it comes to finding candidate themes for your website, you have two broad options:

1. Explore Curated Free WordPress Theme Collections

A quick Google search will turn up plenty of curated free theme lists for you to choose from. For example, Raelene (yep — she’s at it again) published a list of the 20 best free WordPress themes for bloggers not too long ago. Most of those themes are available for download from WordPress.org while others are available for free from premium theme shops.

Stanley: one of the free WordPress themes recommended by Raelene.

You can try different search queries to suit your needs. For example, rather than simply typing “free wordpress themes” into Google, try “free wordpress business themes” or “free wordpress portfolio themes” instead.

As long as the featured themes always lead back to WordPress.org (or if you’re feeling adventurous, a reputable third-party site), you’re golden.

2. Browse WordPress.org

Unfortunately, WordPress.org does not offer the best browsing experience. The tags and filter search engine is not yet that reliable; you’re better off browsing through themes manually.

Your best bet is to start from the top of the Most Popular list and work your way down until you have found a number of themes that you like the look of. It’s not ideal, which is why I prefer to work with curated themes lists as I mentioned above. It’s far better to let someone else do the work in scoping out quality free themes than doing the work yourself, but if you like the thrill of the hunt, feel free to browse through WordPress.org

How to Inspect a Free WordPress Theme

In my experience, it is all too easy to get sucked into a theme’s superficial beauty, only to later find that it’s not for you.

To be more specific, there’s a lot more to a theme than its homepage, which is the point I want to drive at in this section.

The first thing I’ll say is that a theme without a good demo site should almost certainly be disregarded. Unfortunately, WordPress.org’s Preview function is not particularly useful, as it only utilizes a limited amount of dummy text. In short, it is not representative of what the theme will look like on a “real” website.

Twenty Fourteen theme

Instead, what you should be looking for is the “Theme Homepage” link on the theme’s WordPress.org page, which should take you through to a dedicated page with a demo/preview option:

Most popular themes -- such as Catch Kathmandu -- have a demo/preview option.
Most popular themes – such as Catch Kathmandu – have a demo/preview option.

If a developer takes his or her theme seriously, they will have gone to the trouble of creating a demo. If they haven’t, you might question their dedication to creating a high quality theme.

Note that, as above, some theme demos will be the premium version of a free theme you are looking at.

Best of all, these demos almost always allow you to click through to well-populated pages of all types, and include dynamic sidebar widgets and anything else you may want to use on your own site.

A good theme demo should enable you to explore every nook and cranny, because those nooks and crannies will be vitally important when it comes to using the theme on your site.

In the case of free versions of premium themes, theme demos can also give you an opportunity to discover just how much the developer is holding back with the free version.

Checking for Responsive Design

Responsive design is now arguably the present and the future of web design. As such, in my opinion, any theme you choose should be responsive.

This is more of a hard and fast rule than an irrefutable truth, but if the developer has gone to the trouble of making a theme look good on mobile devices, it’s a pretty good sign that they’ve been conscientious in most (if not all) other elements of the theme’s design.

Believe it or not, checking responsive design on your PC or Mac is a piece of cake. If you have Google Chrome (and if you don’t, get it now), you can activate responsive views first right-clicking on the browser screen and selecting the Inspect Element option, then clicking on the small mobile button in the popup tool bar:

Responsive view

This will give you options for viewing the website in a number of emulated screen sizes and resolutions:

Catch Kathmanu preview

If the theme looks consistently good over multiple formats, you could be in business.

Running the Numbers

By this time you may have a few candidate themes that you really like the look of.

Now’s a good time to “run the numbers” on your site. There are two things on this front that we should concern ourselves with:

1. Site Speed

While there are lots of ways in which you can speed up your site, starting with an efficiently coded theme without too many resource-sucking graphics and scripts is an excellent place to start.

Fortunately, finding out if your chosen free WordPress theme will pass the speed test is easy enough. My favorite free tool is Pingdom. Just enter the demo site’s URL into the box and hit Test Now. You’ll be given all the information you need:


I don’t have an ideal site load speed that I can recommend, but my suggestion is to examine the results with this infographic in mind:

Site speed infographic
Image courtesy of Kissmetrics.

If you have a few themes that you’re interested in, compare and contrast the load times. It can be an excellent way of choosing a winner amongst a close group of competitors.

2. Theme Integrity

Once you’ve made a tentative decision to move forward with a theme, the final piece of the puzzle is to make sure that it is safe to use.

If you’ve downloaded the theme from WordPress.org, it is almost certainly safe, but it doesn’t hurt to put your own checks in place.

My WordPress security plugin of choice is Sucuri. In my opinion, they are the daddy of WordPress website security; often on the front line of new security vulnerability announcements via their blog.

Sucuri WordPress plugin

While Sucuri are ultimately in business to sell their premium products (which you may consider), their free plugin offers a good level of cover and should give you peace of mind.

If Sucuri doesn’t throw up an red flags when you install and activate you chosen theme, you should be good to go.


There is no such thing as a foolproof process for picking the perfect WordPress theme.

All you can – and should – do is equip yourself with as much information as possible in order to make an informed decision.

I hope that I have given you the tools you need to in order to do just that.

If you have any questions or comments, please fire away below in the comment and I’ll be happy to help out.

http://premium.wpmudev.org/blog/free-wordpress-themes-how-to-choose-the-perfect-theme-for-you/feed/ 4
Creating Custom Page Templates in WordPress http://premium.wpmudev.org/blog/creating-custom-page-templates-in-wordpress/ http://premium.wpmudev.org/blog/creating-custom-page-templates-in-wordpress/#comments Mon, 27 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=133210 Page templates in WordPress are a great way to add structural variations or highly customized functionality to your website. They are easy to create so newcomers can get started, but they offer enough potential to keep even seasoned professionals busy.

You can get started by copying page templates from popular themes like the default WordPress theme Twenty Fourteen and tweaking, but you can also add your own styles and Javascript with ease.

In this article, we’ll take a look at what page templates are and how you can use them to make your website better.

It’s time to create our own page templates.

What Is A Page Template?

As I mentioned in the introduction, a page template gives you the ability to deviate from your site’s existing structure in addition to adding new features. Twenty Fourteen includes two great examples: a contributor page and a fullwidth page.

Twenty Fourteen
Twenty Fourteen has a page template for contributors.

The contributor page introduces new functionality: the ability to list the authors who have contributed to your website. The full width template alters the structure of the page by removing the sidebar, focusing more on content.

Twenty Eleven also provides two page templates: the showcase template and the sidebar template. The sidebar template gives you the good old sidebar on your page, the showcase page displays sticky posts first and then a list of recent posts.

Premium themes, in particular, like adding numerous page templates to themes to create pixel-perfect contact forms, customizable post listings, highly-customized author lists and more.

Creating A Page Template

Creating a page template is extremely easy. Create any new file in your theme and start the file with a comment block like so:

If you are modifying a third-party theme you really should be using a child theme. If you don’t know how to create one, read Raelene Wilson’s great How to Create a WordPress Child Theme article.

Page template files may reside in a sub-directory – this is my favoured method. I usually create a <code>templates</code> directory and store them there.

Once created, your page template will show up in the page attributes box in the admin. If you select it and update the post, the code in your template file will be used to display the page. Give the following template code a go:

Our custom template shown in the admin
Our custom template shown in the admin

Notice that “Hello There” is all that is visible; with page templates you’re on your own. You have to call the header, footer and other page elements if you need them.

Let’s create a basic page template, which will blend in with Twenty Fourteen:

I’m sure WordPress code newcomers are gasping at the jump in complexity between the two previous examples. My little secret is cheating. I simply went into a template file in the Twenty Fourteen theme and copy-pasted it. I removed the loop, which we don’t need.

If your theme doesn’t have template files you could try copying the <code>index.php</code> file and removing the loop as a starting point.

Making Useful Page Templates

It’s all well and good to have a page template, but we really should add something useful to it. From this point on it is completely up to you, as long as you can code it in PHP/HTML you can use it.

Here are a few ideas to help you get started:

  • Custom contact page with Google Maps and a contact form
  • A page listing the newest post from each category
  • An archive page listing five new posts and category posts from your top three categories
  • A sitemap page listing all your content (posts and pages)
  • A page listing your recently uploaded images
  • A post list ordered by comment counts
  • A post list showing posts ordered by the last update time
  • A list of authors and their top three posts
  • A custom designed page for your portfolio

Here’s how you could list posts alphabetically using a page template in Twenty Fourteen:

Again, cheating! I went into the index.php file in Twenty Fourteen and copied the whole loop. I needed to create a new query object, so I created the $custom_posts variable and used it throughout the loop.

Adding Options

Post templates get really fun when you add options to them. You can do this by registering meta boxes but this would add considerable unrelated code to the article, so why not cheat yet again?

One of my favorite plugins, Advanced Custom Fields can do the heavy lifting for us.

Let’s create a special page template where users can choose how the posts on the page are ordered.

First, install Advanced Custom Fields. Next, create a page template using the code in our previous example from above. Make sure the template name is “Custom Post List” so you can use our import example below.

The next step is to create our settings using Advanced Custom Fields. You can create your own, making sure they are only shown on the new page template, or you can import this file using the WordPress importer found in Tools > Import.

I’ve created an order, and an order by setting. This will be imported into your ACF settings.

Once done, you can create a page and select the “Custom Post List” template. You should see two options grouped in a meta box pop up under the editor. Set these to whatever you would like and lets get started on making our theme use these settings.

Our new template-specific settings
Our new template-specific settings

All you need to know is the key of the order by setting is order_by, the key for the order settings is order (no surprises there). We can retrieve the value of these fields using the get_field() function provided by ACF. All we need to do is substitute the user selected values into our WP_Query object from before:

Summing Up

It should be fairly obvious that by adding options you can create a whole new experience for website admins and users. This functionality, coupled with customized CSS and Javascript can result in some astounding and powerful work.

Do take care – with great power comes great responsibility! Adding 100 options to page templates just because you can is not the way forward.

Make sure to use this knowledge wisely and build something genuinely useful for your clients and yourself.

If you have any great page templates you’ve made or seen recently we’d love to know. Share your experiences in the comments below.

Image source: Blueprints by Cameron Degelia.

http://premium.wpmudev.org/blog/creating-custom-page-templates-in-wordpress/feed/ 1
How to Customize the WordPress Post Editor http://premium.wpmudev.org/blog/how-to-customize-the-wordpress-post-editor/ http://premium.wpmudev.org/blog/how-to-customize-the-wordpress-post-editor/#comments Sun, 26 Oct 2014 12:19:54 +0000 http://premium.wpmudev.org/blog/?p=133615 Did you know you can easily modify the style of the WordPress post editor?

All it takes is a simple stylesheet to create a personalized editing experience. Editor styles are commonly added to make sure the style of the theme on the front-end is mirrored in the style of the editor in the backend. This helps users create content in a more familiar setting.

In this Weekend WordPress Project we’ll take a look at how this can be done and I’ll share some of my own tips and tricks in the process. Ready your favourite text editor and let’s dig in!

Editor style
Customize the WordPress post editor.

Adding An Editor Style

The only PHP you’ll need to know is a simple function named add_editor_style(). Open up your theme’s function file and somewhere inside add the following:

Once this has been declared you will need to create editor-style.css in your theme’s root directory. Anything added to this stylesheet will be applied to the editor.

Additionally you may supply an argument to the add_editor_style() function if you would like this style to be located somewhere else.

The path to the custom CSS file should be relative to your theme’s directory. You can also use http:// to link to external CSS files, which will come in handy if you want to add Google Fonts.

Creating Some Styles

In your CSS file you can use any CSS rule you would expect. The following will give us a heading structure and some basic rules for typography and spacing.

This is obviously a rudimentary example so you should make it your own and add your own rules.

Here’s what the post editor looks like with the updated style rules:

Image alignment
The updated post editor in the backend with a customized editor style.

You could even use similar rules as the front-end of your site to emulate your site’s look and feel in the backend. The easiest way to do this is to import the theme styles in the editor stylesheet.

Using Google Fonts

I’ve seen a lot of ways people have tried to add their Google Fonts to the editor. There’s one very simple way, which also happens to be the recommended way. Visit the Google Fonts website and select your fonts. When you click “Use,” you should see the standard code for adding the font to your site. Use the URL which points to the font to reference the font in an add_editor_style() function.

The example above adds our fonts and our custom stylesheet as well. Note that the comma in the font call must be URL encoded, we simply replace it with the %2C characters to do the trick.


This is a fun weekend project, which you can use to make a more comfortable admin experience for you and other users of the admin.

If you have specific layout rules you want to follow in the front-end, it can be particularly helpful to enforce them in the backend using styles.

If you have some fun styles you’ve created or you used the editor styles for something unique, let us know in the comment below.

http://premium.wpmudev.org/blog/how-to-customize-the-wordpress-post-editor/feed/ 2
Customizing the WordPress Comment Form http://premium.wpmudev.org/blog/customizing-wordpress-comment-form/ http://premium.wpmudev.org/blog/customizing-wordpress-comment-form/#comments Sat, 25 Oct 2014 12:00:24 +0000 http://premium.wpmudev.org/blog/?p=133401 The comment form is a great tool – it allows your readers to interact with your authors and vice versa. Engagement is extremely important for any website, such a direct line of communication should be fostered with care.

In this article we’ll take a look at some of the options we have for bending the comment form to our will.

Customize WordPress Comments Form
Customizing the comment form is easy!

The Comment Form Function

WordPress has a single function for outputting the contact form: comment_form(). It accepts a (rather lengthy) array as its first argument, which allows you to specify everything from the labels to the notice below the comment box.

It is most commonly called from the comments.php template file. In Twenty Fourteen and other default WordPress themes this is the favoured approach and I suggest you do the same.

comments.php itself is usually called from the single post template, single.php. It is called via the comments_template() function, take a look at the default themes to follow along.

Customizing The Form

There are three basic things we can do to customize our comment form. We can add our own styling, we can modify the arguments passed to the generating function to alter its behaviour or we can use plugins. We’ll mostly be focusing on the first two here.

Styling The Form

There are two approaches you can take. If you’re building a theme from scratch you can just add the necessary CSS to your existing stylesheet. If you would like to modify an existing theme you really should create a child theme.

How you style your comment form is of course up to you. However, since forms are generated using the same function their HTML output is roughly the same. Using the arguments we will discuss shortly you may add and remove elements but other then that, the classes and IDs are usually the same. Here’s how the HTML for the default comment form in Twenty Fourteen looks:

Customizing The Form Function

The comment_form() function takes two parameters. The first is an array where you can customize it, the second is an optional post ID. This can be used to output a comment form for an arbitrary post:

Let’s dig deeper and take a look at all the parameters we can use to modify the behaviour of our form:

Element IDs

Two parameters allow us to overwrite the default ID for the form and the submit button. id_form controls the ID for the form itself while id_submit determines the ID for the “submit” button.

Labels & Titles

Four functions allow us to control some of the labels and titles in the form. title_reply controls the title at the top of the form when writing a top-level comment. title_reply_to controls the title of the comment comment form when writing a reply to another comment.

You can control the text of the cancel reply link using cancel_reply_link and you can modify the text in the submit button using the label_submit parameter.

Notes & Text

There are four larger blocks of text available in the contact form. comment_notes_before and comment_notes_after controls the text seen before and after the comment form. Many people prefer to hide the notice about the usable HTML elements, and just set comment_notes_after to an empty string.

The text in the login notification can be controlled using the must_log_in and logged_in_as parameters. The former is used when a user comments without logging in, the later is displayed for logged in users.

Field Customization

Fields can be customized by specifying their full HTML. Oddly enough the author, email and url fields can be customized by using the fields parameter while comment field has it’s own parameter: comment_field. Take a look at the example below which shows the default code for each field.

Using Plugins

There are a number of plugins which modify comments. Some add functionality like AJAX to prevent page reloading, some add styling and some replace the default comment form with a third-party solution like Disqus or Facebook comments.

Take a look at the comments related plugins available in the repository, at the time of writing there are 1,533.


Hopefully you have a better picture of the possibilities the comment_form() function offers. While this is not a perfect implementation from WordPress by any measure, it is flexible enough to allow for many modifications.

If you have any great tips on handling comment forms or perhaps you’ve written your own comment form, let us know in the comments below.

Image credit: Sergey Zolkin, icons made by Yannick from www.flaticon.com is licensed by CC BY 3.0

http://premium.wpmudev.org/blog/customizing-wordpress-comment-form/feed/ 1
How to Create WordPress Custom Post Types http://premium.wpmudev.org/blog/create-wordpress-custom-post-types/ http://premium.wpmudev.org/blog/create-wordpress-custom-post-types/#comments Wed, 22 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=133085 The custom post type feature is what transforms WordPress from a blogging platform to a fully-fledged content management system.

Post types cannot be created and managed from the admin but can be exposed very easily using a little code.

In this article, I’ll show you how to create a custom post type for recipes and take you from the very basics to some more complex cases. Let’s begin.

Custom post types
Create your own custom post type.

What Is A Post?

Before getting into custom post types I think we should clarify some terminology since the naming convention results in a bit of confusion.

It is best to think of a post as a unit of content stored in the database. Each post has a post_type property, which defines what type of content it is. Here’s where things get tricky. One of the most commonly used built-in post types is named “post.”

This means that “post” can refer to any post entered into WordPress (whether this is a blog post, a page or a custom type), but it can also refer to a regular ol’ blog post.

For the purposes of this article I will be using “post” in its general meaning of an entry in the database. When talking about posts with a post type of post I will use the “blog post” convention.

Custom Post Types

In essence, a custom post type is nothing more than a change in the post_type attribute of a post. If you publish a blog post on your website and go into the database to rewrite the post type from “post” to “page” the post will now show up in the pages section in the admin.

WordPress defines a bunch of properties for each post type. Is the particular post type searchable? Is it visible in the admin? Can categories and tags be assigned to it, does it allow comments? A number of these features can be set for each custom post type.

So what is a good example of a custom post type? Let’s assume you love food and cooking. Chances are you have a website where you write about your personal things, but now and then you publish a recipe. A recipe is a very different type of content than a personal blog entry. In this case it may be appropriate to create a “recipe” post type.

Recipes post type
A newly created recipes post type.

When To Use Custom Post Types

It may be difficult to figure out when a custom post type is needed. Sometimes you can get by with categories. In our previous example we could have created a “Recipes” category.

So where’s the line? When should we use categories and when are custom post types more appropriate?

There really isn’t a set-in-stone rule here. It comes down to practicality, personal preference and how your theme is built. There are some good guidelines though; if it seems like some of these apply to you, a custom post type might be in order:

  • If you publish at least two very different types of content. For example, personal blog entries and recipes.
  • If it would be better to visually and structurally distinguish a specific type of content. For example: personal blog and your illustration portfolio.
  • If a type of content doesn’t fit in a chronological order. For example, a company blog and company style guides.
  • If a content type could easily be separated out into a different website and still remain coherent. For example, a personal blog and sold products.
  • If using categories and tags would lead to over-complicated taxonomies. For example, a personal blog and movie reviews.

Built-In Post Types

Now that we understand a bit about custom post types, let’s take a look at the post types WordPress uses by default. Many people know about posts (post) and pages (page) but did you know that uploaded images are also posts? They use the attachment post type.

Surprisingly enough there are two more: revisions (revision) and navigation menus (nav_menu_item). Revisions are just like posts but they contain the data about past versions of posts. Navigation menu items hold information about each separate item in the navigation system.

Creating A Custom Post Type

Enough talk! Let’s actually create a custom post type. All the code in this article is best placed in a plugin. If you’d like to just give it a quick go you can place it in your theme’s functions file, but I advise moving it to a plugin for production use.

To create – and highly customize – a post type you would only need a single function: register_post_type(). The documentation for it is pretty hefty but allows for some great modifications. To register a very simple custom post type you’ll only need a couple of lines:

Let’s analyze the basics. Notice that register_post_type() is used in a function that is hooked to the init action. It takes two arguments: the custom post type and an arguments array. The custom post type should be 20 characters at most and must not contain any spaces or capital letters. I also recommend writing singular forms (post, page, recipe, book, etc.). We’ll be looking at the arguments in a detail soon.

Customizing Post Types

There are three main things you can do to customize your post types:

  • Modify the arguments of the register_post_type() function
  • Add custom interaction messages (post deleted, updated, etc.)
  • Adding help sections to various screens in the custom post type admin

Let’s take a look at the most common arguments you can change when you register the post type and then turn our attention to the interaction messages and help text.

Description and Labels

If you use the simple method of registering a post type you’ll notice that buttons still say things like “New Post” and “Delete Post”. These can be customized using the labels property of the argument array.

Note that in the previous example we used the label property, this example uses labels. Make sure to use translation functions if your work will be for public consumption.

Post Type Visibility

There are a number of parameters which allow you to fine-tune the visibility of your custom post type in the front and backend. The most prominent one is the public parameter, which sets the values of other properties in one go.

If it is set to true, the post type will be included in searches, the UI will be shown, it will show up in the admin bar and so on. This is similar to how built in pages and posts work.

If it is set to false, the post type is excluded from searches, it will not show up in the UI, it will be hidden in the menus and so on. This is like the built-in revision post type.

For more granular control you can specify properties separately. The value of all the parameters below is the same as the value of the public parameter, except for exclude_from_search. The value of this property is the opposite.

  • public
  • exclude_from_search
  • publicly_queryable
  • show_ui
  • show_in_nav_menus
  • show_in_admin_bar

This example creates a post type which holds our notes on customers. We probably don’t want this to be visible in any way on the front end so I’ve made sure the public property is false. We do want to be able to manage them in the backend so I’ve set the show_ui and show_in_admin_bar properties to “true.”

Menu Customization

You can use three functions to modify the behaviour of the menu entry for your custom post type. show_in_menu sets where the menu is shown. If set to false the menu entry is not shown. If set to true it will be shown as a top level menu. You can set it to an existing top level page like upload.php to add it as a sub-menu.

The menu_position property sets where the menu shows up in the top-level list. Take a look at the Codex for the numbers to use for specific placements.

Finally, the menu_icon parameter allows you to set an icon. You can add a URL to an icon, or you can use the name of an icon from Dashicons which now ships with WordPress.

The code above will add our post type as a top level menu entry into position 20 (which is just below pages) and It will use the carrot icon from the Dashicons set.

Configuring Post Type Features

You can choose a number of features to use or discard for your custom post type. The hierarchical property will create a flat structure (like posts) when set to false. If set to “true,” you will be able to create parent-child relationships like you can with pages.

The taxonomies property allows you to assign custom taxonomies to the post type. This is an array of taxonomy slugs. The following example creates a hierarchical post type with support for tags.

If you plan on using custom taxonomies you will still need to create the taxonomy with the register_taxonomy() function.

The supports property holds an array of features which the post type supports. These have an effect on the admin user interface and on some parts of the front end as well. Here’s a list of available options:

  • title
  • editor
  • author
  • thumbnail
  • excerpt
  • trackbacks
  • custom-fields
  • comments
  • revisions
  • page-attributes
  • post-formats

Archives And Rewrites

has_archive is a great property which allows you to create a listing of your post type on the front end automatically. By setting the value to true you’ll find a list of your custom posts at http://yourdomain.com/post_type/. In your theme you can customize this listing using the archive-posttype.php file.

A full guide to rewrites is a bit out of the scope of this article, but it’s handy to know about them. The rewrite property defines how post type URLs should be handled. A good use-case is if you are creating a post type for a common task, say products. To make sure your plugin doesn’t conflict you could use “my_product” as the post type and rewrite it to “product” in the URL. Here’s how:

Post Type Interaction Messages

Whenever you perform an action on a post (saving, deleting, searching, etc.) you receive messages which give you feedback about your action. These messages can be tailored to the post type using the post_updated_messages filter, here’s how:

First of all, note that the $messages variable passed to the function contains all messages. The sub-arrays contain the messages for specific post types. All we need to do is define an array for the custom post type with the appropriate messages. Don’t forget to use translation functions on those messages. I’ve left them out here for brevity’s sake.

Contextual Help

Ever noticed the help tab in your posts or pages section? If you click there you’ll see that you can add a great little help section split into tabs. Adding contextual help is extremely important as it allows users to get help on the spot. This is better for them and better for you as well – the fewer support requests you get, the better.

We’ll need to use the $screen object in the function we hook to admin_head. The template for adding help sections is quite straightforward. Here we go:

The first thing we do is check the current screen. If we are not on the main post type screen we return early. If we are on the correct screen we can create our help tabs. Each help tab consists of a unique ID, a unique name and the content of the tab. These can then be registered individually with the add_help_tab() method.

Putting It All Together

The code to register a recipe post type, along with interaction messages and help sections would look something like the example below. Don’t forget the settings you use are ultimately up to what your project requires.


By now you should know what a post type is, how to create one customized to your needs and how to add messages and a help section to it.

It takes some practice to know when to use post types, when to use taxonomies and – more importantly – when not to use them. The only way to learn is by doing, so go and experiment.

If you have any great tips and tricks about custom post type or some great ways you’ve used them, please share in the comments below.

Image credit: Icon made by Freepik from www.flaticon.com is licensed under CC BY 3.0.

http://premium.wpmudev.org/blog/create-wordpress-custom-post-types/feed/ 7
Why You Shouldn’t Use functions.php (And What You Should Do Instead) http://premium.wpmudev.org/blog/why-you-shouldnt-use-functions-php/ http://premium.wpmudev.org/blog/why-you-shouldnt-use-functions-php/#comments Tue, 21 Oct 2014 14:30:00 +0000 http://premium.wpmudev.org/blog/?p=133167 I believe people who use WordPress can be separated into three broad camps:

  1. Plug and players: WordPress enthusiasts who are probably not experienced website designers and are looking for a turnkey solution. They will find a theme, install it, and probably get on with content creation.
  2. Tweakers: These folks will take a theme that could probably be used straight out of the box and apply their own tweaks. They will probably use the custom.css and custom_functions.php files (or similar) to customize their theme. They will take an off the shelf option and mess around with it until they have something that (a) suits their needs, and (b) looks unique.
  3. Frameworkers: These are usually developers who will start off with a theme framework that offers very little beyond – you guessed it – a framework, upon which content can sit. Hours or days later, they will have crafted crafted something truly unique and customized to their – or their client’s ≠ specific needs.

If I had to guess, I would say the biggest camp out of the three is the tweakers.

And let’s face it: WordPress is a tweaker’s paradise. Armed with nothing more than Google search and your functions.php file, wordPress makes it easy to add diverse functionality to your website with relative ease.

The only problem is many tweakers are playing with fire. Using functions.php to add functionality to your site can be an accident waiting to happen (for multiple reasons). In this article I will explain why, and offer you a far better alternative.

Add functionality to your WordPress site, but not with your functions.php file.

How WordPress Works

At the core of WordPress lies a simple principle: design and functionality should (whenever possible) be clearly separated.

That is why we have themes and plugins; ostensibly, themes are solely responsible for design and plugins are solely responsible for functionality. One should be able to switch themes without affecting functionality, and one should be able to deactivate plugins without affecting design.

This isn’t always possible (some of the reasons for which I’ll get onto shortly), but the separation of design and functionality is an ideal that any WordPress developer worth his or her salt should aim for.

So Where Does functions.php Fit Into This?

functions.php is a theme-specific file, by which I mean it exists in a WordPress theme’s directory and pertains only to that theme.

As you might guess from the name, functions.php contains functions that are relevant to the theme, examples of which are:

  • Use of featured images
  • Length of excerpts
  • Widgetized areas

These types of functions are exceptions that prove WordPress’ design/functionality separation rule. While they are elements of functionality, they are relevant only to their parent theme, and may not be appropriate when applied to another theme. As such, they belong in functions.php and should remain there.

For example, an excerpt length of 200 words might look fantastic on one theme but terrible on another. Although we are technically playing around with the “functionality” of a site by adjusting the excerpt length, including the necessary code in functions.php is the right thing to do.

I don’t intend to get into the complexities of effectively utilizing functions.php in this article, but it is worth mentioning at this time that if you’re going to include a lot of theme-specific functionality in your site, you should consider creating an inc directory within your theme (or using a pre-existing directory if it already exists) to effect some organization amongst your theme’s functions. Here’s a great read from WordPress developer Tom McFarlin on the subject if you want to go further down that path.

My ultimate point is this: functions.php is not the enemy. It is a valuable cog in a theme’s engine; necessary for all but the most basic of designs.

However, the misuse of functions.php is rife and should be stopped.

When You Shouldn’t Use functions.php

The simple answer to when you should use functions.php is “almost never.”

The slightly more complicated answer is “use your noggin.”

If you understand what functions.php is for (functionality strictly related to a particular theme), you should be able to figure out what it isn’t for.

Easy examples can be found within your WordPress website’s plugins directory. Plugins are (ideally speaking) logically arranged “packets” of code separated by their intended functionality.

One of the best (and higher profile) examples of the whole point of separating functionality from design in WordPress is Google Analytics tracking code, which looks like this:

Google Analytics tracking code
This code needs to be added into the head section of your site in order for visits to be tracked.

You have three main options when it comes to adding this code:

  1. Add it manually to your theme’s header.php file
  2. Add it manually to your functions.php (using a hook)
  3. Use a plugin

If you use options one or two, your tracking code will disappear if you change themes and visitors will no longer be counted by Google. (It may also disappear the next time your theme is updated.) But if you use option three (my recommendation is Google Analytics by Yoast), you’re golden. Unless you have a senior moment and deactivate the plugin you’re using, that tracking code is going nowhere.

My simple advise is this: If in doubt, use a plugin. They’re popular for a reason.

Why You Shouldn’t Use functions.php

In explaining the “when” above, I have also gone a fair way in explaining the “why:” Don’t use functions.php because changing your theme will change the functionality of your site, which is all kinds of wrong.

However, there are a couple of other major points I should make to further strengthen the reasons for avoiding functions.php as much as possible.

First of all, there is the dreaded “white screen of death.” Quite frankly, if you’ve never encountered this while messing around with WordPress, you haven’t lived. Or at least you were far more careful than me when you first started tinkering with WordPress.

I feel at this stage we need a screenshot to clarify what this white screen of death actually looks like:

White screen of death

Scary. But what does it mean?

Well, to put it in the Queen’s English, one encounters the white screen of death when one cocks up one’s PHP.

In other words, you’ve screwed up.

To put it another way, syntax errors in PHP code inserted into functions.php can “break” your site, leading to you seeing nothing more than a white screen. (Don’t ask me where the “death” comes into it. As far as I’m aware, nobody gets hurt.)

Upon encountering the white screen of death, it’s better if you were editing your site via FTP or an online IDE (like ShiftEdit) rather than the WordPress backend, otherwise you’ll have some trouble getting back into your site. Plus, you’ll get a slap on the wrist from me for using the WordPress backend. Naughty.

But I digress. The point I’m getting to is this: placing your PHP code into a plugin can prevent the white screen of death from ever happening. Instead, WordPress may be able to deactivate the offending plugin without negatively affecting the continuing operation of the site as a whole.

Secondly, using functions.php is just plain messy if you plan on inserting more than a handful of code; especially if the theme you’re using already has existing functions.

Thirdly, and as I have already mentioned above, code in functions.php is theme-specific (i.e. will not travel when you change themes) and can be overwritten by theme updates.

None of this is good, and should convince you that functions.php is not the place you want to place your code in the majority of cases. Sure; leave whatever’s there by default as it is (on the assumption that the theme developer has included theme-specific functionality only), but any new code you’re adding is likely fair game.

So what do you do instead?

The Beautiful Alternative: Create Your Own Plugin

If you’re a garden variety WordPress tweaker and have never created your own plugin before, you’d be forgiven for thinking that it involves some kind of complicated and arcane process. Perhaps some kind of incantation is required.

Fortunately, that’s not the case. If you know how to edit a functions.php file properly (via FTP or an online IDE), you already have the necessary skills to create a plugin for your all of the code you would otherwise be putting into functions.php.

So let’s do it.

Firstly, navigate to your WordPress website’s root folder via FTP (or your hosting panel’s file manager, or via an online IDE). From there, you should navigate to wp-content/plugins:

WordPress Directory

The folders you see within the plugins directory are (as you may imagine) the plugins currently installed on your site. To create your own plugin, just create a new folder. I’m going to name it tme-custom-functions:

Plugins list

(“TME” are my initials, and I’m prepending them to the plugin name so that I don’t accidentally use an existing plugin’s name.)

Next, create a PHP file with the same name within your plugin’s folder:

Custom Functions plugin

Finally, insert the following code into your brand new PHP file:


* Plugin Name: Custom Functions Plugin
* Description: This plugin contains all of my awesome custom functions.
* Author: Tom Ewer
* Version: 0.1

/* Your code goes below here. */

/* Your code goes above here. */


That’s all there is to it! Make sure your file is saved and the plugin will now appear within your WordPress plugins list:

Plugins List

Of course, your plugin doesn’t do anything yet, but you are now free to insert any custom functions that previously resided in your functions.php file, and they will continue to work as normal.

Going a Step Further: Creating a “Must Use” Plugin

The average plugin is all well and good, but what if you want your chosen functions to work on your site under all circumstances? What if you don’t want your new custom plugin cluttering up your plugins list?

It sounds like you need to make it a “must use” plugin, which are plugins that are always active on your site (and cannot be deactivated). They won’t even appear on the plugins list in WordPress unless you click on the Must-Use link within the plugins list.

To make your plugin “must use,” simply create a folder named mu-plugins within your WordPress site’s wp-content directory, then move your plugin’s PHP file (not the whole folder) into it.

Hey presto! The plugin disappears from your list and reappears within a new Must-Use section:

Must Use

Wrapping Up

You now know when you should use functions.php and when you should create your own plugin.

You also know that it is almost always worth creating your own plugin for a number of reasons. Now you too can feel like a brainy WordPress developer by creating something that appears on the WordPress backend! Don’t pretend that it doesn’t make you feel far better at coding than you actually are (at least, that’s how it makes me feel).

If you have any questions or concerns about anything I’ve discussed in this article, please fire away in the comments section below and I’ll get back to you!

Photo Credit: skoop.

http://premium.wpmudev.org/blog/why-you-shouldnt-use-functions-php/feed/ 22
Add Twitter Cards to Your WordPress Website and Boost Your Social Shares http://premium.wpmudev.org/blog/twitter-cards-wordpress/ http://premium.wpmudev.org/blog/twitter-cards-wordpress/#comments Mon, 20 Oct 2014 12:00:12 +0000 http://premium.wpmudev.org/blog/?p=133169 Have you noticed how some tweets include additional content, such as large images, a collection of smaller images, and even sometimes embedded video or audio files?

In most cases, this is achieved by using Twitter’s Card feature. It’s a great way to make your content really stand out from the crowd when it is shared on this popular social network. The great thing about Twitter Cards is that when they are shared, there is a greater potential for your content to catch the attention of other users and increase traffic back to your website.

In this article I’ll explore the different types of Twitter Cards available and how you can enable and start using them on your WordPress website.

Twitter player card
An example of a Twitter Player Card.

What are Twitter Cards?

Twitter Cards allow you to attach additional content to the tweets in which your posts are shared. This content can be defined on your website and then each time your posts are shared on Twitter, it will be included in the tweet.

As this Twitter Card content can include photos, video, product information, and more, it allows you to produce some eye-catching tweets that will make your content stand out in the Twitter streams of your followers.

An example Twitter Photo Card
The Twitter Photo Card.

The great thing about using Twitter Cards with WordPress is that you only have to enable them once and then each time your posts are shared on Twitter you can reap the rewards of having content that really stand out from the crowd.

For a little work up front, you can experience increased social media shares and more clicks back to your website each time your posts are shared by you or your visitors.

An example Twitter Product Card
The Twitter Product Card

There are currently seven Twitter Cards available:

  • Summary Card: Title, description, thumbnail, and author username.
  • Summary Card with Large Image: As above but with larger featured image.
  • Photo Card: Photo-only Card.
  • Gallery Card: A collection of four photos.
  • App Card: For promoting a mobile app with direct download link.
  • Player Card: Includes video or audio media player.
  • Product Card: Contains product information and direct link to that product.

As you can see, whatever type of website you run there is a good chance there is a card that can help promote your content better on Twitter.

How to Enable Twitter Cards

It would be great if Twitter would crawl each URL that is shared on its network and then use any additional information from the shared content to create the Twitter Card automatically. However, this isn’t the case and you will have to do a little work to enable them for your website.

This is a good thing though as anyone who are willing to put in some extra effort up front will be able to gain an advantage over other websites by ensuring their tweeted content stands out from the crowd.

The process for enabling Twitter Cards for your website involves two main steps:

  • Adding the necessary code to each post that you want to enable Twitter Cards for, and
  • Requesting approval from Twitter to enable cards.

Twitter has published a helpful getting started guide to using their cards. However, as usual WordPress users have it easy thanks to some free and easy to use plugins that take care of all this for you.

The Best Twitter Card Plugins for WordPress

While there is a great free plugin that is dedicated to enabling Twitter Cards in WordPress, there are also two WordPress plugins you might already be using on your website that allow you to enable Twitter Cards: WordPress SEO by Yoast and Jetpack.

WordPress SEO by Yoast

This popular and free SEO plugin also includes basic support for Twitter Cards amongst its list of features. If you are using this plugin and don’t want to install a dedicated Twitter Card plugin, then navigate to the Social sub-menu item and switch to the Twitter tab.

WordPress SEO plugin settings
WordPress SEO plugin social settings

From here you can enable Twitter Card meta data, which adds the necessary code to your website. Then enter your Twitter username, which will be included when your content is shared, and also set the default Twitter Card type to use.

Unfortunately, with the WordPress SEO plugin there are only two out of seven Twitter Card types to choose from: summary and summary with large image. However, if these are the only cards you are interested in using then this plugin could suffice.

Request Twitter Card Approval
Request Twitter Card usage approval for your site

The final step is to then enable Twitter Cards for your website. This only needs to be done once per website and can be completed from the Twitter Card validator page by entering the URL of your website and clicking on the “Request Approval” button and entering the required information.

Approval Email
Approval Email from Twitter

Shortly after submitting your approval you will receive a confirmation email notifying you that the Twitter Card you are planning to use on your website has been activated. If you want to use other Twitter Card types on your website, you will need to enable them on your site and then make another request through the Twitter Card validator page.

After the Card has been enabled for your website you should then be able to preview a post on your website and using the validator. This will enable you to see how your content will look when it is shared by you or anyone else on Twitter.

Twitter Card Preview
Use the Twitter tool to preview your Card

JM Twitter Cards Plugin

The JM Twitter Cards plugin

If you don’t mind installing another plugin on your website, or you aren’t already using a plugin that supports Twitter Cards such as WordPress SEO or Jetpack, then JM Twitter Cards is a great free choice.

The main benefit of using this plugin is that it includes support for more Twitter Card types while also allowing you to choose a specific Card type for each individual post. Other features of the plugin include:

  • Specify an image to be displayed in the Tweet.
  • Preview your card on the post editor page.
  • Support for multi-authored content.
  • Add author’s Twitter username and site’s Twitter username to tweets.
  • Set a fallback image to be used by your posts that don’t contain an image.
  • Define the image sizes to be used in the cards.
  • Add app information for the Twitter App Card.
  • Detailed user documentation.
  • Enable Twitter analytics to track tweets.

There is also a very helpful video tutorial that accompanies the plugin to help you get started with Twitter Cards as quickly as possible.

JM Twitter Cards is compatible with the WordPress SEO plugin so you can use them together without any conflicts, despite some overlap between the two tools.

Once this plugin is installed on your website the site-wide settings can be configured under the plugin dashboard found under the “JM Twitter Cards” menu item on your admin sidebar.

JM Twitter Cards Settings
JM Twitter Cards plugin settings

If you chose to display the meta box through the site-wide settings you can then define how each individual post will look when it is shared on Twitter. This is recommended as it gives you a lot more control over how your Twitter Cards will look.

JM Twitter Cards Post Meta

By using the Twitter Cards meta box you can choose a card type for the post you are working on and also set another source for the card image by entering a URL or uploading a file.

JM Twitter Cards Post Meta

By displaying the plugin meta box on the post editor you also get a basic preview of how your content will look when it is shared on Twitter.

JM Twitter Cards Preview
A preview of the Twitter Card from the post editor.

As you can see, the JM Twitter Card plugin allows you to include two Twitter usernames in the card: one which belongs to the post author and one for the website.

Once you’ve configured the plugin you must also request for cards to be activated for your website. This can be done through the Card validator page and once you’ve received the approval email from Twitter, you can start using this plugin to add additional whenever your content gets Tweeted.


As you can see, it doesn’t take much effort to enable Twitter Cards on your WordPress website to help make your content really stand out when it is tweeted. You can either take a set-it-and-forget-it approach or customise each individual post for maximum effect; adding a custom image and description as well as choosing the best card type for each piece of content.

Whichever plugin you use, remember you will need to get an approval from Twitter to enable cards for your website and then also enable each additional individual card type you would like to make use of. It’s also a very good idea to add social sharing buttons to your posts using a suitable plugin so that your readers can easily tweet your content to their followers.

While the functionality of the WordPress SEO and Jetpack plugins do allow you to use Twitter Cards on your website, if you want more control over how your content looks when it is shared then using a dedicated plugin such as JM Twitter Cards is highly recommended.

If you want to break through the constraints of Twitter’s 140 character limit and draw more attention to your content then Twitter Cards are the way to go.

Do you use Twitter Cards? Do you think they’re worth using on your WordPress site? Let us know in the comments below.

http://premium.wpmudev.org/blog/twitter-cards-wordpress/feed/ 6
How to Hide the WordPress Update Notification To All But Admins http://premium.wpmudev.org/blog/hide-the-wordpress-update-notification/ http://premium.wpmudev.org/blog/hide-the-wordpress-update-notification/#comments Sun, 19 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=133381 One of the great things about WordPress as an open source project is that the core code is regularly updated with improvements and security patches.

Major releases, along with minor security releases, of WordPress are usually shipped two or three times a year. If you have automatic updates turned on, your WordPress install will be updated each time there’s a minor release. However, you will need to manually update your software for major releases.

Whenever there’s a major release available, a notification will display at the top of your admin area, letting you know your version is out-of-date and you need to update the core code.

For many people, this nag can be annoying. And if you developer websites for clients, you may want to hide it. After all, who wants to let their clients know their software is old?

In today’s Weekend WordPress Project, I’ll show you how to easily hide the update notifications.

Update notification
Find out how to hide the update notification.

It’s Important to Update WordPress

Whenever there’s a new release, it’s highly recommended that you update your version of WordPress as soon as possible, so you are always running the latest security updates.

The only problem is, if you’re updating a live site you don’t know what effect the updated core code may have on your site. With each release of WordPress, the core team work on improving the code, which means old functions can be removed.

If you have themes or plugins that use deprecated functions, upgrading WordPress can break your site. This is why it’s a good idea to have a development site that mirrors your live site where you can test new WordPress releases.

The WordPress update notification is shown to all users who log into the backend, but the message is different depending on your role. Only admins are able to update the core code. Other users will get a message which says a new version of WordPress is available and to contact the site admin.

Notify admin
The backend of WordPress for subscribers.

Hiding the Update Notification

Developer Paul Underwood has a handy snippet for hiding the notification. Simply add the following code to your functions.php, or use it to create a new plugin:

function hide_update_notice_to_all_but_admin_users()
    if (!current_user_can('update_core')) {
        remove_action( 'admin_notices', 'update_nag', 3 );
add_action( 'admin_head', 'hide_update_notice_to_all_but_admin_users', 1 );

Next time subscribers log in, WordPress will no longer display the update nag:

No nag
The update notification has magically disappeared!

The notification will continue to display for admins, so you’ll always know when there’s a new version of WordPress available to download.

Admin update
Admins will still new when newer versions of WordPress are available.


http://premium.wpmudev.org/blog/hide-the-wordpress-update-notification/feed/ 7
The Dreaded WordPress Connection and Data Not Received Errors: How to Fix Them http://premium.wpmudev.org/blog/wordpress-connection-data-not-received-errors/ http://premium.wpmudev.org/blog/wordpress-connection-data-not-received-errors/#comments Sat, 18 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=132894 If you’re one of many people who have experienced intermittent outages of your WordPress site, this article is for you.

It might seem hopeless right now, but if you’ve experienced any one of these errors, there is a solution:

  • “Data not received” in the Google Chrome browser
  • “Connection error” in the FireFox and Internet Explorer browsers

You’ve checked your internet connection and everything works; you’re able to access other major website such as Google, and Twitter; you’ve double checked with your hosting company, and you haven’t exceeded your storage, memory, or bandwidth, but you’re still noticing these errors.

If this sounds all too familiar, here are the steps to determine what the issue is, followed by the necessary troubleshooting, and how to fix it.

Connection error
Stop connection errors and data not received messages in their tracks.

When Your Site is Down, it Says a Lot About You

Okay, you caught me! Your site’s outages won’t say anything about you, but they sure say a ton about the probable cause.

Here are a few things to consider before going ahead and troubleshooting the issue.

What Kind of Hosting are You Using?

If your site is housed using shared or VPS (Virtual Private Server) hosting, and you experience short bursts of intermittent outages, then the likely cause could be that the server you are on is overloaded. This can especially be an issue if your website is awesome and has more than a few plugins and pages. It might be time to consider upgrading or switching hosting companies.

In either case, it’s a good idea to call your iInternet service provider and ask them to white list your hosting IP address. While you’re on a roll, call your hosting company and ask them to do the same for your external IP address, given to you by your ISP. This isn’t likely the issue and, in my experience, you may be faced with both companies letting you know that they do not block any IP address; however, it will help you eliminate this as the possible cause of the error messages.

If you’re using dedicated hosting, then your issue is likely not with your server, given that you have not exceeded your allotted limits. It’s time to go ahead and start troubleshooting.

Let’s Start Troubleshooting

For Windows

Fire up the command prompt:

  1. Press the Windows key and “R” at the same time.
  2. Type “cmd” into the box, and click “OK”.

Here’s the list of steps you want to take after the command prompt has opened:

  1. Type “ipconfig /all” (without the quotation marks) and press enter.
  2. When that’s complete and the command line comes back up, type in “ping google.com”, then press enter.
  3. When completed, follow it up with your domain that has the issues by typing “ping example.com” (type in your domain in place of the example, of course), then press enter.
  4. Right click inside the window and click “Select all.”
  5. Press “Ctrl” and “C” to copy the information.
  6. Paste this in a word processor.
The Windows command prompt after the ipconfig /all prompt
This is what the Windows command prompt window will look like after running the “ipconfig /all” command. Keep in mind, yours will not look exactly the same, but very similar.

For Mac OS X

Fire up a new Terminal window. Here’s the list of steps you want to take after the command prompt has opened:

  1. Type “ifconfig -a” (without the quotation marks) and press return.
  2. When that’s complete and the command line comes back up, type in “ping google.com”, then press return.
  3. After about 15 seconds, stop the ping by pressing Ctrl and “C.”
  4. When completed, follow it up with your domain that has the issues by typing “ping example.com” (type in your domain in place of the example, of course), then press return.
  5. After about 15 seconds, stop the ping by pressing Ctrl and “C.”
  6. Select all the information by pressing , shift, and the up arrow.
  7. Copy everything by pressing  and “C.”
  8. Paste this into a word processor.
The ifconfig -a in terminal, on a mac OS
This is an example of what the “ifconfig -a” command generally renders in terminal on a mac OS. All that’s left is to ping google.com and your website.

You’re Almost Done! The Final Steps

Close the command prompt or terminal and head over to OpenDNS to change your settings to match the nameservers they provide. They ensure zero downtime, so if your website works perfectly using these new settings, then it’s much easier to isolate the problem.

Once at their setup page, you can follow their instructions to setup the new nameservers on your computer. Then follow the same troubleshooting steps we just went through. Send all this information first to your hosting company, and let them know you’re experiencing intermittent outages, and you’ve included some troubleshooting information for them to review. It’s likely that this isn’t a tier-one support issue, and you may need to relay this information to a senior technician.

If you have migrated your site lately, confirm the last date your site was moved with your hosting company. If it has been at least two days, then you can go ahead and send this information to them. Make sure to keep a note of this date for your records.

If they are unable to resolve this issue for you, then send this information to your ISP, and explain what you are experiencing. You may be experiencing a third party DNS issue if other people also have troubles accessing your site. In this case, the issue does not have to do with your ISP, but you can ask them to be your advocate to help resolve this issue for you. You probably won’t have to contact your ISP anyway, as your hosting company will be able to solve this problem for you in most cases.

You’ve probably noticed at this point that there’s not a whole lot you can do other then troubleshooting, and that’s because in most cases, the issue isn’t your computer or your internet connection, but rather a DNS propagation issue that needs to be looked at and resolved by your hosting company, or your ISP.

With these steps, you’ll be three quarters of the way to planning your next, much-needed vacation!

Image credit: jjflash53.

http://premium.wpmudev.org/blog/wordpress-connection-data-not-received-errors/feed/ 0
White Labeling Your WordPress Site: The Complete Guide http://premium.wpmudev.org/blog/white-labeling-wordpress/ http://premium.wpmudev.org/blog/white-labeling-wordpress/#comments Fri, 17 Oct 2014 12:00:00 +0000 http://premium.wpmudev.org/blog/?p=133034 When you build a website, one of your top priorities should always be to put your personal stamp on the project. You can do this through your visual style choices, your custom graphics, or even custom footers that say—in essence—I made this.

And while many developers focus on adding branding to the frontend of a site, the backend is often left untouched without a hint of customization. That can be fine if you’re the only one working on the site but if you have a team or allow client access, the generic out-of-the-box WordPress dashboard might not serve you all that well.

Basically, your site’s backend could be doing more for you. It could be working harder for you. And that’s why white labeling—the process of adding personalized, branded touches—is such a good idea. So today I’m going to present some solutions for white labeling your site, from plugins and themes that guide your customizations to manual code snippets you can drop into your site right this second.

White label WordPress
White label your WordPress site.

What’s the Point of White Labeling?

White labeling is all about ensuring your site is fully branded. From the frontend to the backend, your site should reflect your business and the image you want to put out there in the world. Then again, your thoughts may fall more in line with the following:

“But you’re talking about customizing the part of my site the public never sees! What’s the point?!”

Sound like you? If it does, that’s okay. I completely understand the impulse to focus on the part of your site your potential clients and customers will see. Believe me. I get it. But sometimes doing a little extra work to make the internal operations surrounding your site more streamlined, more effective, and more personalized can have a dramatic impact on that aforementioned outward appearance.

Here are a few things white labeling will definitely do for you:

1. Reduce Confusion for Clients

Sometimes, you’ll come across a client who has never heard of WordPress before and honestly doesn’t care that you’re using it. So seeing notes all over the place in the dashboard about WordPress-this and WordPress-that can be a bit confusing.

It would make a lot more sense to these folks if the footer of your dashboard noted that the site was designed by you wouldn’t it? Because I mean, you don’t want to receive an email at 2 a.m. from a client asking, “Who’s this WordPress outfit? I didn’t sign up for that!”

2. Increase Professionalism

At its heart, white labeling is about branding. As I said earlier, it’s about making your mark. A solid brand reputation stands to be perceived as more professional and more put-together than one that’s a bit all over the place.

You go to great lengths to customize other aspects of your sites, right? You wouldn’t even think of launching a site without a company logo. So why not have the same mentality for the backend? Team members and clients tasked with logging into your site for the first time are sure to be impressed when they see your logo and welcome message rather than the same generic WordPress ones they’d see on any other site.

3. Offer Additional Support

I think one of the coolest things you can do with white labeling is include links to additional documentation and support in the dashboard. This is so incredibly helpful to your clients and your team members who maybe aren’t as familiar with this whole WordPress thing as you are.

You can even link to support videos if you want to provide even further guidance.

4. Customize the Dashboard to Suit Specific Needs

The WordPress dashboard comes equipped with some things standard. But depending on your team or your clients, not every widget that appears there is going to be relevant. And again, for newbies, you only stand to confuse them if you present too much information at once.

White labeling affords you the opportunity to remove and/or add widgets to suit your needs at the time. For instance, if your team members are mostly contributors to your blog, they might only need to see the “At a Glance,” “Quick Draft,” and “Activity” widgets. Everything else would just be extra and possibly viewed as in the way.

Adding White Label Elements Manually

If you only want to add a couple of white label aspects to your site, it’s pretty easy to accomplish manually. Just a few code snippets can get you a custom login page or a custom greeting.

Here are a few ways you can white label WordPress. As always, make sure you backup your site before making any changes to the functions.php file:

Add Your Logo to the Login Page

WordPress Admin Login
This is a pretty familiar sight, isn’t it? And while it’s perfectly serviceable as a login page, it doesn’t do anything to remind the user that they’re visiting your site. Adding a custom logo here rather than the WordPress default one says, “You are on my site now!”

To change the logo you need to first create a custom image. You want something that’s going to fit nicely above the username and password fields. Between 300px and 315px wide, and 75px and 130px, tall ought to do it.

Save this image as a PNG file and upload it to your theme’s images folder.

Your next step is to insert a code snippet in your theme’s functions.php file. This one was written by Rick R. Duncan:


//* Do NOT include the opening php tag

//* Replace WordPress login logo with your own

add_action('login_head', 'b3m_custom_login_logo');

function b3m_custom_login_logo() {

    echo ''; }

Just make sure to swap out login.png with the name of your custom logo and adjust the height and width variables to match your image and you’ll be all set.

Duncan also suggests making this new logo link to your site’s homepage. I mean, why would you want to direct your clients to WordPress.org anyway? They’re doing business on your site! To make this change, you can add this bit of code to functions.php:


//* Do NOT include the opening php tag


//* Change the URL of the WordPress login logo

function b3m_url_login_logo(){

    return get_bloginfo( 'wpurl' );


add_filter('login_headerurl', 'b3m_url_login_logo');

That way when someone clicks on your logo, they will be taken to your homepage and not directed to WordPress.org, which could be very confusing for your client.

Change the WordPress Welcome Message

WordPress Howdy Welcome Message
“Howdy” can be changed to read whatever you’d like.

If the default “Howdy” just isn’t doing it for you, it’s possible to change the default message to something more your style or more in keeping with your brand. Just add this code snippet to your theme’s functions.php file and swap out the “Howdy” for your custom greeting:

add_filter('gettext', 'change_howdy', 10, 3);

function change_howdy($translated, $text, $domain) {

    if (!is_admin() || 'default' != $domain)
        return $translated;

    if (false !== strpos($translated, 'Howdy'))
        return str_replace('Howdy', 'Welcome', $translated);

    return $translated;

Change the Footer Text in the Dashboard

Here’s another prime spot to put your branding information. Instead of just letting the default “Thank you for creating with WordPress” ride in your dashboard’s footer, you can use a simple code modification to change this text to read whatever you want:

function change_footer_admin () {  

  echo 'Custom text goes here. Theme developed by &lt;a href=&quot;&lt;a href=&quot;&gt;http://www.linktowebsite.com&lt;/a&gt;&quot;&gt;Link to Website';  


add_filter('admin_footer_text', 'change_footer_admin');

Change the Dashboard Header Logo

Having a custom logo, footer, and welcome message are great, but if the logo in the admin header is still stuck on the default WordPress one, you’re going to create an inconsistent brand image.

According to Art of Blog, a good way to fix this is to use the following code snippet in functions.php:

function admin_css() {
echo '';


Then all you need to do is add a small bit of code to your admin.css file:

#header-logo {background-image: url(images/client_logo.jpg);}

Just make sure the image referenced here matches the file name of your custom logo and you’ll be all set.

Add a Custom Contact Widget to the Dashboard

When you first login to a WordPress site, you’re going to see something like this:

WordPress Dashboard Widgets
Most WordPress dashboards look something like this.

And while this view is likely fine for your internal team members, it might not always be ideal for clients who need more guidance or direction. Wouldn’t it be nice if you could direct clients back to your site in case they need help or would like to hire you for additional work? Well you can do just that by adding a contact widget. Rick R. Duncan has a code solution for this, too:


//* Do NOT include the opening php tag
//* Add theme info box into WordPress Dashboard

function b3m_add_dashboard_widgets() {

  wp_add_dashboard_widget('wp_dashboard_widget', 'Theme Details', 'b3m_theme_info');


add_action('wp_dashboard_setup', 'b3m_add_dashboard_widgets' );

function b3m_theme_info() {

  echo &quot;&lt;/pre&gt;
	&lt;li&gt;&lt;strong&gt;Developed By:&lt;/strong&gt;Your name&lt;/li&gt;
	&lt;li&gt;&lt;strong&gt;Website:&lt;/strong&gt; &lt;a href=&quot;http://www.websitelink.com&quot;&gt;Website name&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;strong&gt;Contact:&lt;/strong&gt; &lt;a href=&quot;mailto:youremailaddress@emailprovider.com&quot;&gt;youremailaddress@emailprovider.com&lt;/a&gt;&lt;/li&gt;


The end result looks something like this:

Custom Contact Dashboard Widget for WordPress
You can create widgets to display custom contact information.

As you can see, you can easily display your name, website, and contact information in its own widget.

You can also modify this bit of code to display links to your supporting documentation. So instead of showing your name and website, you may instead opt to display “For full support documentation visit: Site Name” or “Have any questions? Ask them on Your Forum Name,” and insert links as appropriate:

Custom Support Dashboard Widget for WordPress
Custom widgets can be used to display links to support docs, too.

Your clients shouldn’t have to guess at how to use your dashboard, so provide as much information as you can upfront and point them to as many of your custom resources as possible. Sure, there are plenty of tutorials out there about how to use WordPress, but why make a client search for that info when you can provide it under your own brand?

Change the Admin Color Scheme

The newest versions of WordPress offer the ability to change up how your dashboard’s color scheme looks. Still, these preset options might not be exactly what you’re looking for. Being able to customize the admin color scheme means you can ensure every aspect of your site’s backend matches your company’s branding.

To accomplish this, Smashing Magazine suggests creating a new CSS file. Call it admin.css and put it in your theme’s css folder. Make sure you use styles that work with WordPress. Then, open up functions.php and add this bit of code to call up that CSS file you made:

// Custom WordPress Admin Color Scheme

function admin_css() {

wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/css/admin.css' );


add_action('admin_print_styles', 'admin_css' );

Plugins for White Labeling

If the thought of manually adding bits of code to white label every site you create is too much, a plugin-based solution may be just the thing you need. Here are a few that either do it all or do one thing really well:

Ultimate Branding


Of course we have to mention our own plugin, Ultimate Branding, first. We’re pretty fond of it and think it does a really great job of giving site owners the ability to add white labeling without having to dive into PHP.

This plugin makes it easy to add your brand to just about every aspect of the WordPress backend, including a custom login image, admin bar, global footer and dashboard footer content, meta widget, admin help content, custom multisite favicons, and much more. You can also remove dashboard widgets to ensure your clients are only presented with the information they absolutely need.

Ultimate Branding is an all-in-one plugin but far from a one-size-fits-all solution. Customization is the name of the game and when it comes to branding your site, thoroughness is key.

White Label Branding for WordPress


Another option for adding customization to your dashboard is to use the White Label Branding for WordPress plugin available on Code Canyon. While its primary focus is on letting you brand your site, it includes some other interesting features that are worth mentioning as well.

With the Dashboard Tool, you can add as many custom dashboard meta boxes as you want. Thanks to navigation options, you can hide top-level and sub-level menus, rearrange their order, hide individual menu items based on user role, rename menus, and change menu icons. You can even hide the admin bar altogether if you want to prevent users from poking around too far into your site’s settings.

It also offers a variety of color scheme options. For instance, you can add a custom color scheme for wp-admin, change menu and content area colors, and customize how buttons appear. The role and capability manager lets you establish custom user roles and capabilities, which you can then tie to some white label features. For instance, you may opt to have different users, based on their roles, see different dashboard metaboxes. So, admins and contributors wouldn’t see the same things, thus preventing confusion and potential for errors.

You can expect to pay $28 for a regular license and $140 for the extended license.

AG Custom Admin


Self-described as an “all-in-one tool for admin panel customization,” you can easily modify the admin bar and menu, add personal branding to the admin panel in the form of images and content, and swap out the colors used—including in backgrounds and text—to better suit your brand’s image.

With just a couple of clicks, you can change out the admin panel theme as well, change the dashboard widgets, and modify what appears in the Help and Screen options menus. The admin themes are responsive and perfectly suited for the admin panel and login page.

Tired of clients accidentally creating new pages instead of posts? You can hide the “New Page” option from the dashboard and prevent it from happening ever again. You can also hide the options to create new links, users, media, and posts should you so desire.

YouTube White Label Shortcode


Adding videos to your site can be a great way to incorporate media and dynamic content. However, just embedding YouTube videos using the standard embed code can look a bit out of place. The videos won’t necessarily blend in with the rest of your design and the formatting could be a bit wonky.

That’s why the YouTube White Label Shortcode plugin is so handy. Once installed, you can add any YouTube video you want but you have the option to change up the player’s logo, whether or not videos start immediately upon loading, the player style, and more.

While this short code generator is automatically added in a metabox on all post types, you can opt for it to only appear on the post types you specify.

Uber Login Logo


If you’re not big on all the white label features and just want to add your logo to the admin login page and call it a day, Uber Login Logo is a good way to accomplish that. With it, you can upload your logo via the standard media uploader and swap out the logo by adjusting a few settings. Simple.

It’s extremely lightweight, which makes sense since it only performs one function. Still, if you don’t feel like poking around in functions.php, this plugin will give you a branded login page without calling much attention to itself.

Disable WP Admin Bar Removal


If getting rid of the admin bar is your top priority on the white labeling front, you should check out Disable WP Admin Bar Removal. This plugin will let you select from several settings to remove the admin bar, the toolbar, and tooltips.

It can also hide admin icons on the backend of your site and can be used to add a header and footer log and a logout function at the top of the dashboard.

Admin Menu Editor


Changing the menus in your WordPress dashboard is another way to customize the backend experience for your team and clients. If you’d rather not poke around in code, Admin Menu Editor will get the job done quite nicely.

With it, you can change menu titles, URLs, icons, and CSS classes. You can also rearrange the order of menu items easily via a drag-and-drop interface and opt to hide or show any menu or menu item. It’s also possible to set who sees what version of your menu based on user capabilities and/or roles.

Another cool thing about this plugin is you can create custom menus that point to any section of your dashboard. Or, you can configure these menus to link to external sites. This can be an excellent way to incorporate links to your support documentation in the dashboard.

Admin Menu Editor Pro adds on a few extra features if you really want ultimate control over your menus. Some of these features include the ability to hide a menu from all but specific users, set per-role menu permissions, drag items between sub-menus and main-menus, and export the admin menu for use on other sites.

It’s available under three licenses—personal, freelancer, and business—which are priced at $19, $29, and $59, respectively.

Themes for White Labeling

Normally when a discussion shifts to talk of WordPress themes, it’s referring to those that make up the design and style of a published and public website. However, themes are also available for styling the backend of your site.

More recent versions of WordPress have ramped up the style factor quite a bit. Individual users can select from a variety of color schemes through which to view the dashboard. From the cool tones of “Ocean” to the seemingly Halloween-inspired “Ectoplasm,” many people can find a look that appeals to their day-to-day sensibilities.

But if it’s important for you to create a branded look that’s in keeping with your company’s color scheme, you may find these out-of-the-box selections just won’t cut it. That’s where admin themes come in pretty handy.

Here are a few that will do your site proud:

Modern Admin


If you want to display your WordPress admin a little differently but don’t want to spend hours on custom code, Modern Admin might help you. This admin template is retina-ready and comes equipped with five different color schemes including blue, green, red, yellow, and purple. Plus, the custom color picker ensures you can make the right selection for your dashboard.

This theme has some of the features of white label plugins, too. For instance, you can customize the login page, add a custom logo, change the dashboard icons, and more. It also includes import/export settings and can be easily updated within the admin panel.

A regular license costs $14, while the extended costs $70.

WP Quick


As its name suggests, WP Quick is an admin theme that can be implemented quickly. It comes with plenty of features to keep savvy folks satisfied but is easy enough to setup that newbies to while labeling can get the hang of it right away.

Along with the ability to customize the colors and fonts used, you can also streamline the dashboard to only show the widgets you want displayed. For instance, you can stop those pesky update notifications from appearing, customize the login page with a unique logo, and change the default site avatar.

It also works with multisite, so you can create a custom, branded dashboard across all of your client sites very quickly.

Easy Blogging


Of course, I would be remiss if I didn’t mention WPMU DEV’s own admin customizer, Easy Blogging. Though technically a plugin, it lets you customize every aspect of the “look” of your dashboard very much so in the way a theme would.

It comes with some presets that make configuration and setup a snap. For instance, one click activates “Easy Mode,” which removes some of the more complicated options from the dashboard and adds new icons and tooltips to make your clients’ user experience more intuitive.

Easy Blogging also has a “Wizard Mode” that gives new users a step-by-step walkthrough of how to use the dashboard. And of course, you can customize this mode to include the information that relates to your site. You can even add in help links wherever you want using a drag-and-drop interface.

And since it works with multisite, you can set it up once and apply it across all of your sites. Convenient? I think so!

Easy Blogging costs $40 by itself or $19.60 per month with a WPMU DEV subscription.

Forest - Revolution WordPress Admin Theme


The last admin theme I want to throw at you here is Forest. This is a theme designed to make your WordPress backend as exciting and engaging as the frontend.

It comes with two admin styles within which you can adjust the background darkness level, background image, color scheme, menu font, and content font. You can also enable a Quick Panel that makes it simple to adjust settings on the fly. Plus, you can adjust how the Quick Panel looks for an even deeper level of customization.

As with all the other admin themes mentioned here, Forest also lets you configure standard white label functions like setting a custom login logo and login image, custom footer text, and custom admin CSS. Plus, you can hide certain WordPress admin widgets from view.

Forest includes a Google Fonts chooser, Font Awesome Icons, and sports a retina-ready design. It’s also multisite-compatible. The regular license costs $14, while an extended license costs $70.

For more backend themes for white labeling your site, you should read our top 10 list of WordPress admin themes.

Wrapping Up

Whether you build many sites for a wide range of clients or just a few now and then, being able to take control of the the admin side of things can be incredibly liberating. White labeling not only gives you the freedom to create a dash that fits your brand identity, it also lets you create an interface that’s custom-tailored to your clients.

When deciding on which white label code snippets, plugins, or themes to use, try to keep a general idea of your goals in mind. What do you hope to accomplish with these changes? Do you just want to streamline the look of the backend of your site? Do you want to improve functionality for your clients? Both? It might even be helpful to create a list of the pros and cons of each modification before committing to them.

Do you make it a habit to white label your sites? What tools do you use to get the job done? Are you a flat-out coder or do you take the plugin approach? I’d love to hear your thoughts in the comments below. 

Image source: Derek Gavey.

http://premium.wpmudev.org/blog/white-labeling-wordpress/feed/ 1