Tip:
Highlight text to annotate it
X
If you’re new to WordPress (Wordpress development *** 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 a Wordpress theme 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.
Disclaimer
You CAN’T use the post as a tutorial for creating a full-fledged Wordpress theme, though
I’m going to create such a tutorial and it’ll be published sometime in the near
future.
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:
local server or access to your FTP server; installed Wordpress;
HTML/PHP editor; a cup of tea/coffee (optional).
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”.
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:
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!
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.
We’ll just take our basic HTML layout from here And it looks like this:
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):
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,
you 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, 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.
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
Header
The code that starts our HTML file and creates the actual header is as follows:
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:
Save your modifications.
At this point, your index.php file should have the following code:
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:
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:
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:
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: Content Area
And the last but not least, we’re going to learn how to show the actual content from
your blog (blog posts). The point is that it’s the most advanced chunk of code that
we’re gonna deal with today, but you just need to copy and paste (I believe copy&paste
deserve a holiday or something). You just need to use this code instead of the “Content
goes here” dummy text that you got in your index.php file:
Save your changes.
The chunk of code just shows your blog posts on the home page. Again, I’m not going to
go into detail here because the aim of the post is just to give you a general idea but not
a HTML/CSS/PHP crash course. :)
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 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 in the current tutorial, it’ll be way easier for you to
follow along when you start working on a real life Wordpress theme.