How to Create Simplistic WordPress Themes

Wordpress logo

If you’re new to WordPress (WordPress development virgin as some say) and you consider the job of a WordPress developer, you may have the question about how exactly WordPress themes work and how they are structured. In other words, you just want to get a general idea about the whole shebang. Does that sound like you? Keep on reading in that case. And one more thing actually. This post is not about how to build simplistic WordPress themes from top to bottom. The aim of the post is just to give you a general idea so that you know what you’re doing and learn more later.



[error_box title=”Disclaimer”]

You CAN’T use the post as a tutorial for creating a full-fledged WordPress theme because this tutorial only shows how to dynamically load the header, sidebar, and footer, but it does not show how to load blog posts.
[/error_box]

What we’ll do and what you need

So, I’m just going to take a really simple HTML layout and make a simplistic WordPress theme out of it. If you’d like to follow along, you need to make sure that you have the following things handy:

[list type=”check”]

[/list]

Once everything is set up and good to go, you need to go to your folder with WordPress, open the “wp-content” folder and then go to the “themes” folder. That done, you should create a folder where you’re gonna keep your new theme. I’ll call mine “simplistic”. Well, that’s because we’re learning how to create simplistic WordPress themes here, right? :)

The first step in giving birth to a WordPress theme is creating your CSS file. So, you need to create a CSS file in your “simplistic” folder and call it style.css With that thing done, copy and paste the following code in your style.css file and save it:

/*
Theme Name: WebDeSimplistic
Theme URI: http://wordpress.org/extend/themes/toolbox
Author: Ken von Rauch
Author URI: http://webdesy.com
Description: A simplistic theme (very simple in other words) just for educational purposes, primarily WebDesy.com's tutorials.
Version: 0.1
License: GNU General Public License
License URI: license.txt
Tags: simplistic
 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
 
/* =Structure
-------------------------------------------------------------- */

[icon_keyboard] A few comments regarding the code above. You may want to change the name of your theme. I called my theme “WebDeSimplistic”. It’s up to you what you nae yours. Be creative! :) Other than that, you may also change your “Description” and “Author URI” lines.

[message_box title=”The Layout”]
Now we need some HTML to build our WordPress theme. To make things really simple and easy, we’re going to use an HTML layout that has the same main components of just about any WordPress theme, such as the header, sidebar, content area, and footer.
[/message_box]

We’ll just take our basic HTML layout from here . It looks as follows:

HTML Layout

Now create a new PHP file (in your “simplistic” folder, call it index. You can just copy the following HTML snippet (piece of code if you translate that from geek speak) and paste it in your brand new index.php file (and make sure to save your changes):

<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>

Now you can just go to your WordPress admin panel, roll over the “Appearance” drop down menu and select the “Themes” option. That done, you should see a new theme in your theme collection. In my case, the new theme is called “WebDeSimplistic”. By the way, as you most likely have noticed, your theme does not have a screenshot thumbnail, but that’s Ok. It won’t harm your theme’s performance in any case. I have not included adding a screenshot in the tutorial to keep things as simple as possible.

If you click the “Active” link under your theme and refresh your browser window (F5 or Ctrl+F5 for Windows), you’ll see your new design. Don’t be too tough on yourself. You’re just learning to do that. It looks awesome, sorta. :)

As a matter of fact, you just see plain HTML now and that’s not exactly how WordPress works. But no panic! We’ll fix it now. The secret of WordPress (and other CMSs for that matter) is that it loads different portions of its design from different files. And that’s exactly what I’m going to show you now.

[alert_box title=”Divide and Conquer”]
We’re going to break our html code into a few chunks and load them from different files to the main one, which is index.php
[/alert_box]

Header

The code that starts our HTML file and creates the actual header is as follows:

<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

So, you need to cut that code from your index.php file, create a new file (call it header.php) in your “simplistic” folder, and paste the copied code right in that file. Be sure to save your changes.

Now, instead of the HTML code that you cut from the index.php file, you need to put this PHP code:

<?php get_header();  ?>

Save your modifications.

At this point, your index.php file should have the following code:

<?php get_header();  ?>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>

And if you refresh your browser window, you still should see your really amazing theme, but behind the scenes the header portion is being loaded from an external file that we called header.php You can’t see the magic but it’s actually there. :)

Sidebar

Now we need to cut our menu code from the index.php file:

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

At this point, you should just create another file in your “simplistic” folder. Make sure to name the file “sidebar.php” Once done, just paste the code that you can see above in the sidebar.php file. Again, save it.

Now go back to your index.php file and insert the following PHP code instead of the HTML one that you used to have there:

<?php get_sidebar();  ?>

And save your changes as always.

Footer

And the last chunk of code that we need to move to another file is the one that creates the bottom portion of our layout. I am referring to the footer. So, you just need to cut the following code from your index.php file, create a new php file in your “simplistic” folder, call the new file “footer.php”, and paste the code right in there:

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>

Save the footer.php file.

Now go back to your index.php file and put the following PHP code where you had the HTML for your footer:

The screencast

In case you really just like watching video tutorials, here you go. The same (just about) stuff with moving pictures and sound. No music though because you’re listening to your own music while watching screencasts, right?

What you learned and what you can do with it now

Now that you know how to create simplistic WordPress themes are structured and operated on the basic level, you are ready to take your skills to the next level and get to know how to actually create a full-fledged version of a WordPress theme (with all appropriate files and tags). Since you’ve got the basic idea from the current tutorial, it’ll be way easier for you to follow along when you start working on a real life WordPress theme.

[icon_twitter] If you liked the post and think that it’s worth your while, share it with your followers and friends. You can just use the social box on the left. Thanks.

Print Friendly

Kenneth

I love blogging about web design, web development, and SEO. In other words, all things web. I strongly believe that WordPress combined with clever SEO is the best solution for most site owners on the Web.

More Posts - Pinterest

Comments