The right way to customize WordPress Themes!

You are not the only person who wants to customize your WordPress Theme. And there is no single way to tweak your site. There might be multiple ways to do the same thing. In this post we will discuss the right way to modify or customize WordPress theme.

What’s in the post?

Almost all Most commercial theme available outside the WordPress.org repository have inbuilt plugins and panel. They seem to be easiest way to customize your WP themes. But wait, there is a catch! They might not be the best option available. Or more precisely, they might be a theme lock. Let’s first take a look on the options we have.

You might hire a developer to do things with your site. But it might not be feasible with everyone or just not that complex to ping a developer. So if you are going to customize your theme then it’s better to understand the basics and the right way to do that.

Let’s first talk about the sexiest feature of your theme, the panel. In most premium commercial theme you will get one.

Theme Panel

This is an inbuilt feature of most premium theme. But sometimes you might get a panel as add-on plugin. These panels offer you a verity of customizations.

Significance of using inbuilt panel

  1. Easiest way to customize.
  2. No need to be a professional or even intermediate user. Everybody can work with it.
  3. Use plenty of options to tweak your theme and give it a new look.

Limitations:

  1. Possible Theme lock
  2. Limited functionality

Using a plugin

You might use a plugin, more precisely custom plugin, to customize your theme. You may literally do many things with your plugin.

Benefits of using a plugin to customize WordPress Themes:

  1. A plugin will definitely be helpful and give you more flexibility to customize your site
  2. It can work across your sites under multi-site WordPress install.
  3. No theme lock. Your customizations will be safe even after switching your theme.

Limitations:

  1. You should be aware of PHP/HTML/CSS or sometimes MySQL.
  2. Potentially break your site if you follow some random tutorials or hit and try with your live site.
  3. You will be responsible for what you are doing and sometimes it will be costlier if you damage your site and do not know how to recover it.

Indeed this is sometimes riskier to use a plugin or child theme but it is most recommended way to try these methods.

You may ask for help any time on WordPress Forums, Stack overflow, your theme support. If everything fails try some paid options like Theme Hybrid Club or even here in our forums. These will not be a guaranteed option but they provide pretty good support and put you in right direction.

Using a child theme for customizations:

This is the most precise option and literally all theme developers recommend this option for advance customization. Here are a few benefits and limitations of Child Themes:

Benefits of a child theme:

  1. Everybody recommends this.
  2. Good for advance theme customization
  3. Will keep your design intact even after parent theme updating.

Child Theme limitations:

  1. Basic knowledge of PHP/HTML/CSS will be required
  2. You might break your site if editing on live site.
  3. Support will be limited in many cases.

Deciding between Child Theme and Custom Plugin

Now you have seen all these options have their own good and bad. You might be confused now. Isn’t it? It’s time to crystal clear the ideas when should one use a plugin and when should a child theme.

  1. Decide whether your customization is a feature or design! If it is a feature go for custom plugin else a child theme. You could easily distinguish between a theme feature and plugin feature; just think about changing the theme in future if you don’t want to keep those elements with your next theme it would be better to add such customizations to a child theme. [This idea is for layman or absolute beginners. If you know WordPress a little bit you might like to check this link.]
  2. Features like Custom Post types, gallery, and portfolio belong to plugin territory. You should not use such feature unless you can port them out. Your theme developer who built the theme will tell you how to do that.
  3. According to Official WordPress theme makers’ documents favicons, advertising widgets, analytics are also a plugin feature and should belong to plugin.

When to use your Theme Panel?

Theme panels are very useful if you use it properly. Unfortunately, Theme developers occasionally violate certain rules and add plugin features to the theme panel. This is a theme lock (or trap). If you use these features you probably want to use their theme for your life. Never use such inbuilt feature unless there is an option port your data out.

The most common example of such feature is product rating.

It will be initially costlier to setup multiple plugin in terms of time and money. But it might be best option. Most popular plugins are well supported in (and outside) WordPress repository. Choose them.

I know many people would not support this idea but in long run it will be useful. If you have different opinions please do share.

Statutory Warning: Editing WordPress Theme may break your site!

How many smokers know “Cigarette smoking is injurious to health”? And, how many of them quit smoking after reading the quote. There might be a few but not in significant number. There is a similar situation here. People start editing themes and plugins on a live site and sometimes they mess things up and blame WordPress or luck. It is highly recommended to edit/test themes or plugins on test server or site. Do not edit a live theme. It may potentially break your WordPress installation. For the sake of goodness, please follow the following rules.

  1. Always edit themes or plugin on a test server or site.
  2. Do not hack WordPress core.
  3. Always debug edited theme or plugin before uploading to live website.
  4. Test compatibility with other plugins you already have installed on your site.
  5. Always backup your site before activating your plugin or theme.

If you follow these rules you probably enjoy your blogging life.

Getting started with WordPress Theme customizations

Once you understand be theme territory and plugin territory you will easily get started with customizing your site. You should also aware about theme panel features and theme trap.

Customize WordPress Theme using a plugin

A custom plugin will give you enormous power to hack many things you may download this sample plugin and get started with adding codes to it. Forking the plugin on Github will be better if you have some spare time and want to track every change made. I will discuss how to do that someday.

Here are a few lines of code every plugin should have. As you see these lines give you, and WordPress, an idea about theme name, author name and URL, version and some other information.

You may edit/test and then upload the plugin to your site for safe customizations. Depending upon your theme there might be limitations to modify your theme. But hey, we may use child theme for editing and adding templates.

Customize WordPress theme using a child theme

Child theme is the best possible way to customize your theme. As the name suggest child theme needs a parent theme to work. Yes, the relation is also called parent-child theme. You may also have a grandchild theme. But it will be discussed later.

Like plugins a child theme also need some essential files and some codes to get started. I have created a sample child theme for Twenty Twelve, which you could use to understand the mechanism of the child theme.

Apart from the general information notice the 7th line template: twentytwelve. This line is required to define the parent theme. The word twentytwelveshould be your real theme slug. This is case sensitive.

Read official doc more about creating a child theme.

How to make WordPress Print Friendly

Offering print friendly version of blog posts not only gives an extra feature but also helps your user to keep their loved article. By default, no WordPress theme offers such feature. This is due to conflicts with plugin and customizations. There is some 3rd party service which offers good features but that could not be solution for many.

Print Friendly WordPress with small plugin we build will do some simple magic. When user will hit Ctrl+P or any other way to take print the browser will automatically hide all unnecessary elements from prints and print previews e.g. header, sidebars, widgets and footers.

In this post we will add this cool feature to a Genesis Framework based site and a Standard WordPress theme i.e. Twenty Fourteen. Once you understand the approach you will able to customize it for any WordPress site. This will be fun for beginners and I am already here to help you.

Prerequisite: Basic knowledge of html and CSS is required.

What will we need?

We will need three things and I am pretty sure you already have first two.

  1. Google Chrome or Mozilla Firefox. Firebug extension could also be used if you are familiar with it.
  2. File compressor software like WinZip, WinRAR or anything which compress our files to zip.
  3. The starter plugin we have made. Download the zip file or fork it on GitHub.

Note: The plugin is not available on WordPress.org.

Let’s begin with some coding

Hey, I know you might not a web developer. But it will be easy and fun.

Uncompressed the starter plugin you just downloaded and un-compress it. The all we need to edit print.css. By default I have added some basic codes which work with Genesis Theme, Twenty Fourteen and many other untested themes.

While editing the file our goal will be to remove all elements which we don’t want to print. That should be sidebars, footer widgets, footer and sometimes header. Post Meta like author info, comment counts, category and tags also have no meaning for prints.

How to find html elements?

Use Ctrl+Shift+I on Chrome or Firefox to activate Developer Tools pane. After that find the element by hovering the code will highlight the element you have to find.

If you are not familiar with Chrome or Firefox extension tools read this articles:

How to edit print stylesheet?

To hide some element use display: none;

Suppose we want to hide header and footer div. If the div id is #header and for footer #footer the code will be something like:

#header,
#footer {
    display: none;
 }

If the header id is #site-header then you should use #site-header instead of #header.

Further, we might like adjust width and margin for paragraphs, quotes, list styles, tables. I have already added some codes for that which should work fine.

The important thing you should consider editing is line 168. You should change the URL to your site and any disclaimer or notice you want to add.

Important: The print.css file will highly depend upon your site structure and theme/plugins. This will be your home work to identify all the unwanted elements, divs and spans.

Tips: You should also use !important with your CSS.

Compress and upload

Once you are sure that you have made all necessary changes to the CSS file then you should save the file and zip the folder using any compressor. Here you should keep the file structure same as you have downloaded.

Now upload the plugin to your WordPress site and activate it.

Tip: You may also upload the sample plugin I made and then customize the css file using WordPress built-in plugin editor page. The choice is yours.

If you have any problem please consider leaving a comment below or tweet to @BlogSynthesis.