This tutorial will be entertaining as we look at how to build a WordPress theme from scratch. In fact, we’ll begin with absolutely zero files and zero lines of code. The only way to truly grasp how WordPress Themes operate is to dive in headfirst and complete every single task on your own. Yes, it is tempting to avoid this because you can make WordPress do everything for you without any understanding of the code that powers it. PHP, JavaScript, CSS, or even plain old HTML could be used for this. By the end of this step by step WordPress Theme tutorial, you will understand how everything fits together and how to bend WordPress to your will with ease.
When you run a WordPress website, you have access to a tonne of free themes. In addition to using the free themes, you can spend money on premium WordPress themes that are expertly designed and have wonderful features. Why then learn how to build a theme from scratch? The answer is that there will inevitably come a time when you want to make easy changes to your website, regardless of the theme you are using.
A straightforward plugin or widget might be able to accommodate some of those changes. However, many times it makes more sense to know what you want to change and how to change it rather than letting your WordPress website turn into a jumble of cumbersome plugins and add-ons. With just a little foundational knowledge, you’ll feel comfortable making changes to your theme or creating a brand-new one entirely. . s. s……………….
Step 1: Create a folder to hold your theme files.
to a……………………. It’s not too difficult. We are aware that a root directory called wordpress is typically present in a WordPress installation. This is how PHP Storm’s root directory looks.
The following files and folders are located in this directory:
Files
- 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
Folders
- wp-admin
- wp-content
- wp-includes
The wp-content folder is currently the one that interests us the most. The themes folder is located in the wp-content directory. Are you aware of the purpose of this folder? Yes, you’re right. This is the folder that contains one or more of the themes you want to use for your WordPress website. Three additional folders, labelled twentyfifteen, twentysixteen, and twentyseventeen, can be found in this themes folder. The three themes that come standard with WordPress are located in these folders. Observe that there is a folder with the name “customtheme” below. Create that folder in your installation as well; this is where we’ll be starting from scratch to build our WordPress theme.
Step 2: Create style.css and index.php in your custom theme
folder
The location of the WordPress theme files in the file system is now known. Additionally, we have added a brand-new folder to our themes folder called customtheme. In this directory, we will now create two empty files. One is known as style.css, and the other as index.php.
Let’s now add the bare minimum to these files to get a new WordPress theme up and running.
style.css
In fact, WordPress reads the comments you add to the style.css file. Here, you can provide details about the theme you are developing.
the fashion. A stylesheet (CSS) file called css is necessary for every WordPress theme. It manages how the website pages are presented (in terms of visual design and layout).
We merely assign a Theme Name, the Author, the Author URI, and the Version of our theme in this snippet.
index.php
To demonstrate that our custom theme is functioning, we simply want to output something to the screen in this file.
Great Job! You have, believe it or not, written your first WordPress theme.
Step 3: Activate your theme from the WordPress Dashboard
At this point, we can go to the WordPress Dashboard, select Appearance->Themes, and presto! The newly created theme is there.
When we click “Theme Details” to delve deeper into our custom theme, we can confirm that the data we had entered into the style.css file had been successful. We can see that the theme is called customtheme, has a version number of 1.0, was created by Vegibit, and includes a link to the URI we had given it. Super cool.
Now is the crucial time! Visit the website after clicking “Activate” on the new custom theme. Although it won’t be nominated for a Webby award, we’ve got a good start on a new custom theme!
Step 4: Add Code to Output The Post Title and Post Text
We’ve taken the liberty of adding a few sample posts to the database so that we can use that information in this tutorial. Currently, no matter how many posts are stored in the database, our theme simply outputs Custom Theme! to the page when we visit our website. Let’s proceed to pulling some information from the database and displaying it on the page. In particular, we want the Post Title and Post Content of each post to be fetched and displayed on the homepage. Now let’s try that out. Let’s first look at what the WordPress Dashboard has to offer in terms of posts.
Leveraging The WordPress Loop
We can now briefly discuss the WordPress Loop. The actual power behind WordPress’ operation is the WordPress Loop. The developers of themes use this loop to check for new posts and display them as necessary on the page. It adheres to the following format. If there are posts in the database, let’s loop through them while there are still posts; if not, we’ll inform the user that there are none. The PHP code has this appearance.
You’ll see that the simplest version of The Loop only uses two functions. They are the post and have posts() (). There is only one thing the have posts() function does. If there are any posts in the database to loop over, it will let you know. This function only has two possible outcomes: true or false. There are posts available to loop over if it returns true. There are no posts to loop over if it returns false. The post(), the other function, returns nothing.
Its duty is to prepare WordPress for post output. The in the loop property is set to true, and it specifically retrieves the following post and prepares the post. Although we can now update that in our index.php file, as of yet, our page will still not output any information about our blog posts.
cool, ok. The title() and the content, two more WordPress functions, have now been utilised (). These functions are most frequently used within the loop, and they retrieve the title and content of each post as the loop iterates through each one in the database. As a result, when the loop executes, it encounters the first post. At that point, the content() and the title() functions will output the post’s body and title, respectively, to the page.
These functions will once more retrieve the following title and content during the subsequent loop and output them to the page. We should now see some information about our posts being sent to the screen with these in place. Try it out! We check out http://wordpresstutorial.dev to see that it functions!
Step 5: Add a Link To Each Post
Why not include links to each individual post so we can read them independently rather than just as a part of the homepage? With the help of WordPress’s special functions, we can accomplish that fairly quickly. We can use the the permalink() function for this task. We can modify our code as follows:
Step 6: Add a Header and Footer To The Custom Theme
The two main components of a strong theme are the post’s title and content. Having a header and footer section for your theme is almost equally crucial. The content that appears consistently on all website pages would be found in these sections. These paragraphs appear above and below the post’s body. You guessed it—we’ll use special WordPress functions to obtain the header and footer—to accomplish this.
Do you already detect a pattern emerging? With the help of these custom functions, almost everything you can do as a theme developer in WordPress has already been done. Therefore, you will discover that learning these frequently used functions for WordPress theme development pays off. The get header() and get footer() functions should now be added to our theme file.
Why don’t you take a look at that? We can see that the header and footer sections of our custom theme have been added. The site’s name and tagline are in the header, and the well-known phrase WordPress Tutorial is proudly powered by WordPress can be found in the footer. When using these functions, these are the default choices for the header and footer. What happens if we want a unique header and footer? Coming up soon!
From 2 Theme Files to 4
Two files currently exist in this tutorial’s customtheme folder (which itself is in the themes folder). These files are index.php and style.css. To proceed further, we’ll need to add more files at this point. Make two new files and place them in the customtheme folder. Conveniently, these files will be referred to as header.php and footer.php.
Now, when you use the get header() or get footer() functions, these files will replace the default header and footer layouts that are provided by default. In fact, if you reload our website, the header and footer appear to be gone. This is due to the fact that we haven’t yet marked up those files. Set up the files as shown to test this out just for fun.
header.php
footer.php
Working with header.php
It worked perfectly in our example above, and it demonstrates the fundamental operation of this file. However, let’s not skim over the header.php file’s specifics too quickly—it is actually quite crucial! The code that every page on your website will require access to in some way should be included here.
All HTML pages will initially have a doctype. In this file, you would specify that. All pages will also have a head section, an opening body tag, and an opening html tag. This can all be placed in the header.php file. Let’s quickly add a few of these elements that are used by all web pages. Here, too, we’ll use a few fresh WordPress features. Language attributes(), bloginfo(), and body class are those ().
header.php
We can learn more about what these functions exactly do if we reload the page and then look at the page’s source in our browser. Below, we’ve highlighted the lines that contain output from those functions:
Once more, we can see how WordPress functions are used incredibly liberally when creating custom themes for the platform. In actuality, we haven’t even begun to write any custom code. We are merely becoming familiar with what the various WordPress functions can do for us before implementing them in our unique theme.
Including wp_head()
When using WordPress Themes, the function wp head() is somewhat unique. It’s not quite as straightforward as the others we’ve examined so far. This function’s goal is to complete the output in the header.php file’s section. In actuality, it should appear immediately before the closing tag. When you begin incorporating different plugins into your website, this becomes crucial. On the front end, it prints scripts or data in the head tag. As many other plugins may rely on this hook to add styles, scripts, or meta elements into the area of the site, it is a good idea to always include wp head() in your themes. We will put it here as follows:
header.php
Completing footer.php
We have completed including the essential components in the header.php file. Let’s proceed and complete the footer.php file now. We have a few things to take care of. Remember that the opening html and body tags are located in our header.php file? At some point, those must be shut. The footer.php file is the ideal location for this. Therefore, in addition to calling the wp footer() function, we will also add the closing /html> and /body> tags.
footer.php
Changing Site Information In The WordPress Dashboard
You might be wondering why we needed to use so many elaborate features to develop our theme. For instance, we used the bloginfo() function and passed the name and description parameters to list out the name and tagline of our website. This is because, in general, you should never hard code these values into your website. This information is subject to change. The public will also have their own name and tagline for their website if you make your theme available to them. To see this data populate automatically, they should only need to update their General Settings in the WordPress admin dashboard.
Making The Site Title Link To The Homepage
The majority of themes give users the option to click on the website’s title text to go to the home page of the site. This way, the user can always click the title text and return to the website’s home page from anywhere on the site. Let’s add that link to header.php right away.
Step 7: Add a functions.php file to your theme
Our customised theme currently has four files. Index.php, style.css, header.php, and footer.php are those. The functions.php file is probably the next-most crucial file we require.
WordPress’s functions.php file handles a variety of tasks for your theme. It is the file where you put the code to change WordPress’s default behaviour. With a few important things to keep in mind, you could almost think of the functions.php as a type of plugin for WordPress.
- Does not require unique Header text
- Stored in the folder that holds your theme files
- Executes only when in the currently activated theme’s directory
- Applies only to the current theme
- Can call PHP functions, WordPress functions, or custom functions
Better styling is one thing that our theme desperately needs! Make a function to include the style.css file in our theme by adding it to the functions.php file. Here’s how we can accomplish that.
The stylesheet for our custom theme will be included or made active by this piece of code. Currently, you may be wondering why we are using a custom function when it appears that we could just as easily manually link to the stylesheet in the header.php file. This basically means working a little harder now in order to reap more benefits later. You will be grateful to have this one function that can handle all the heavy lifting for you as themes become more complex and more assets are added.
Now is the time to improve the aesthetics of the situation. Let’s start by including a wrapping div with the class of container. The header.php file will contain the opening div>, and the footer.php file will contain the closing div>. Additionally, we’ll include an article> tag in index.php that has the class of post to wrap the post output. This will provide us with classes to target in our style.css file so that, among other things, we can set page width. In this step, we’ll also improve the styling in style.css.
Step 8: Add Some Style To Your Theme
header.php
Adding an opening <div> to the header.php file.
footer.php
Including a /div> at the end of the footer.php file.
index.php
adding an article> tag to the post output
Finally, we add a variety of CSS style enhancements to the theme to give it a slightly nicer appearance.
We can see that the WordPress Theme we developed in this tutorial step by step looks good when we visit our test website right now in a browser.
WordPress Theme Development Tutorial Step By Step Summary
In this basic, step-by-step WordPress Theme tutorial for beginners, let’s review everything we’ve learned. Making our own folder inside the themes folder of our WordPress installation taught us how to make our first custom theme in WordPress. We added various files that correspond to various sections of your website to this folder. In our tutorial, we started with the absolute necessities for a WordPress theme. You would eventually add a lot more files to this folder than what we have discussed. Let’s go over each file we produced in this tutorial and their functions.
style.css
You should add some CSS comments to this file so that WordPress is aware of some details about your unique theme. Additionally, it stores the unique CSS styling that you will use for your theme.
index.php
This file regulates your theme’s HTML and overall output. It is the primary file that generates the data that appears on your home page.
header.php
allows you to include opening html>, body>, and,div class=”container”> tags in the head> area as well as specifying a location to hold important information about your website.
footer.php
The footer gives you a place to use the wp footer() function as well as closing out any opening tags you specified in the header area.
functions.php
allows you to define your own functions and call built-in WordPress and PHP functions to alter WordPress’s default behaviours.
There you have it, then! With just 5 files, we were able to build a custom WordPress theme that works flawlessly. This equips us with the fundamental knowledge needed to create more complex WordPress themes and features. Well done!
