Create a WordPress theme with Mobile Web Templates
From Forum Nokia Wiki
This article explains how to create a WordPress theme by using Nokia's Mobile Web Templates.
Contents |
Description
Mobile Web Templates are a series of custom, tested mobile web styles and components optimized for high-end, mid-range, and low-end devices.
This article will use the Mobile Web Templates for Low-End Devices, but the same steps and considerations will be valid for Mid-Range and High-End Mobile Web Templates.
WordPress is a popular free blogging platform, that allows to create a blog in few, easy steps. WordPress is built using the PHP programming language, and a basic knowledge of PHP is necessary in order to create themes.
In this article, the WordPress 2.8.4 version will be used, freely downloadable from the WordPress website.
WordPress themes
Themes are used in WordPress to allow the customization of the blog's style, and to choose how and which content should appear on blog's pages. This article focuses on the creation of a WordPress theme that is suitable and optimized for mobile devices' displays and characteristics.
Detailed information about WordPress themes' development is available here: WordPress Theme Development.
Introductory information about Themes usage is available here: Using WordPress Themes.
WordPress plugins
WordPress plugins are additional components that can be easily installed in WordPress, in order to add extra and custom functionalities. In this article, a WordPress plugin will be used in order to detect mobile devices, and so to serve them the right mobile theme.
More and detailed information about WordPress plugins are available here: WordPress Plugins
Serve the mobile template to mobile devices
WordPress, by default, uses a single theme for all browsers accessing the blog, regardless if they are desktop or mobile browsers. In this case, the desired behavior to achieve would be to serve a different, optimized theme only to mobile devices, leaving the main theme served to all the desktop browsers. It is possible to add this kind of functionality to a WordPress blog by using different plugins.
The WordPress Mobile Pack plugin
In this article, the WordPress Mobile Pack will be used. The WordPress Mobile Pack is a plugin developed by dotMobi, and is freely available here: WordPress Mobile Pack.
In order to follow this tutorial, it is necessary to download and install the WordPress Mobile Pack plugin.
Once installed, it is necessary to activate the WordPress Mobile Pack plugin from the WordPress console, as shown in the following picture.
After a successful installation, the plugin will add 3 new options in the WordPress "Appearance" menu.
The 3 new admin panels are:
- Mobile theme: this panel allows to choose some general setting about the blog content and appearance when browser on a mobile device (e.g.: image shrinking, maximum number of posts)
- Mobile widgets: allows to choose which widgets will be visible in the mobile theme
- Mobile switcher: here it's possible to choose which theme must be used for mobile devices, and how to perform device detection (by using User Agents or a different domain)
Create the WordPress theme
Themes are located in subdirectories of the wp-content/themes/ WordPress folder. In order to create a new theme, it is necessary to create a subfolder, that will contain all the theme's files. In this article, the 'forumnokia/' folder will be created and used.
The minimal theme file structure
A typical, minimal WordPress theme is composed by the following files:
- index.php: contains the main portion of your WordPress blog, that is the part containing the posts
- header.php: this is top part of every page of your WordPress blog, and will typically contain the title, the Blog logo, meta tags, CSS/JavaScript inclusions, and similar things
- sidebar.php: the sidebar element typically contains all the blog's menus, including links to categories, archive pages, single blog posts, and the search box
- footer.php: this is the bottom part of your WordPress blog, typically containing credits, and related links and information
- functions.php: this PHP file can contain any helper functions that can be used from your theme PHP scripts
- style.css: this is the default CSS file of a theme
Now, let's create all these files in the 'forumnokia/' folder already created. The final files structure is visible in the following picture:
The following subsections show and explain how to implement a basic structure for each of the files listed above.
The header.php file
The header file defines the top part of the blog pages' structure. The following code uses some WordPress functions to retrieve and display some useful information about the blog, as its name and description. These functions are:
- bloginfo('stylesheet_url'): prints the URL of the blog CSS file (style.css)
- bloginfo('name'): prints the blog's name
- bloginfo('description'): prints the blog's description
- bloginfo('stylesheet_directory'): prints the blog's default stylesheets folder
- get_option('home'): return the URL of the blog's home page
<?
echo "<?xml version='1.0' encoding='UTF-8'?>";
?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/low/reset-low.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/low/baseStyles-low.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
In the above code, the stylesheets of Mobile Web Templates for Low-end devices are imported, with these tags:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/low/reset-low.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/low/baseStyles-low.css" type="text/css" />
So, it is necessary to create a 'low/' subfolder in the theme main directory, and then to upload there the 2 CSS files shipped with the Mobile Web Templates for Low-End devices. Then, also the default CSS is imported, as it'll be used to add some custom CSS rules:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
In the header.php code, the wp_head() function is used: wp_head() is a Plugin API Hook, that needs to be included in your theme to make external plugins properly work. More information about API Hooks is available here: WordPress Plugin API Hooks
The footer.php file
The footer represents the bottom part of all the blog's pages. It is so useful to add some information like credits and related links.
<div id="footer">
<p>Designed for <a href="http://wiki.forum.nokia.com">Forum Nokia Wiki</a></p>
<?php wp_footer(); ?>
</div>
</div>
</body>
</html>
In the above code, we find another Plugin API Hook: the wp_footer() function, that must be executed after all the other PHP code.
The sidebar.php file
A blog's sidebar typically contains the blog menus and links. Since we're building a theme for a mobile device, it is necessary to display only the strictly necessary information, leaving out all the extra things that would overload the page. In this article, only the links to blog categories will be displayed:
<ul>
<?php wp_list_categories('title_li=' . __('Categories:')); ?>
</ul>
More information about sidebar customization is available here: WordPress Sidebar Customization
The index.php file
The index.php file represents the main body of the blog's pages. So, it must display the list of posts or, if selected, the current blog post. To do this, the following WordPress functions are used:
This file also includes the header, footer and sidebar files, by using the get_header(), get_footer() and get_sidebar() WordPress functions.
<?php get_header(); ?>
<div id="content">
<?php while ( have_posts() ) : the_post() ?>
<h2 class="entry-title">
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<div class="post_content">
<div class="entry">
<?php
if(is_single())
{
the_content('Read more');
comments_template();
}
else
{
the_excerpt();
?>
<a href="<?php the_permalink(); ?>">Read full post</a>
<?php
}
?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
In order to display the blog posts, functions of the WordPress Loop are used. "The Loop" is the main WordPress process, that allows to loop through and show posts. The used functions include:
- have_posts(): loops through blog posts, and returns if another post is available
- the_post(): this function selects the current post, and makes it available to be used inside the while loop
- the_content(), the_permalink(), the_title(): all these functions show pieces of information about the currently selected blog post
- comments_template(): used when a single post is shown, in order to show the comment template
In index.php a conditional tag is used, in order to check if a single post page is being displayed. More information is available here: WordPress Conditional Tags.
- is_single(): used to check if the page must show a single post
For the purposes of this article, the index.php is kept quite simple, but a lot more customization can be added and used.
The functions.php file
In the sample theme built in this article, we do not need to define any helper functions, so we can leave the functions.php file empty.
The style.css file
The style.css file will contain the CSS customization added to the Mobile Web Template styling. In our case, only few rules need to be defined to make the theme look properly:
html, body
{
font-size: small;
}
body div#header
{
height:auto;
}
a
{
text-decoration: none;
}
h1 a:link, h2 a:link
{
color:#ffffff;
}
h1 a:visited, h2 a:visited
{
color:#ccccff;
}
h1 a:hover, h2 a:linhoverk
{
color:#ffcccc;
}
h1 a:active, h2 a:active
{
color:#ccffcc;
}
Add meta information to your theme
Now that the theme is ready, some meta information about the theme (name, author, website) need to be added, and this is done by adding the following block at the beginning of the style.css file:
/*
Theme Name: Nokia Mobile Web Templates
Theme URI: http://wiki.forum.nokia.com
Description: Sample theme realized by using Nokia Mobile Web Templates
Version: 1.0.0
Author: Alessandro La Rosa, jappit
Author URI: http://www.jappit.com
*/
Once done, you'll find the newly created theme in the "Appearance" -> "Themes" panel, as shown below.
In order to add the preview of the new theme, a screenshot image, named 'screenshot.png' and with the dimension of 300x225 pixels, must be uploaded in the theme folder.
Select the mobile theme from WordPress console
Let's get back to the WordPress admin console, and go to the "Appearance" -> "Mobile Switcher" panel.
Here, select as Mobile Theme the theme just created, here called "Nokia Mobile Web Templates". All the other options can be left with their default values.
Test the blog on a mobile device
Now that all is ready, it's actually possible to test the new theme directly on a mobile device. A screenshot of how the blog appears on a N97 device is shown below.
You can check out the realized theme in action by pointing your mobile browser to: http://www.jappit.com.
Downloads
The theme developed in this article is available for download here: Mobile Web Templates WordPress theme
Related Wiki Articles
No related wiki articles found
