64x64 icon dark hosting
Get a Tuts+ subscription for just $45! Deploy New Relic now to claim.
Advertisement

Mobile WordPress Theming: Day 3

by
This post is part of a series called Mobile WordPress Theming.
Mobile WordPress Theming: Day 2
Mobile WordPress Theming: Day 4

Welcome to the latest installment of Mobile WordPress Theming. Last week, we created the HTML version of the WordPress theme that we will be creating in this tutorial. By the end of this tutorial, we will have a basic WordPress theme that can be applied to any existing WordPress site. Next week, we will package and finish it. Let's get right down to it!

WordPress Theming Mindset

For those readers not familiar with creating WordPress themes, before you start theming you need to understand some fundamental principles of how WordPress works. WordPress is a blogging framework. It is designed to serve content to the user in the most flexible way possible. WordPress stores your content and gives you the tools to serve it how you wish. By "skinning" the data WordPress serves, a process also known as "theming," you can distinguish the look and feel of your blog. Whenever you want to change or enhance a WordPress site, you should either write a plugin or create a theme. Plugins are appropriate if you're changing or adding basic WordPress functionality. However, if you want to modify the style of WordPresss, then either edit or create a theme. Do not just edit core WordPress code directly. This will likely mess up WordPress, especially when you need to update versions later.

Starting Naked

Unless you're being extremely innovative and unique, almost all WordPress themes share the same foundation. They all need a header, a body, a footer, basic styling, etc. That being said, instead of reinventing the wheel, we will use a 'naked theme.' As the name suggests, a naked theme is the most barebones possible. Generally, there is very litle styling besides resets and the occasional useful snippet that you'll likely use in your project. There are plenty of varieties of naked themes on the net. So depending on the project, you might decide on a different one. There is no best naked theme. For this project, I decided to use WordPress-naked. You can grab a copy over at their Google Code page. For a great collection of naked themes, you can also visit speckboy.com's article.

 

wp-naked

Installing WordPress

Now we need a WordPress installation to theme. You can either install one on your server if you have one, or install it locally.

Server

If installing locally, make sure you have a local testing server. For Windows, WAMP or EasyPHP are good choices. If on linux, check out XAMP. If on a Mac, check out MAMP. For this tutorial, we will be running MAMP.

mamp

WordPress

Just go to WordPress.org to download the latest version of WordPress.

download wp

Install WordPress on Server

Copy the WordPress directory into your server directory and install. This isn't a tutorial about installing WordPress. There are plenty of tutorials that do that already like this one.

After you have WordPress installed, copy the naked theme directory into the wp-content/themes directory. Then log into WordPress, go to Appearance > Themes and select the naked them.

"Clothe the Theme"

Now that we have the theme active, we can make changes to it and see them right away. First, change the theme information which is located in the top of style.css. This is where you declare the theme name, author, etc. In this case, I modified it as follows:

Header

WordPress first looks at the index.php file in the theme directory. This file is how the rest of the theme files are incorporated. If you look at it, you'll see it first grabs all of the content from the header. That is where we need to start. Start by deleting everything from the Doctype down to the </head> tag, and pasting in the following:

This is copied straight from the head of what we did last week, except for two things. You'll notice that any links to JS, CSS, or Image files have been prepended by the template url PHP snippet. This is a WordPress function that will echo out the URL of the template file. This will help fix any problems we would have with linking to static files, because now we have dynamically linked to them. Secondly, you'll notice that we linked to a stylesheet instead of putting all of our styling directly into our header. This is just for neatness' sake. That being said, if you are following along with files of your own, make sure that you copy and paste the styling into style.css

first look

As you can see, just by adding the header links, jQTouch is already working its magic.

Styling

As mentioned earlier, we dumped all of the styling into a stylesheet. We can also remove the presets that the naked theme came with. When all is said and done, the stylesheet should look something like this:

This is almost exactly what we created last week. We will add styling here if we need any further customizations.

Index.php

Again, index.php is the file that incorporates the rest of the theme files. So first, we need to call the header.php file. It's pretty simple:

Now we can start pasting in from last week's snippets again. We will begin with the body:

We stopped before the blog menu item for a reason. We don't want the blog item to be an option if we do not have any posts, so we'll need to introduce some more WordPress PHP here:

Basically, we are checking if we have posts with the have_posts() function, and if we do we are displaying the menu item. If we don't, we do not display anything. We probably could get away with just leaving out the else tag as well, but I want to show that if you wanted to put something there like "No blog posts right now" you could. Then we just end the IF statement

Now we can paste in more of last week's content:

We stopped again because we are adding something else this week too. Last week, we demonstrated the AJAX capabilities of jQTouch by grabbing the blog.html and loading it. Now that we are integrating with WordPress however, it is much simpler to just use a same page anchor tag. So we integrated the blog portion into the index.php page.

What we are going to do is first, check to see that we have posts again. Then, we will initiate a while loop and will create an unordered list item for every blog item. Inside this loop, you can see we used some more WordPress template functions. They are all pretty self-explanatory. For the time, M is a shortcut for a three letter abbreviation of the month, and j represents the day number without the leading 0 (i.e. 9 not 09).

Then the rest of the page:

At the end we include a footer file. For this theme, the footer file isn't used, so we really don't need it. But I'm leaving the theme open ended so we'll include it anyway. For this theme, we will only want the <html> tag in there.

index

blog

PHP Remove P From Content

As you might have noticed. The excerpt text for the blog articles is larger than it should be. The reason is because we used the_content() function, which wraps the excerpt in an additional p tag. How do we fix this? We need to add one line to the top of the index.php file:

blog again

Wrap Up

Now everything looks right. But there's still a lot more things to cover like individual posts, search, pagination, and comments before this is a complete and useful theme! I hope you learned a lot, and make sure you check out the final post in this series next week!

Advertisement