What do you do if your WordPress theme isn’t mobile friendly?  My advice is to install the WPTouch plugin.  It will make your site look good on mobile devices. It’s what I recommend to clients and it’s what I use on my own sites.

WPTouch

Here are some things you should know about the plugin:

  • Anything in your site’s sidebar will NOT be displayed by WPTouch
  • There’s a pro version that allows you to add advertising code, add custom templates and other features.

However, the biggest thing you should be aware of is that the plugin is updated frequently. Be sure to look at your site on a mobile device after each WPTouch update.

In the meantime, here are the latest instructions for configuring the WPTouch plugin:

Once you install the plugin, look for WPtouch on the left side of your dashboard. Click on that and you’ll see the controls for WPtouch. At the top right of the screen you’ll see a Preview Theme button.  Click there and you’ll see how your site looks on mobile devices.

Note that as you’re working with the WPTouch controls there is no “save” button. Once you make a selection that change is live.

General Settings

Look at the Mobile Site Title to make sure that it says what you want and that it displays well.

Scroll down to the Landing Pages area.  You can change the home page and blog URLs here.  For most sites the WordPress reading settings work best.

WPTouch settings

Menu Settings

Once you click on Menu Settings you’ll be asked to go to the menu area of your WordPress dashboard.  From there, you can view the custom menu associated with WPtouch.

Find the mobile menu and click on Select.

WPTouch Menu

(If you have questions about working with custom menus or want to update a menu see An Illustrated Guide for Working with WordPress Custom Menus.)

Do you want to use a different menu for WPtouch? Select the menu you want and then look below the menu items for the Menu Settings area. Check the box in front of WPtouch: Header Menu and save the menu.

WPTouch Header Menu

Customize Theme

Once you click on Customize Theme you’ll be asked to go to the customizer. Note that in this section you do have to click on “save and publish” in the top right of the customizer area.

Blog Featured Slider controls the slider on the home page of the mobile site.

Blog Layout contains one way to get rid of the home page slideshow.  You can uncheck “show featured posts”.  See the Custom CSS for another way to get rid of the home page slider.

Custom CSS allows you to add code to change the appearance of the mobile theme. Here are some changes I’ve made to my sites:

This cuts down the HUGE amount of padding above and below each page and post title:

.post-page-head-area.bauhaus {
 padding-top: 10px;
 padding-bottom: 10px;
}

This is one way to remove the slideshow from the home page:

.list-view .carousel.list-carousel {
 display: none;
}

See the Blog Layout section for another way to get rid of the slideshow.

This changes the color of the post or page title in the slider:

.list-carousel h2 {
color: #990000 !important;
}

The Footer area accepts custom content including HTML.  This is a good place to put any needed items from the sidebar of the desktop version of your site.  I typically also add the site copyright in this location.

The Header area is very important.  That’s where you can add a header image, control menu positioning and add a search icon to the top of your site.

Use the Social Media Links area to add social links to the bottom of your mobile site. Note that this is for adding links to your social media accounts.

Social Sharing allows you to add social sharing links to your pages and posts. Note that this adds links so that people can share your content on their social media accounts.

Typography lets you select from a list of fonts.

Once you’re finished and you’ve saved your changes, click on “x” in the top left of the customizer to go back to the WPTouch control panel.

Close Customizer

 

8 comments

  1. Trey

    Reply

    Thank you sooooo much. You don’t know how long I’ve been trying to get rid of that ridiculous padding around the page title. It had my head spinning every time I looked at it. Now, with your help, my mobile site looks 5x better and my headache is gone.

    • Marsha Perry

      Reply

      You’re so welcome. With mobile space at a premium, I have no idea what they were thinking with that design!

  2. Jay

    Reply

    Hi Marsha
    You say
    “Once you click on Menu Settings you’ll be asked to go to the menu area of your WordPress dashboard. From there, you can view the custom menu associated with WPtouch.”

    THIS IS NOT THERE on WPtouch 4.3.13.1. And whatever I do to configure my mobile menu (ie; Customize Header Options – Mobile Menu) it doesn’t show on a mobile or when I press preview theme in WP Touch. It just shows the generic navy colour with the menu items a faint grey.Even though the configuration preview shows on the customize header options).
    I’m going out of my mind trying to find a solution. Have tried installing and uninstalling WP touch. Just don’t know why I can’t configure the mobile menu.
    Going out of my mind. I’ve spent soooo long on this.
    If you can help I’d be eternally grateful as it’s an important charity site I’m building.
    Many Thanks

    • Marsha Perry

      Reply

      Just to make sure that we’re on the same page, you’re going to Appearance > Menus and selecting (or making) a menu to use with WPTouch, right? The “custom” part is that you can make a menu for WPTouch.

      WPTouch doesn’t give you many choices for changing the look and feel of the menu. Using the customizer you can go to the colors area and change the color of the header and the menu. But unless you do any custom CSS I don’t think that those can be different colors.

      Hope this helps!

  3. my wedding entrance

    Reply

    This article is great i managed to change the height of the header which was so big.

    currently in mobile view using bauhaus theme my text is showing above the image so does not look very appealing. is there any custom code i can use to have the image show at the top and the text below?

    would greatly appreciate any input

    • Marsha Perry

      Reply

      I’m glad this helped. Off the top of my head, I don’t know how to code for the text issue. Sorry!

  4. Reply

    Let me add my HUGE thanks to you, Marsha, for the reduce padding code. Wow. What a difference it made in the look of our site. 🙂

    Any chance you can tell us how to add a phone number to the header or anywhere near the top of the page and repeating on each page (unless I can just add it somehow to each page). I finally got it onto our desktop site, but am clueless as to how to get it into the plugin. There seem to be more options with the Pro version, but we aren’t able to take that step…yet.

    Any suggestions would sure be appreciated!!

    Linda

    • Marsha Perry

      Reply

      Linda, You are so welcome! I’m glad this helped. I have helped some customers do this, but I have to edit the plugin files to do. So there’s no quick fix that I know about.

Leave a comment

Your email address will not be published. Required fields are marked *