How to Create A Custom WordPress Theme : A Guide

Installing a prebuilt WordPress theme, configuring it, customizing it according to your needs, and integrating additional functionalities to it, are simple processes and can be performed easily in the WordPress dashboard. Creating a custom WordPress theme however, is a very difficult task for a non-programmer. It requires a deep understanding of WordPress including its programming structure, architecture, and theme architecture along with a mastery of PHP, CSS, HTML, and JavaScript. When said like this creating custom WordPress themes may sound to be a very hard process but in actuality it is not. WordPress architecture is very simple to understand and PHP, CSS, HTML, and JavaScript are comparatively easy to learn. The only thing that’s is practicing, experimenting, and learning by your own experience.

Learning custom theme building can be easy if you know what to learn and from where. Therefore, here we guide you to the top resources and content available on the Internet, grasping which you can become an expert WordPress custom theme developer. For this we are choosing a simple and free WordPress theme named Simple-Style. It can be downloaded from here . We will give you step by step guide on how you can build your own theme just like it. In order to learn making a custom WordPress theme, it is important to understand the structure of these CSS and PHP files, and what are the standards that are kept in mind while making them. So let’s open the Simple-Style theme folder and look what’s inside.

Anatomy of a WordPress theme

A WordPress theme is a set of image, JavaScript, PHP, and CSS style sheet template files that dictates the look and feel of a WordPress site. The most important use of a theme is to enable users to give a unique yet familiar look to their site or blog, without much effort and coding along with giving them an option of completely changing the appearance of the WordPress website. In addition these PHP and CSS files are also used in adding additional functionalities to the website.

When you search and install the theme using WordPress dashboard, it automatically saves the theme files in theme folder which is located in /wp_content/theme/<theme name>/ folder which is inside your main WordPress installation folder. For understanding the file structure of WordPress you can refer to this post. Knowledge of WordPress folder is important if you want to create custom WordPress themes and would be especially useful when you break something in the coding and bring the whole WordPress down. It happens a lot even with us.

A typical WordPress theme consists of many files such as archive.php, Header.php, Footer.php, Index.php, single.php, page.php, Sidebar.php, category.php, search.php, 404.php, comments.php, comments-popup.php, Style.css etc. All these files have standard names and perform functions in standard areas. This standard is informally set by the WordPress developer community to facilitate usability, readability, adaptability, and customization of code. Out of these files index.php and Style.css are the most important files and are the bare minimum requirements for making a WordPress theme. They all go into the theme folder. This great infographic  will shed some light on which file is used for what, though we have explained the same below.

Simple-style theme is really light weight so it has only the most necessary files. In addition to index.php, style.css, header.php, sidebar.php, and footer.php it contains attachment.php, page.php, single.php, 404.php, comments.php, functions.php, searchform.php, and some additional CSS files.

To understand how a theme works it’s important to understand the hierarchy of each template files . It’s explained in the following image.

This hierarchy is controlled by the template-load.php that can be found in wp-includes folder of WordPress. The template functions are defined in theme.php that is located in the same folder. Now let’s take a brief look at what each of these files is used for.

Index.php

Index.php is the single most important template file of the theme. This is the main template file that WordPress looks into for rendering every page type of the website if that specific is not found. For home page rendering, WordPress will look for front-page.php and then for home.php but if both are not found then it will look for index.php for guidance. The process is similar for inner pages, single pages, comment pages, etc. The WordPress theme will not work without an index.php.

Simple-style theme’s index.php has nothing much. It first calls the header using tag, then displays posts, followed by “next-page” and “previous-page” buttons, and ends by calling footer using tag.

Additional functioned used:-

• _e
• post_class
• esc_url
• the_title
• the_date
• the_content
• the_tags
• next_posts_link
• previous_posts_link

Front-page.php

Front-page template is the first thing that the WordPress will look for when rendering the website followed by home.php followed by index.php. This page is mainly used by those themes that have a static front page. Simple-style has no front-page.php.

Home.php

Comes after front-page.php in hierarchy for rendering first page- home.php dictates what the blog index page will display. Usually it displays excerpts from the recent posts and contains the index of all the blog posts. It is also the file that WordPress searches first for rendering blog’s post-index page. If front-page.php is not present, this template is the front page by default. Simple-style has no home.php

Attachment.php, Single-.php, and Single-post.php

As per hierarchy these templates take precedence over single.php for displaying single post page of the specific type of post i.e. attachment.php is used to display attachment posts, and single-.php is used to display custom post types. Similarly single-post.php is used to display posts on a single page.

Our selected theme has Attachment.php only. The template starts by calling header, then it displays posts and images, calls comments template, and finally footer. A thing to note here is the use of function. This function is used to display images that are inserted as attachments and thus can be used to change the rendered image size from back end of WordPress. However it’s best not to use this option if you are not sure about your coding skills.

Additional function tags used:-

• previous_image_link
• previous_posts_link
• comments_template

Single.php and Page.php

Single.php is the template that WordPress goes to when it does not find attachment.php, single-<post type>.php, or single-post.php. Similarly page.php is the template that WordPress goes to when it does not find any other custom template for rendering WordPress pages.

Additional function tags used:-

• wp_link_pages

Comments.php

This is another important template that dictates how the comments are displayed in post or page. Every page and post template that wishes to display comments, calls this template to render the comment list.

Additional function tags used:-

• wp_list_comments
• comments_number
• paginate_comments_links

Searchform.php

The name says it all. This template is used to render the search form and search result. It can be called using get_search_form() tag.

404.php

The 404 Not Found template. The template is used to display custom 404 error messages that are a being preferred nowadays.

Header.php, Footer.php, and Sidebar.php

Header, footer, and sidebar template files are extremely important from organization and management point of view. Instead of writing the code for displaying these features in every page and post template file, just make Header, footer, and sidebar template files and call them using get_header(), get_footer(), and get_sidebar() tags respectively. Also since header.php is the first file that is called and rendered in every instance of the website, it contains all the HTML tags and theme related tags such as

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html <?php language_attributes(); ?>>

The simple-style theme can be adapted to work in the older Internet Explorer browser by manipulating IE tags in the header. They are in comment form by default.

Functions.php

WordPress is stuffed to the brim with features, however sometimes even these prove to be inadequate for creating a custom WordPress website. To bridge this inadequacy there are a number of plugins that can be used. Expert programmers on the other hand use function.php file to define any addition, no matter how simple the function is. Simple-style theme also has a template file that it uses to define custom Menus, custom Comment Form, rendering styles unique to the theme, style sheet controls, and Comment Reply functions.

Style.css

As said earlier style.css is the most important file in any WordPress theme. It decides the look and framework of every aspect of the website and is considered the most difficult process in custom theme building as it creates CSS sheets and requires considerable knowledge to build and code. The first step of every custom theme making process is to create a CSS file. Learning CSS is not that difficult. There are hundreds of resources available on the internet for this specific purpose. Here is a list of resources where you can learn CSS.

• W3Schools The web-developer’s guide to CSS. The website is filled with detailed examples and has an online compiler to practice CSS and HTML.
• https://developer.mozilla.org/en-US/learn/css: – This page contains a step-by-step list of different articles, turotial and videos for the specific purpose of teaching you HTML and CSS. It is developed by the open source community that is behind Firefox browser.
• CSS Basics:- A great resource for brushing up your basic and core concepts in CSS.
• Eric Meyer’s CSS reference:- A collection of articles and posts on CSS by Eric Meyer, a world renowned web-developer and programmer. The site also has a comprehensive list of all CSS tags.
• TutsPlus:- There is nothing better than a complete video tutorial series to teach you CSS and HTML. No wait there is something better than a video series, a free comprehensive video tutorial series. Tutsplus offers such a premium standard comprehensive video tutorial and that too for free.
• https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/:- CSS coding standards. Important if you want to create a cross browser compatible WordPress theme.

An important thing to note about style.css is that it also contains the information about a WordPress theme that is displayed when the theme is displayed in the WordPress software’s dashboard. If you open the style.css sheet of Simple-Style theme you would notice a detailed description about the theme in the top section of the CSS sheet. It is inside comments in the sheet.

/*

Theme Name: Simple Style Theme

URI: http://fimply.de/?page_id=348 Author URI: http://fimply.de

Description: Simple Style is our new WordPress Theme. It’s the next step to increase the number of our available themes. Like Convention and elegantWhite it contains a lot of great features. Also, it is a perfect layout for photo blogs our/and personal blogs. If you have feature requests, you can send us an e-mail.

Author: Fimply

Version: 1.0.4

Tags: white, blue, one-column, fixed-width, sticky-post, translation-ready, one-column, custom-menu, light, gray

License: GNU/GPL Version 2 or later License

URI: http://www.gnu.org/licenses/gpl.html

*/

This small section contains Theme’s name, Theme’s external URL, Theme author URL, a small description of theme, Author name, version, relevant WordPress theme tags, license information, and license’s URL. This is a standard way of giving information about a theme and WordPress directly takes the theme information from this area.

• WordPress.org
  • http://codex.wordpress.org/WordPress_Lessons:- The page contains a detailed and step by step tutorial list of all the features of WordPress.
  • https://codex.wordpress.org/Theme_Development: a complete WordPress codex on theme development.
  • https://codex.wordpress.org/Developer_Documentation: A list of all topics related to WordPress development.
  • https://developer.wordpress.org/themes/basics/template-hierarchy/:- As explained earlier understanding the hierarchy of templates is important for structuring and coding them.
  • https://codex.wordpress.org/Template_Tags:- A complete list of all the tags that are used in WordPress software. Each tag is explained with detailed description and usage in a separate page.
  • http://codex.wordpress.org/Function_Reference:- a complete reference guide to all the functions used in the WordPress. Each function has a separate page that contains its detailed description and how they can be used.
  • http://codex.wordpress.org/CSS:- A guide on CSS and how it is implemented in WordPress.

• Other Resources
  • http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/:- A complete tutorial on creating a WordPress theme from scratch. It’s a little old but it has all the basic on creating a WordPress theme.
  • https://yoast.com/wordpress-theme-anatomy/ a great infographic on WordPress anatomy.
  • https://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial a great tutorial on creating responsive WordPress theme using bootstrap framework.
  • https://www.wordpressintegration.com/blog/making-psd-to-wordpress-responsive-website-a-guide-for-dummies/: A comprehensive resource guide for creating responsive WordPress website. It contains resources for creating a custom responsive theme.
  • http://www.youtube.com/watch?v=IAi3ZM1h4SY:- A great tutorial on creating custom WordPress page templates.

Conclusion

Creating a WordPress website using a prebuilt theme is easy but creating a custom WordPress theme is difficult. Even if you learn PHP, HTML, JavaScript, CSS, and WordPress, there still remains the task of search engine optimization and speed optimization, along with implementing cross browser compatibility and mobile compatibility. All these can only be learned through extreme practice and keeping up to date with latest web development standards. Therefore if you are serious about building a WordPress website, have an idea about what your website would look like, and want your website to rank somewhere in a search engine, it’s best to hire a professional PSD to WordPress conversion service. They will convert your designs into a working WordPress theme within no time.