Mobile wordpress theming: day 3

GFX9.COM share Mobile wordpress theming: day 3, you can download now.



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:

/**
  Theme Name: MyTouch
  Theme URI: http://www.connorzwick.com
  Version: .9
  Author: Connor Zwick
  Author URI: http://www.connorzwick.com
  Tags: simple, mobile, jqtouch, ajax
  Licence: GPL
  
  Description: A theme created with felixibility in mind. Allows anyone to choose as mobile theme.

*/

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 tag, and pasting in the following:



    
        
        <?php if(is_home()) bloginfo('name'); else wp_title(''); ?>

	
		
        
        
        
        
        
		
       
    

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:

/**
  Theme Name: MyTouch
  Theme URI: http://www.connorzwick.com
  Version: .9
  Author: Connor Zwick
  Author URI: http://www.connorzwick.com
  Tags: simple, mobile, jqtouch, ajax
  Licence: GPL
  
  Description: A theme created with felixibility in mind. Allows anyone to choose as mobile theme.

*/

 body.fullscreen #home .info {
        display: none;
    }
    #about {
        padding: 100px 10px 40px;
        text-shadow: rgba(255, 255, 255, 0.3) 0px -1px 0;
        font-size: 13px;
        text-align: center;
        background: #161618;
    }
    #about p {
        margin-bottom: 8px;
    }
    #about a {
        color: #fff;
        font-weight: bold;
        text-decoration: none;
    }
	/*Begin Customization Here*/
	.blog-title{
		border-bottom: 1px solid #333333;
	}
	span.blog-title{
		color: #fff;
		width: 100%;
		display: block;
		padding-bottom: 10px;
	}
	.post-description, .post-author{
		font-size: 12px;
		margin-left: 75px;
	}
	.post-description{
		min-height: 75px;
	}
	.post-author{
		margin-bottom: 3px;
	}
	.post, .page-author{
		font-size: 13px;
		color: #fff;
		margin-bottom: 5px;
	}
	#blog .rounded li{
		position: relative;
	}
	.month{
		position: absolute;
		width: 70px;
		text-align: center;
		background: #aa3939;
		color: #f5f2f2;
		line-height: 28px;
		padding-bottom: 5px;
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	.date{
		position: absolute;
		width: 70px;
		margin-top: 25px;
		font-size: 40px;
		text-align: center;
		background: #f5f2f2;
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

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:


	

WordPress Site

About

    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:

    
    
    
        
  • Blog Articles 12
  • 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:

    
    
    	 
  • Pages 2
  • External Links

    Add this page to your home screen to view the custom icon, startup screen, and full screen mode.

    Mobile Theme
    Version 0.1 beta
    By Connor Zwick

    Push your content across more boundaries to all internet connected mobile devices
    using the world famous WordPress CMS and JQTouch.

    @connorzwick on Twitter



    Close

    Site Pages

    Home

    Pages

    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).

    Blog

    Home
    This is a short description of blog. Here you describe the purpose.

    • Read More')); ?>

    Then the rest of the page:

    
    

    Site Pages

    Home

    Pages

    Site Pages

    Home
    • Post Title

      By: Connor Zwick

      This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.This is a short description. Here will be a short excerpt of the post, for the viewer to judge if he or she wants to read more.

    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 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!




    submit to reddit