Introduction
If WordPress users need to change the appearance of their sites, they can easily do so. All they need to do is go to the admin dashboard, proceed to the themes page, and then choose a theme that suits them. If they can’t find the theme they need, they can purchase a theme or maybe get a developer to develop it for them. There is, however, another option, especially if they have some programming experience. This option is to develop their own themes. While it may sound daunting at first, it’s not as difficult as it may seem. Is it challenging? Yes. But is it doable? The answer is also “yes”.
In this tutorial, we will be covering the basic of creating WordPress themes. This tutorial should give the reader the foundation they need in order to create basic themes. Once they have that foundation, creating more complex themes become closer to reality. A little foreword though, to get the most out of this tutorial, readers should be familiar with HTML, CSS, and PHP or even general programming experience. Otherwise, they probably should learn at least the basics of these.
With that, let’s begin our tutorial.
Steps to Create a WordPress Theme
1. Create a Theme Folder
The first thing we need to do is create a folder for the theme. In this tutorial, we will name the theme we will be creating as “ourtheme”.
2. Create core theme files
Next, we need to create the core theme files. Every theme folder must contain two necessary files – “stylee.css” and “index.php”.
style.css
“style.css” contains the theme information and CSS configurations. All themes need a header comment in the “style.css” file. As a minimum, the header comments must contain a comment stating the name of the plugin, but it can contain other meta-data as well. Let’s place the following lines in the “style.css” file
/*
Theme Name: Our WordPress Theme
Description: The first WordPress Theme we will be creating
*/Code language: CSS (css)Save it inside “ourtheme” folder.
index.php
Next, we have to create the index.php file. This file is used as the basis for how a page or post will be rendered. To create it, just create a new file using a text editor and save it as “index.php” .
At this point, we can already install the theme and even activate it . This is what the Themes page in the admin dashboard would like once the theme is installed and activated.
However, this won’t render anything. For a page or post to be rendered, we need to add more content to the index.php file
3. Adding code to render content
index.php defines the layout and appearance WordPress will use when it renders a post or page. which the WordPress site’s post or pages will use .
Let’s create a simple HTML page template in our plugin’s index.php file. It contains no PHP code but it will still be rendered
<html>
<head>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Code language: HTML, XML (xml)How this appears in a page can be seen in the image below. Any other
It’s a static page and all it does is display a hard coded value. What we need however is content that is dynamically generated. For that we need to use WordPress’s built in functions.
<html>
<head>
</head>
<body>
<!-- This is the WordPress Loop. It is responsible for posting content on the page -->
<?php if (have_posts()):
// This function belowm is responsible for iterating through the posts
while (have_posts()): the_post(); ?>
// This still won't render anything
// Custom Code Here
<?php
endwhile; ?>
<?php
endif; ?>
</body>
</html>Code language: HTML, XML (xml)Let’s explain what this code does. First it checks whether there are any WordPress posts. If there are any posts then it will iterate through each post and then executes code. If the current page is a single page it will execute the code inside the while-loop once. For pages that have more than one post such as archives or category pages
Let’s add more code so that the pages have something to display. The PHP lines that we added are called template tags.
<html>
<head>
</head>
<body>
<!-- This is the WordPress Loop. It is responsible for posting content on the page -->
<?php if (have_posts()):
// This function belowm is responsible for iterating through the posts
while (have_posts()): the_post(); ?>
// These lines will render the code
<h3><?php the_title(); ?></h3>
// This function displays the actual content
<?php the_content(); ?>
// This link
<?php edit_post_link(); ?>
<?php
endwhile; ?>
<?php
endif; ?>
</body>
</html>Code language: HTML, XML (xml)This is what it looks like now. It is barebones, but it generates dynamic content. We can even edit the post by clicking link.
Now let’s add some styling. Let’s open up style.css and add the following code:
body {
background: #21759b;
}Code language: CSS (css)Let’s also add the following inside the head tag:
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />Code language: HTML, XML (xml)This is what the index.php now looks like:
And this is what style.css now looks like:
After refreshing the page. This is what the site will look like:
Let’s modify these files further.
Here’s index.php
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="<?php echo esc_url( get_stylesheet_uri() ); ?>" type="text/css" />
</head>
<body>
<!-- Bootstrap Menu -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><?php bloginfo( 'name' ); ?></a>
</div>
</nav>
<div id="header">
</div>
<!-- This is the WordPress Loop. It is responsible for posting content on the page -->
<div class="container flex-container">
<div class="content">
<?php if (have_posts()):
// This function belowm is responsible for iterating through the posts
while (have_posts()): the_post(); ?>
<div class="col-md-4">
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php wp_link_pages(); ?>
<a href="<?php the_permalink(); ?>">Click Here</br></a>
<?php edit_post_link(); ?>
</div>
<?php
endwhile; ?>
<?php
endif; ?>
<div>
</div>
</body>
</html>Code language: HTML, XML (xml)And here is style.css
/*
Theme Name: Our WordPress Theme
Description: The first WordPress Theme we will be creating
*/
.flex-container {
display:flex;
}
.content {
display:flex;
}
#header {
min-height:800px;
background-image: url("bg-pic.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}Code language: CSS (css)And this is the end result:
Conclusion
We’ve covered the basics of how to create WordPress themes. Although our tutorial does not cover more advanced concepts, it covers the basic building blocks of theme creation. We created the necessary files, learned how to use the WordPress loop, and we learned how to use template tags. With the foundation we’ve provided, you’ll be able to create more complex themes. So where to proceed from here? One answer is the WordPress Theme Handbook. But a better answer is, practice. Practice creating themes and enhancing them, little by little. if you don’t know something, search it up. This way, you pick up knowledge and experience.
That’s all for the tutorial. We hope you learned a lot.
