WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to instantly change their website look. In this post, WordPress Theme Development, we’ll take a look at what WordPress themes are and how they work.
You may wish to develop WordPress Themes for your own use, for a client project or to submit to the WordPress Theme Directory. Why else should you build a WordPress Theme?
- To create a unique look for your WordPress site.
- To take advantage of templates, template tags, and the WordPress Loop to generate different website results and looks.
- To provide alternative templates for specific site features, such as category pages and search result pages.
- To quickly switch between two site layouts, or to take advantage of a Theme or style switcher to allow site owners to change the look of your site.
A WordPress Theme has many benefits, too.
- It separates the presentation styles and template files from the system files so the site will upgrade without drastic changes to the visual presentation of the site.
- It allows for customization of the site functionality unique to that Theme.
- It allows for quick changes of the visual design and layout of a WordPress site.
- It removes the need for a typical WordPress site owner to have to learn CSS, HTML, and PHP in order to have a great-looking website.
Why should you build your own WordPress Theme? That’s the real question.
- It’s an opportunity to learn more about CSS, HTML, and PHP.
- It’s an opportunity to put your expertise with CSS, HTML, and PHP to work.
- It’s creative.
- It’s fun (most of the time).
- If you release it to the public, you can feel good that you shared and gave something back to the WordPress Community (okay, bragging rights)
WordPress Theme Development Tutorial – Complete Guide
Step 1: Create a folder to hold your theme files.
If you are going to be build theme, you need to know where the files that make up a WordPress theme live in a WordPress Installation. This is pretty easy. After the WordPress Installation or in our website root directory, there the many files and folders.
This root directory contains the following files and folders:
List of Files in our root directory
- composer.json
- index.php
- license.txt
- readme.html
- wp-activate.php
- wp-blog-header.php
- wp-comments-post.php
- wp-config.php
- wp-config-sample.php
- wp-cron.php
- wp-links-opml.php
- wp-load.php
- wp-login.php
- wp-mail.php
- wp-settings.php
- wp-signup.php
- wp-trackback.php
- xmlrpc.php
List of Folders in our root directory
- wp-admin
- wp-content
- wp-includes
For the WordPress theme development, we need to focus on wp-content folder. Within the wp-content folder is a folder named themes.
Themes folder, that holds one or more themes that you would like to use with your WordPress website.
For a new Theme, you need to create a folder of name whatever you want and I am using “customtheme” for this tutorial.
The Theme’s subdirectory holds all of the Theme’s stylesheet files, template files, and optional functions file (functions.php), JavaScript files, and images. For example, a Theme named “customtheme” would reside in the directory wp-content/themes/customtheme/. Avoid using numbers for the theme name, as this prevents it from being displayed in the available themes list.
Step 2: Create theme required files in your customtheme folder
WordPress Themes typically consist of three main types of files, in addition to images and JavaScript files.
- The stylesheet called style.css, which controls the presentation (visual design and layout) of the website pages.
- WordPress template files which control the way the site pages generate the information from your WordPress database to be displayed on the site.
- The optional functions file (functions.php) as part of the WordPress Theme files.
Let’s look at these individually.
Theme Stylesheet (style.css)
In addition to CSS style information for your theme, style.css provides details about the Theme in the form of comments. The stylesheet must provide details about the Theme in the form of comments. No two Themes are allowed to have the same details listed in their comment headers, as this will lead to problems in the Theme selection dialog. If you make your own Theme by copying an existing one, make sure you change this information first.
The following is an example of the first few lines of the stylesheet, called the stylesheet header
/*
Theme Name: Custom Theme
Theme URI: https://studywarehouse.com/
Author: Study Warehouse team
Author URI: https://pardeeppatel.com/
Version: 1.0
Text Domain: customtheme
*/WordPress actually reads the comments that you place in the style.css file. This is where you specify specific information about the theme you are building.
index.php
In this file, we just want to output something to the screen to prove that our custom theme is working.
<h1>Custom Theme!</h1>Great Job! Believe it or not, you have created your first WordPress Theme.
Step 3: Activate your theme from the WordPress Dashboard
At this point we can visit our WordPress Dashboard and navigate to Appearance->Themes, we see the new theme we have created.
We can click on “Theme Details” to drill down on our custom theme and find that the information that we had entered into the style.css file has worked. We can see the them has a name of customtheme, with Version 1.0, by the author Study Warehouse, and a link to the URI we had provided. Very cool.
Go ahead and click “Activate” on the new customtheme and then visit the site.