When you’re starting developing with WordPress, you might find yourself browsing through so many tutorials. Since there are a lot of tutorials, you’re starting to learn advanced topic before you understand the basics. In this tutorial, you will learn how to create a simple custom WordPress theme.
I won’t show the CSS in this post, so you can easily copy the entire CSS for the
style.css here. If you want, you can just watch each video and see how I have implemented everything & also written the CSS from scratch (some of it).
Starting the Custom WordPress Theme
When starting a theme, you need to go into
wp-content/themes and create your theme folder. When you’re done with that, you also need to create two mandatory files
style.css you only need the Theme Name so WordPress can find your theme and list it so you can also activate it.
Your First index.php
So, what goes inside the
index.php? Just think of everything you would put in a simple HTML file when starting a website. You can do that also there but be sure to include functions
Displaying Posts inside the Index.php
For displaying posts you will need to use The Loop. That is the most important thing when you’re developing a custom WordPress theme since that is how you will show the content.
To display the content of each post you will have to use Template Tags. Here is a simple way on how to use the template tag
the_title() for displaying the title of each post.
CSS First Steps & Adding it to our Custom WordPress Theme
If you have copied the completed
style.css, you might have noticed that even if we have some styles in the
style.css, we don’t see that on our site. That is because that style was not added in our site.
We won’t hard code it inside our template but instead, we will use the function
wp_enqueue_style() to add it in our theme. When we use that function, we are telling WordPress to add that style in our
<head/>. How will WordPress know that? That is done inside the function
We are adding such functionalities inside the file
functions.php so, go ahead and create one. For adding functions such as
wp_enqueue_style(), we need to hook a function that will contain those inside the hook
With the file
functions.php we can do a lot more than just registering the styles or scripts. One of the first steps when creating Theme functions is to set up the theme and register menu locations and other similar things. That is done by hooking a function on the action
We can add other languages to translate our strings inside the theme by using the function
load_theme_textdomain. To add various features that our theme will support, we can use
Registering various menu locations can be done by using the function
register_nav_menus where we pass the location as the key in the array and the name of the menu as the value.
We should also set the maximum width of the content so that the user of our theme, when editing content, can see approximately how the content will be laid out.
Title & HTML5 Support
With the current setup, the browser won’t be able to show the title of the page. We can also add various HTML5 supports so some of the WordPress core templates will be rendered in HTML5 markup.
Add this next lines of code inside the function
Separating Header & Footer
We will have to use more than just one file
index.php. When creating such templates, we don’t want to copy and paste footer and header code for each template. What if the header changes? We would need to copy and paste it again.
We can help ourselves by separating the header and the footer into separate templates
Now we need to include that header and footer in our templates. Our first template is
index.php. To include them we are using the functions
This is not a finished theme yet. In the next tutorial regarding our custom WordPress theme, we will create everything else. In this tutorial we have learned just the basics. Now we need to learn how to display each post with much more content.
Have you ever created a custom WordPress theme? What were the things you like or hate about it? Please share in the comments below.