Home Web Development WordPress Theme Development Tutorials [All in 1 Best Series]

WordPress Theme Development Tutorials [All in 1 Best Series]

by Sikander Iqbal
wordpress theme development

Hi. Hope you are fine. In this tutorial, we are going to learn about WordPress theme development with FUN.

In fact, we’ll commence with absolutely zero files and zero lines of code. The only way to understand how WordPress Themes work, is to authentically jump in at a low calibre and do every single thing yourself. Affirmative, it is tempting to evade this because you can make WordPress do everything for you without any construal of the code that powers it. This could be PHP, JavaScript, CSS or even the fundamental HTML.

You may also be interested in reading WordPress Customization Tutorials.

By the cessation of this step by step WordPress Theme Development tutorial, you will understand how everything fits together and how to bend WordPress to your will with facileness.

So many free themes available to you when you are running a WordPress website. Beyond the free themes, you might withal opt to pay a premium for professionally made WordPress themes that look great and have fantastic features. So why learn how to engender your own theme from scratch?

The answer is that no matter what theme you are utilizing, there is going to come a time when you optate to make simple changes to your website. Some of those transmutations might be able to be accommodated by a simple plugin or widget. Many times, however, it makes more sense to understand what it is you optate to transmute, how to transmute it and eschew turning your WordPress website into a mess of plugins and integrate-ones that become unwieldy.

With just as if not enough of substratum level consciousness, you will be with self-belief in making an adjustment your chief idea or simply building your own from nothing. You Will range of knowledge which text record to get ready, and what code to get mixed together or make different to produce your desired outcome.

WordPress Theme Development:

Step-1: Create a folder to hold your WordPress Theme Files:

If we are going to be building Themes, we need to have knowledge of where the records that make up a WordPress Theme be living in WordPress Installation. This is good-looking simple, not hard. We have knowledge that a WordPress installation representatively has a root directory named WordPress.
Here is what our root directory looks like in PHP Storm.

wordpress theme development

The directory contains the following folders and files:

Files:

  • composer.json
  • index.php
  • license.text
  • 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

Folders:

  • wp-admin
  • wp-content
  • wp-includes

The folder that we are most intrigued with right now is the wp-content folder. Within the wp-content folder is a folder designated themes. This is the folder that holds one or more themes that you would like to use with your WordPress website. In this theme folder, we find three supplemental folders of twentyfifteen, twentysixteen, and twentyseventeen. These folders contain the three themes that WordPress ships with by default. There is a folder named customtheme. Go ahead and create that folder as well in your installation as this is where we will be creating our WordPress theme from scratch.

WordPress Theme Development Tutorials [All in 1 Best Series] 1

Step-2: Create style.css and index.php in your custom theme folder:

Now, we know that where is our WordPress theme files in the file system. We have also created a new folder named customtheme in our themes folder. Now we are going to create two empty files in this directory. One is known as index.php and the other is style.css.

WordPress Theme Development Tutorials [All in 1 Best Series] 2

Let’s add these files to the minimum we need in WordPress to get a new theme.


style.css:

In reality, WordPress reads the comments you have put in the.css folder, where you state-specific information on the theme.

The.css-style is a file for all WordPress themes required by CSS. It monitors the presentation of the website pages (visual design and layout).

We just assign a theme name in our snippet, the writer, the author’s URI and our theme version number.

1-/*
2- Theme Name: customtheme
3- Author: Sikander
4- Author URI: https://learncybers.com
5- Version: 1.0
6-*/

index.php:

In this folder, we just want to put something on the screen to prove how our custom theme functions.

1 <h1>Custom Theme!</h1>

WOW! well done! Believe it or not, your first WordPress theme has been developed by you.

Step-3: Activate your theme from the WordPress Dashboard:

Now, we can visit our WordPress dashboard and search Appearance->Themes and look, we can see the new theme we made.

WordPress Theme Development Tutorials [All in 1 Best Series] 3

To install our custom theme, we can click on “Theme Details” to find out that the information we have entered in the style.css folder has worked. It can be seen that the theme has a name of custom theme with the author Sikander, Version 1.0 and a link to the URI we provided. Superb.

WordPress Theme Development Tutorials [All in 1 Best Series] 4

Go forward, on the new custom theme click “Activate,” then go to the website. No award will be received, but we have a good start on a new custom theme for ourselves!

WordPress Theme Development Tutorials [All in 1 Best Series] 5

Step-4: Add Code To Output The Post Title And Post Text:

We have taken the freedom to add a few examples in the database so that during this tutorial we can work with this information. Our theme now only releases a custom theme! to this page when we visit our website regardless of the number of posts on the list. Let’s move to collect some data from our database and output it to the page. In addition, we want the post title and the post content of all posts to be compiled and viewed on the homepage. Let’s first see what’s on the Dashboard for posts.

WordPress Theme Development Tutorials [All in 1 Best Series] 6

Leveraging The WordPress Loop:

Now a bit of the WordPress Loop we can talk about. WordPress Loop is the catalyst for running WordPress.Through this loop, theme designers search for posts and display them, when required, on the page. If the format is adopted, adopt the explanation. If the database includes posts, let’s loop them as posts remain, otherwise, we’ll let the user know that no posts occur. In the PHP script, it looks like this.

WordPress Theme Development Tutorials [All in 1 Best Series] 7

Remember that the loop includes the two most basic functions. Those are have_posts() and the_post(). Just one thing does the have_post(). This tells you whether there are posts to loop over on the database. This function will either return true or false , which is what it is.

When it is real, posts can be looped over. There are no posts to loop over when it returns false. The other function, the_post(), offers nothing back. The role is to ready WordPress for posts. In particular, the next post is retrieved, the post is set, the in_the_loop property is set to true. Our website still doesn’t have our blog posts, but now we can update them in our index.php directory.

WordPress Theme Development Tutorials [All in 1 Best Series] 8

Well done. Now we use the_title() and  the_content() additional WordPress features. Very often such functions are used inside the loop and what they do is to retrieve each post with its title and content as the loop is iterated in the database over each article. When the loop runs, the first post will come in. at that time, the_title() function then outputs the post title to the site and the_content() function the outputs the post body to the site.

On the next loop, these functions will again fetch the next title and content and output them to the page. So we should now see certain information on our posts sent to the screen. Let’s try that.

WordPress Theme Development Tutorials [All in 1 Best Series] 9

Step-5: Add a Link To Each Post:

Now we add a link to each post. So, instead of just being in your homepage, we could view a post on its own. This is very simple to do, again with special features offered by WordPress. the_permalink() function can be used for this role. Our code can be changed in this way: