Web Development Blog » WordPress

Professional Mobile Themes for WordPress

eisabai — Sat, 25 Jun 2011 22:00:30 +0000

A lot of people have emailed and asked me for ready-made mobile themes that they can easily install on their WordPress blog so I have decided to put together four of my favourite professional and affordable mobile themes for WordPress.

For Advanced Users and Developers

WPtouch Pro

WPtouch Pro is a premium version of the popular WPtouch theme for WordPress. It is a WordPress plugin which adds powerful, easy-to-use features to WordPress for mobile + tablet theme support, while keeping it completely independent of your desktop theme. It also has a robust theming framework, perfect for creating awesome mobile & tablet optimized versions of websites.
Pricing:
$39 for 1 site, $69 for 5 sites, and $199 for an unlimited developer license (Prices in Canadian (CAD) dollars)
Why would I buy it:
The technologies used (HTML5, AJAX, CSS3) are ideal for mobiles and tablets (iPad). WPtouch Pro is compatible with not just iPhone and iPad but also with high-end mobile devices like Android and Blackberry and tablet devices like iPad.

Purchase WPtouch Pro

Obox Mobile

Obox Mobile works by detecting supported devices like iPhones, Android & Blackberry and more, serving an optimised theme instead of your regular desktop theme. It is a WordPress plugin with a Plug ‘n Play Installation. Obox Mobile is built for developers with a custom mobile framework giving them the ability to create child themes and make custom modifications. It integrates well with WooThemes and other Obox Themes for WordPress.
Pricing:
$50 for single pack, $100 for developer pack
Why would I buy it:
As with WPtouch Pro, modern technologies such as HTML5, AJAX and CSS3 are used to deliver a seamless user experience like a native app. It also works on most smartphones such as iPhones, Androids, Nokia Smartphones, Blackberry and Opera Mobile based browsers. The ‘Child Themes’ feature enables developers to create custom themes based on the existing mobile framework in a short amount of time.

Purchase Obox Mobile

For Normal Users

Simple Mobile

This is a WordPress Mobile Theme available for sale at ThemeForest. It is one of the earliest mobile themes made for sale. This theme is designed especially for iPhone and best viewed in Portrait orientation. There are 8 color schemes available to choose from and 2 widget areas for easy customisation.
Pricing:
$20 for a Regular License
Why would I buy it:
Multiple color schemes and easy customisation. Comes with built-in twitter and flickr photostream modules. Good for a blog with social media presence.

Purchase Simple Mobile

My Mobile Page V2

This is another WordPress Mobile Theme available for sale at ThemeForest. It uses a fluid layout and therefore supports both portrait and landscape orientations. It comes with a few page templates such as blog page template, gallery page template, generic page template and contact us page template. It is designed for WordPress 3.0.
Pricing:
$20 for a Regular License
Why would I buy it:
Easy to install and customise. Works well on both portrait and landscape orientations. Good for a portfolio or an agency site with a blog.

Purchase My Mobile Page V2

How to use Google Fonts in your WordPress Theme

eisabai — Mon, 20 Jun 2011 10:39:19 +0000

Using Google Fonts in your WordPress Theme is very easy and it can be completed in 3 simple steps.

1.
Go to Google Web Fonts, browse all the fonts available for use on your website and pick any font you like. For this example, I will be using Droid Sans.

2.
Click on the font name to go to the font page and then click on Use This Font tab and copy and paste the css include into the section in Header (header.php) file of your WordPress Theme.

3.
Edit the Stylesheet (style.css) file of your current WordPress Theme and add the following line of CSS:

SELECTOR { font-family: 'Droid Sans', arial, serif; }

Replace SELECTOR with the correct selector; for example: h1, .title, .post h2, etc.

And that’s it. It is very simple and doesn’t require any font replacement techniques that use Flash or Javascript.

Browser Compatibility of Google Web Fonts API

According to the Official FAQs, the Google Font API is compatible with the following browsers:

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+

It also works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod).

Recommended Web Hosting for WordPress 3.0

eisabai — Thu, 24 Jun 2010 05:42:59 +0000

WordPress 3.0 was released a few days ago, and it’s more powerful than it has ever been. And if you are thinking of using WordPress 3 for your blog or even as a CMS, I recommend a self-hosted version rather than the free version hosted on WordPress.com.

So, what are the server requirements to host WordPress 3.0? According to the WordPress official website, your web hosting for WordPress should meet the following minimum requirements:

PHP 4.3 or greater
MySQL 4.1.2 or greater
The mod_rewrite Apache module (This is necessary to have pretty SEO-friendly URLs)

Note that WordPress will soon quit support for PHP 4 and MySQL 4 (read official announcement here), so if you are planning to continue using WordPress next year (2011), I strongly recommend that you switch to a hosting that has PHP 5 and MySQL 5 to avoid having to use an older version of WordPress in the near future when the newer versions no longer support PHP 4/MySQL4. Both Dreamhost and Bluehost have PHP 5 and MySQL 5.

I have used more than 10 web hosting providers for my online projects but here are my recommended web hosting for WordPress 3.0.

Dreamhost

Dreamhost is an ideal hosting provider for advanced users. Their Control Panel is a bit different to CPanel/Plesk but they have so many more features than CPanel/Plesk if you know what you are doing. And if you install WordPress using “WordPress one-click installer” on dreamhost, they will upgrade it for you automatically. This is a good feature because you don’t have to manually upgrade WordPress whenever a new version comes out. But you need to be careful not to hack the core code or core files of WordPress because your changes will be overwritten when they install a new version. I have heard a lot of mixed reviews about support at dreamhost but I have never really had to contact them because their knowledge base and wiki are quite comprehensive. I am using Dreamhost for this Web Development Blog and it is my recommend hosting provider for developers and technical savvy people. Dreamhost costs $8.53 per month which is a bit more expensive than most shared hosting but you do get what you pay for and you can get $30 off by using this coupon: WEBDEV30.

Test drive Dreamhost now.

Screenshot of Dreamhost's one-click installs

BlueHost

Bluehost is an ideal hosting provider for basic users. Each hosting account comes with a CPanel and one click install feature to install WordPress on your hosting account in less than 3 minutes. The install feature also allows you to install a previous version of WordPress so if, for some reason, you need to install WordPress 2.9 instead of WordPress 3.0 for plugin compatibility reasons, you can do so easily. The following video shows you how to install WordPress on Bluehost using their one click install. I am using Bluehost for a few of my websites. At $6.95/month with a free domain name for life and unlimited domain hosting, the price is very affordable.

Test drive BlueHost now.

Video Tutorial of how to install WordPress using SimpleScripts on BlueHost

ThemeForest vs WooThemes

eisabai — Sun, 06 Jun 2010 11:17:45 +0000

I was looking to buy a premium WordPress Theme for one of my projects a while ago and I came across ThemeForest and WooThemes. There are other premium WordPress Theme stores like Elegant Themes, Templatic, Template Monster, etc, but ThemeForest and WooThemes are leading the market. After looking around for a while, I decided to review and compare ThemeForest and WooThemes.

ThemeForest

Pros:
- Useful interface (you can search themes by criteria, list themes by authors, see ratings for each theme, no. of sales made, etc)
- Cheap (average $25 – $30 per theme)
- Comes with PSD (Photoshop file)
- Lots of variety
- Comments section for each theme allow you to directly communicate with the theme author and ask questions

Cons:
- Customising each theme can be very different because they are built and designed by many theme developers around the globe.
- Support is provided by the theme author rather than the ThemeForest staff
- Mostly English Only

Quality of themes:
Most themes come with Cufon/sIFR Custom font, jquery plugins, pre-installed WordPress plugins like Related Posts, Most Popular Posts, Social Linking, etc.

WooThemes

Pros:
- Great Support / Knowledge Base available to theme users and theme owners
- Standard “Theme Options” in the admin section that is built on a single WooThemes framework to allow you to customise each theme very easily
- Available in multiple languages

Cons:
- No Advanced Interface (eg: You can’t browse themes by author or rating or popularity)
- Expensive (average $70 per theme) *Cheaper if you join the theme club
- PSD only included for Developer License (Average price of a Developer License for each theme: $150)
- Fewer themes compared to ThemeForest

Quality of themes:
As with ThemeForest, most themes from WooThemes come with Cufon Custom font, jquery plugins, pre-installed WordPress plugins like Related Posts, Most Popular Posts, Social Linking, etc. The quality of themes from both stores are very similar. Themes from both stores are written in valid XHTML/CSS, compatible with most modern browsers, etc.

Which one to buy?
As I mentioned earlier, if you are looking for a lot of variety and a value for money, ThemeForest is definitely the answer. The pricing is a lot more affordable compared to WooThemes as they have a bigger community. But if you are looking for consistency and a standard framework and are willing to pay more for that, WooThemes is your friend.

How to customise WordPress Admin Login page

eisabai — Mon, 10 May 2010 12:49:11 +0000

Here is a step-by-step tutorial on how to customise WordPress Login page for your website/blog. This tutorial will show you how to change the WordPress logo and link on the Login page without hacking the core code nor installing a plugin.

1. Copy and paste the following code into functions.php file of your current theme. If there is no functions.php in your current theme folder, create one.

';
    echo '';
    echo '';
}
add_action('login_head', 'custom_header');
?>

2. Create a folder called admin in your current theme folder. This is where you will put all your css, js and images for the custom Login page. I like to create a separate folder for admin css and images because it keeps things neat and clean.

3. Create a css file and name it login.css. You can give it any name you wish but remember to change it accordingly in custom_header() function in functions.php file of your current WordPress theme. In this css file, you will be putting CSS overrides for the WordPress login page. Mine looks like this:

#login h1 a {
	background: transparent url(images/logo.gif) no-repeat scroll 0 0;
	display: block;
	height: 66px;
	text-indent: -5000em;
	width: 386px;
}

#login {
	width: 368px;
}

The above code simply replaces the WordPress logo above the Login box with the custom logo I have in images folder and makes the width of the login box a bit wider. You can do many other things from this CSS file to customise your WordPress login page; for example, changing the background image, changing the text styles, changing the look and feel of buttons, etc.

4. Create a javascript file called login.js in admin folder of the current WordPress theme that you have created earlier. As with the css file, you can name it any thing you like, just as long as it matches the one used in custom_header() function. And because I have also included jQuery library from Google AJAX Libraries API, I can use jQuery methods to overwrite any event or perform new actions via login.js javascript. My login.js file looks like below:

$(document).ready(function(){
	$("#login h1 a").attr("href", "/");
});

The above code replaces the href attribute of the logo link via DOM. So rather than going to the WordPress website when someone clicks on the logo on Login page, it will go to the website’s homepage.

So, that’s it. 4 simple steps to customising your WordPress Admin Login page. If you are using WordPress as a CMS, it is a good idea to customise the Admin Login page to ensure that you get a similar user experience and look and feel for both the front end of the website and the backend. For your inspiration, have a look at this Flickr Group Pool featuring a collection of Custom WordPress Logins.

WordPress iPhone App – a step by step user guide to using WordPress for iPhone

eisabai — Thu, 25 Mar 2010 15:30:46 +0000

WordPress iPhone app was released almost a year ago, but I have only downloaded and used it recently. WordPress for iPhone is available for all self-hosted wordpress.com blogs provided they are using WordPress 2.7 or higher. The app allows you to access the Administrator Panel of the WordPress blog using your iPhone, enabling you to add new posts/pages, edit existing posts/pages, upload photos, moderate comments, etc. It works with all models of iPhone and iPod touch, but in this post, we are using iPhone 3G.

After downloading and installing WordPress for iPhone App from iTunes app store, the WordPress icon will be added to your home screen.

Tap on the WordPress icon to launch WordPress for iPhone app. The latest version of WordPress app is 2.3.1, with geotagging feature, and you can read more about it at the Official blog.

When you run WordPress for iPhone app for the first time, it will immediately ask you to add a blog. You will be asked to enter your blog details such as blog URL, username, password and how many posts you wish to display per screen. Note that when entering blog URL, you need to enter the URL of your public-facing blog, not the URL of the Administrator (wp-admin) Panel. Username and passwords, however, are those of an Administrator user.

After entering the details, tap on “Done” and the app will try to validate your blog using the information you provided. This could take a few seconds, depending on how fast the internet connection is on your iPhone.

After logging in successfully, the first screen that you will see is Comments Moderation Screen. Unlike in normal WordPress Administration Panel, there is no dashboard in WordPress for iPhone app. You can easily access other screens (Posts and Pages) by tapping on the options available at the bottom dock menu.

You can scroll up and down the screen by swiping up and down on the screen. For comments, the top menu allows you to view comments by type (ie: All vs Pending) and edit them in much the same way as you edit Messages (SMS) on your iPhone.

You may approve, unapprove or mark comments as spam.

You may also bulk delete comments by tapping on each comment that you wish to delete, and then tapping on “Bin” icon.

Posts screen shows a list of posts currently on your blog. The total number of posts displayed will be 10 posts in this case, because we set 10 recent posts to show on the first screen when we entered blog details. Tapping on individual post little will lead you to edit/view screen for that post. Tapping on “Write” icon on the top right menu will let you add a new post to the system.

Pages screen works in much the same way as Posts screen, allowing you to view pages, edit pages and create new pages.

Write a new post screen comes with all the basic features that you will need.

You can add a new post to existing categories.

Or add photo, preview the post, and change settings (Publish date, Password, Photo Resizing) by tapping on options on the bottom dock menu.

As soon as you tapped on “Save” from “Write a new post” screen, it will save the post onto your iPhone local storage and take you back to the Posts screen, showing the post you have just created under “Local Drafts” section.

You can view/edit any post by tapping on the post title. View a Post screen is very similar to Write a new Post screen, but it has an extra option on bottom dock menu called “Comments” which lets you view comments for that particular post. You can then read, edit, delete or reply to comments easily from “Comment” screen.

If you tap on “Cancel” link on top left menu while the screen is on an edit mode (eg: edit a comment, reply a comment, edit a post), the app will ask you whether you would like to discard your changes or cancel the cancel action. This is very handy because it’s very likely to tap on links by accident on a small touch screen like an iPhone.

Say you quit the WordPress iPhone app by pressing the Home button on your iPhone and then come back to it again the next time by tapping on the WordPress icon on your home screen, rather than asking you to enter your blog details, the app will display a list of blogs you have already added to the app. You can still add new blogs by tapping on the plus icon from the top right or remove or edit the settings for existing blogs by tapping on the Edit link from the top left.

Notice how you still have the draft post that you have written earlier. One thing you need to be aware of is that, if a post is listed under “Local Drafts”, it’s only available locally on that particular device, be it an iPhone or an iPod touch. Therefore, to make sure that the draft post will be available anywhere, you need to save it to your WordPress database on the server. In order to do so, you will need to change the status of the post to Draft from Local Draft.

Tapping on the post title will take you to the view/edit post screen. Tap on the Status to change the status of the post.

If you are ready to publish the post, choose Publish. Otherwise, choose Draft or Pending Review. I have never used Private status but according to WordPress, private posts are visible only to you (and to other editors or admins within your site).

After tapping on “Save”, you will be taken back to Posts screen, and you can see that your draft post is no longer under “Local Drafts” section but it’s listed together with the rest of the posts on your blog. You can now be sure that it’s saved in your WordPress database on the server rather than just in your iPhone data storage.

Since our blog is optimised for iPhone, it makes previewing posts and pages using WordPress for iPhone app a lot easier. We have written a tutorial on How to make a website iPhone-friendly using CSS. We also recommend you to read two great books on iPhone Web Development; Building iPhone Apps with HTML, CSS, and JavaScript and Beginning Smartphone Web Development.

If you are interested in working with us for an iPhone web development, please contact us to find out how we may be able to help you.

Interested in working with us for an iPhone web development? Contact us at Anansi Web Development to find out how we may be able to help you.

Display 5 latest posts in each category in WordPress

eisabai — Wed, 10 Mar 2010 12:34:24 +0000

To display 5 latest posts in each parent category of your WordPress blog, add the following code into the template that you want the result to appear. In our case, we added the following code into our 404 template page (404.php of current theme). Other places that you might want to display a list of posts by category are: 1) Footer, 2) WordPress Custom Archive Page, 3) WordPress Custom Search Page, 4) WordPress Landing Page and so on.

Screenshot of 404 page with a list of posts by category (Wide View)

Screenshot of 404 page with a list of posts by category (Narrow View)

WordPress PHP Code



 'name',
  'order' => 'ASC',
  'child_of' => 0
);

$categories =   get_categories($cat_args); 

foreach($categories as $category) {
    echo '';
    echo ' name ) . '" ' . '>' . $category->name.'';

     $post_args = array(
      'numberposts' => 5,
      'category' => $category->term_id
    );

    $posts = get_posts($post_args);

	foreach($posts as $post) {
	?>
		
	 name ) . '" ' . '>View all posts in ' . $category->name.'';
	echo '';
}
?>

CSS

#page-not-found dl {
width: 200px;
float: left;
padding: 0 18px 0 0;
height: 250px;
}

#page-not-found dt {
font-weight: bold;
font-size: 1.1em;
padding: 10px 0;
}

#page-not-found dt a {
color: #b0bf32;
}

#page-not-found dd.view-all {
border-top: 1px solid #c9c9c9;
font-size: 0.9em;
margin: 5px 0;
padding: 2px 0 0;
text-align: right;
}

#page-not-found dd.view-all a {
color: #999;
}

.page-end {
clear: both;
}

5 steps to creating a custom Archive page in WordPress

eisabai — Mon, 22 Feb 2010 06:09:11 +0000

Here is how to create a custom archive page in WordPress just like the one you see on our blog.

1. Go to the current theme folder of your WordPress installation (wp-content/themes/*current theme*) and make sure you don’t already have archives.php in the folder

2. Create a new file called archives.php (or whatever file name you want to give)

3. Copy and paste the following code into the new file and upload it to your current theme folder (wp-content/themes/*current theme*)








Read the rest of this page »'); ?>

Archives by Title:

    


Archives by Month:

    


Archives by Subject:

    


 'Pages: ', 'after' => '', 'next_or_number' => 'number')); ?>

Note: You will probably need to modify this code a bit to match the code structure of your current theme. For example, you might need to have get_sidebar() or you might have extra markup.

4. Login to your WordPress Administrator Panel and create a new page (and name it whatever you like. Ours is called “Archive”)

5. On the right side of the create/edit page, you will see Attributes section where you can specify settings for Parent, Template and Order. Choose “Archives Page” for Template and publish/save your changes.

You now have an Archive page for your WordPress blog that is similar to our Archive page.

Free WordPress Theme: Hello Little Girl

eisabai — Fri, 05 Feb 2010 01:38:02 +0000

Hello Little Girl is a cute, fresh and summery theme, featuring a little girl. The template was created originally for Website Templates. Main colors are blue, green, yellow and dark brown. It is a two-columns template with a sidebar on the right.

Features:

Search Engine Optimised
Useful 404 page with links to categories
Large font
Support Gravatars
Support widgets
Comments enabled for pages
Show post categories and tags for each post
Custom Favicon

Download now!

How to add a breadcrumb to your blog and have it appear on Google’s Search Result Snippet

eisabai — Tue, 24 Nov 2009 00:53:15 +0000

Google Search has recently introduced breadcrumbs in their Search Result Snippets replacing the URL displayed below the individual snippet. There are both advantages and disadvantages of this new feature. One immediate advantage that I see is if your search result snippet has a breadcrumb, your website will probably get more pageviews because the user is likely to click on a category name on the breadcrumb to navigate to the parent category and browse through related articles.

Not many search result snippets have a breadcrumb yet, so the question is, how does google obtain breadcrumb links from a website. I did a small research and found out that in order for google to display breadcrumbs for your website, your website / pages on your website must have one. If you look at individual blog posts on this blog, you will see a breadcrumb horizontally across the top of the blog post, just below the title. I’m using WordPress as my blog CMS and the following is the code I have inside single.php file of the current theme to display a breadcrumb for each blog post.

» »

Interested in getting SEO Recommendations for your website? Contact us at Anansi Web Development to find out how we may be able to help you.