Brand Your WordPress Mobile Site with a Complimentary Blog Design

Most WordPress mobile plug-ins for your blog’s design are customizable. You customize a mobile plug-in for your blog by changing colors and themes, adding a custom logo icon, and setting a custom homepage. With the WPtouch mobile plug-in, you can add branding that complements your blog’s design and makes it easier to navigate.

Before you begin these steps, make sure you have installed the WPtouch plug-in.

1

From your WordPress dashboard, choose Settings→WPtouch.

You’ll see Settings or the Settings icon toward the bottom of the list on the left side. If you’ve installed WPtouch, then it will appear in the menu under Settings.

2

Under General Settings, change the site’s title.

In this example, the title for this mobile site has already been changed. The site title “momcomm” appears at the top, just below the notifications bar. Only your mobile readers will see this title, so you can include “Mobile” in that title, and PC users won’t notice it.

3

Change the home page for mobile users.

You can design a special home page that only mobile users will see, with a simpler arrangement of features that looks better on a smaller screen. Scroll down to Home Page Re-Direction, then under WPtouch Home Page, choose the mobile home page’s name from the drop-down list.

4

Change the pictures that appear next to each blog post.

Scroll down to Post Listings Options. This is where you decide whether each post should be adorned with a calendar (with the date the post was written) or an image from the featured image set. The default image is a generic camera icon, like the one in the “Hello world” post in the figure above.

Here, you also select which data appears for each blog post, such as the author’s name, categories, and tags.

5

Under Style & Color Options, change the colors and fonts.

Scroll down to Style & Color Options. Here you can change the background theme and text font to one of the many supported by WPtouch. (More customization options are available in the Pro version.)

6

Under Default & Custom Icon Pool, add new icons.

Scroll down to Default & Custom Icon Pool to find an array of mostly self-explanatory icons, as shown here. Here, the final two icons on the bottom row were custom added. You can add custom icons to be used for the logo at the top of the mobile page, as well as icons for other pages. Click Upload to add new icons from your computer.

7

Choose the icons for logos and certain types of pages.

To customize a section with a special icon, scroll down to the Logo Icon/Menu Items & Pages Icons section. Choose the icon you wish to use as your main design logo from the first drop-down menu: Logo & Homescreen Bookmark Icon.

To change an icon for any other page, from the Pages & Icon section, choose the page you want to customize, then choose an icon from the drop-down menu. When complete, scroll to the bottom and click Save Options.

When customizing several parts of your mobile pages all at once, be sure to click Save Options often. Your choices will not be made permanent until you do.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com