In Part 1 of this series, we created a really minimal WordPress theme consisting of nothing but a directory and two empty files.
In this post we will add few more details, but not too many, to Really Minimal.
This is how Really Minimal looks like in its own folder. Note the file sizes.
It is time to make Really Minimal less minimal by adding few details to it. In order to improve how Really Minimal is displayed in the Themes browser within WordPress 3.5, we are going to edit style.css and add to it a header section with few entries. Here is the code.
|
1 2 3 4 5 6 |
/* Theme Name: Really Minimal Author: Marco Ghislanzoni Version: 1.0 Description: A really minimal Wordpress theme */ |
With this minimal header added to style.css and with index.php still being totally empty, this is how WordPress displays our theme in the Theme browser. This is a substantial step ahead respect to the very first version! Now we have a real title, an author, a version and even a description. The theme image is still blank though. We will fix this in Part 4.
Now that style.css has been taken care of, we need to give some attention to index.php. While our Really Minimal theme works perfectly and can be activated, it doesn’t display anything at the moment. The reason is that WordPress calls indeed our index.php when attempting to display a post (or any other page for that matter), but since it is empty no HTML code whatsoever is produced. The result is a blank page. Let’s do something about it.
The first thing we could do is to add some static HTML content to index.php.
|
1 2 3 4 5 6 7 |
<html> <head> </head> <body> Welcome to my Really Minimal Wordpress site! </body> </html> |
This will indeed work and will display something on the browser screen, however it is very far from any WordPress related content.
We would rather like to add some dynamic content generation to index.php, namely some (minimal) code capable of displaying a WordPress post. Here is how to edit index.php to display a list of post titles.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> </head> <body> <?php if (have_posts()) : while (have_posts()) : { the_post(); the_title(); echo( ‘<br />’ ); } endwhile; endif; ?> </body> </html> |
All we have done is adding some basic HTML markup to create a valid HTML page and executing the classical WordPress loop within the body. The loop cycles through the available posts and print their titles. Since we are testing our code on a default WordPress installation, there is only one post available titled “Hello world!” and therefore this is all is being displayed at this point.
We could also modify the loop to display the post content along with the post title. Here is the code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<html> <head> </head> <body> <?php if (have_posts()) : while (have_posts()) : { the_post(); the_title(); echo( ‘<br />’ ); the_content(); echo( ‘<br />’ ); } endwhile; endif; ?> </body> </html> |
With this much achieved, we can definitely take a well deserved break!
In Part 3 we will see how to add a header and a footer, while in Part 4 we will finish our theme with a sidebar and, why not, a theme image. Until then, take care!
2 responses to “A really minimal WordPress theme – Part 2”
Hi. I really found your minimal theme helpful. I have been learning how to create my own theme and the other tutorials are too complicated and they often present different coding, which makes things confusing.
I currently have my header, footer and i believe my style page working, however I cannot load content onto pages from text editor.
I want to do a postinging thing, but not on front page.
so: what is the minimal coding on a template to create content, other than the get header and get footer things?
Mike
Hi Mike,
if I understand correctly what you want to do, there is any easy solution. Proceed as follows:
1) Create a new page for your site through Pages –> Add New. Give it a name like “My Front Page”. The permalink doesn’t matter because we will make this the home page for the site.
2) Fill in the page content with what you would like to appear on the front page of your site
3) Go to Settings –> Reading and choose “a static page” under “Front page displays”. Then select your “My Front Page” from the first drop-down menu, the one named Front Page.
4) This is it! Now “My Front Page” is the static home page for your site.
If you still want a page with all your blog posts (this is unclear to me from your question), you can simply go on and create another empty page called, for example, “Blog”. Edit its permalink to make sure it is “blog”, then link to it from the front page with http://www.mysite.com/blog.
Hope this helps! 🙂