Having your website is one thing. But developing a WordPress theme is another. Why? It’s because your site’s theme is the one which brings personality to your site.
Not to mention, a WordPress theme optimized for performance like the ones seen here at Colorlib is what differentiates you from your competitors. It is what defines you and your business.
So how can you develop a WordPress theme? Yes, it might be all-technical and complicated. But worry not, because that’s just what we’re going to teach you here. Once you’re done reading, you’ll surely say that developing your WordPress theme isn’t that difficult!
1. Install WordPress
The first thing you need to do is to install WordPress. Sounds too obvious, right? Well, as simple as it sounds, it is still a big necessity. It’s through this that you’re able to build up your theme and further improve the look and feel of your site. The installation process is the core of your theme, so you don’t want to mess up with it.
Creating a “home” for WordPress
In doing this, you need to create an empty directory. It doesn’t matter which drive you put it in. As long as it has adequate space, that’s good to go. That’s where you’re going to direct your virtualhost.
Download and Unzip WordPress
Head to the WordPress’ official download page. Find the latest WordPress version and download it. Unzip the downloaded file and transfer all of the folder’s contents to the directory you’ve created earlier.
Make a WordPress Database
Now it’s time for you to create a database. But before that, you’ll find that there’s no pre-installed phpMyAdmin. To get it, download SequelPro if you’re a Mac user, or SQLYog if you’re running in Windows. Once done downloading, go to the database and login. You can find it in 127.0.0.1. The username and password are both “root.”
Inputting
After logging in, you then need to enter a few important things such as your email address, username, and password. You’ll then be brought to the /wp-login.php. Type your URL in the address bar, and you’ll see “Hello, World!”.
2. Create a Custom Theme
All of the things you’ve done in WordPress are stored in the wp-content folder. And most of them are in the form of codes, so you don’t want to tweak them up as it’ll surely turn corrupt.
Go to your themes folder by entering wp-content. You’ll then see WordPress’ default themes, twentyfifteen, twentyfourteen, and twentythirteen. Make another directory where you’re going to store your theme. Input the theme name, the author, and the theme description.
Then move the two Bootstrap codes to the custom theme folder. These are the blog.css and index.html. Then rename index.html into index.php.
And you’re theme has just been created! Activate it, open your main URL, and click refresh.
3. Divide Pages into Different Sections
Now is the time for you to further enhance your theme by making sure that the header, footer, and sidebar are all in adherence to your preferences. Divide the index.php to four different sections namely, footer.php, header.php, content.php, and sidebar.php.
Header
Make sure that <!DOCTYPE html> and the main blog header are stored in the header file. It’s where you’ll find the different head styles and top navigations features for your site. Everything’s already settled, but you just want to add little toppings to it. Simply add <?php wp_head90; ?> prior to the closing </head>.
Footer
Add the JS links and <?php wp_footer90; ?> before the </body. Also put the header .container div close to the folder.
Sidebar and Content
The sidebar is where you’re going to place the tags, ads, categories, and archives. Make sure that it’s properly arranged and doesn’t ruin the whole user-interface interaction. The content is where all the main content of your website goes. Make the formatting intelligible, clear, and interesting at the same time.
4. Tweak the Main Settings
Configure your theme’s main settings. This will be crucial for pulling in posts and pages later on. What you want here is to make your <title> and <h1> changeable. To do this, go to Settings located in your dashboard, and click General. Set up your title there.
Then change the title tag and h1 tag in your header.php to:
<?php echo get_bloginfo( 'description' ); ?>
Add this code to enable you to return to your homepage every time you click the title:
<a href="<?php echo get_bloginfo( 'wpurl' );?>"><!-- site title --></a>
5. Finalize the Menu and Pages
Now that everything’s looking good, you then want to take on the finishing bits which include the Posts and Pages. Making each page and post customizable is a necessity, and that’s just what you want to do here. By editing the navbar, you’re enabling the links to direct to the different pages.
Find this code in the header.php, and change it to whatever you feel will improve your site’s interactivity:
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="#">Home</a>
<?php wp_list_pages( '&title_li=' ); ?>
</nav>
</div>
</div>
Page
The last thing you need to do is to make the pages look different than the blog posts. You want the pages not to have any sidebars. Do this by creating page.php which looks similar to index.php. The only difference is that it’ll have a 2-wide grid instead of the 8-wide and 4-wide content and sidebar of the blog posts.
And there you have it. You’ve just developed your WordPress theme!
Additional tips (and conclusion)
Developing a theme for your WordPress site isn’t that difficult. All you need to have is the right technical know-how, consistency, and of course, the unwavering determination to finish what you’ve started with style.
Also, since we’re on the topic of developing a stylish WordPress site to edge out your competitors, I suggest subscribing to the best possible web hosting provider. It doesn’t matter if you have the most beautiful looking site in the world if it doesn’t load fast and is only inaccessible.
Therefore, the performance of your site depends on the quality of the servers where you hosted it. There are lots of hosting providers to choose from out there. However, if there’s one hosting that I highly recommend, then I suggest that you visit Interserver HQ and find out more about their fast loading times and excellent customer support.
Hopefully, this article did just those to you. Till then, happy WordPress theme-developing, mate!
Author: Christopher Jan Benitez
Content marketer during the day. Heavy sleeper at night. Dreams of non-existent brass rings. Writer by trade. Pro wrestling fan by choice (It’s still real to me, damnit!). Family man all the time.