Develop a WordPress Theme from scratch — Part 1
Note: This is a basic 3 parts article on how to build a WordPress theme. All its purpose is to give you a basic understanding of building a theme. This article assumes you already have experience with WordPress.
In the past 2 years, on top of my professional full-stack developer position, I have been developing websites for personal clients as a freelancer. While some of them were systems like a management system or custom systems most of them were personal websites that were built with the WordPress platform.
believe it or not, most of the clients asked to use WordPress.
When I start using WordPress I had no idea what the platform is and how to handle it correctly. I learned and read about it and start to built websites. I can tell you that it is pretty easy to build a simple website — the only thing you will need is a theme. For that, you can download a free one or buy one online.
So why would you want to build a theme?
The first answer to this question is — Why not?
By using a pre-built theme, what happens if the client has some changes he/she wants to make — logic wise? While using a pre-built theme is easy and saves you so much time you will find out that for making code changes, customizations or change the design you will have to go deeper and write some code (and I am not talking about CSS and JavaScript).
Moreover, most of the themes out there are too much for what your website needs (size-wise) and it makes the website to load unneeded scripts/codes and therefore to be slower.
And finally, if you really want to know how the WordPress platform designed you should build your own theme.
What are we going to build?
My friend asked me to build him a simple website where all he needs is a home-page with a full-width image, about page and a contact page. Obviously, I could build it in about an hour with the default WordPress theme or even a pre-built one or by using some kind of page builder with some plugins.
I decided to challenge myself and to build a custom theme.
The design will look something like this -
How to start?
When I decided to do it, I read online and found this great article on the WordPress template system and files hierarchy. I encouraged you to read it to.
First thing you will want to do, is to download WordPress to your computer. Next, you will need to create the wp-config.php (just copy the wp-config-sample.php file and rename it), configure the database and browse to your local URL (where the folder is). hopefully, you will see this screen.
Go ahead and install it. On you IDE (or wherever you handle the website files) you can go to wp-content->themes. There you will see all the themes you currently have. (Should be 3 for now — twentynineteen, twentyseventeen and twentysixteen)
To create a new theme the first thing you need to do is to create a new folder under the themes folder and add a style.css file and an index.php file. So let’s create a new folder, I will call it my-theme. Inside the newly created folder create an index.php file and a style.css file and past that content to it.
Feel free to change the values for your needs. For now, you can leave the index.php file empty.
Once all set up, browse to your website admin dashboard and head over to Appereance->Themes. (You might need to refresh the browser). Once refreshed, you will be able to see a new square with our theme name on it.
Go ahead and activate the theme. Once you did it when you will browse to your home-page you will see a blank page.
Adding important functionalities
At this point, some basic functionalities are missing on the dashboard such as — menus, site logo, and upload post’s featured image. Let’s go and add them. Let’s create a functions.php file under our theme folder (same hierarchy as index.php and style.css) and add some actions to it.
// Register custom logo
function register_my_logo() {
add_image_size('my-site-logo', 160, 90);
add_theme_support('custom-logo', array(
'size' => 'my-site-logo'
));
}
add_action('after_setup_theme', 'register_my_logo');
// Register menu
function register_my_menus() {
register_nav_menus(
array(
'main-menu' => __( 'Main Menu' )
)
);
}
add_action( 'after_setup_theme', 'register_my_menus' );
// Add support for featured image
function register_post_thumbnails() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'register_post_thumbnails' );Those 3 actions will give us the ability to: upload a logo under the customize option, add a menu and add a featured image for a post/page.
The last thing we want to do is to go to the admin dashboard->settings->permalinks and select the Post name. This choice will let us have pretty links for our website.
The next thing we will need to have is an index.php file, create the website pages and the menu, add aheader and a footer for our website and content to be displayed on the pages.
We will go into it on our next part of “Develop a WordPress Theme from scratch — part 2”.
