Making my Atahualpa theme mobile-friendly on WordPress

Last month, (March 2013) over 40% of visitors to my most popular website were on mobile devices.  It is clearly time that I put more effort into optimizing my websites to be cell phone friendly. A task that proved to be a little more complicated than expected.

I like WordPress and I love Bytes For All’s Atahualpa theme. It is so easy to customize! One of the few features it lacks is an option to auto-detect the screen size and turn off or rearrange columns. So here is what I did:

  1. Figure out what all you will want to add / change / remove when your site is viewed mobile. View Source to find the classes and IDs associated with these elements.
  2. Create separate HTML headings for your site. One needs to be simple, looks good in a space of about 320×150 pixels. The other should look good on a regular computer screen, which can have a wide variety of widths.
    Here is what mine looked like:

    <!-- MOBILE HEAD -->
    <div class="mobilehead"><img src="logo_small.gif" /><br />
     <form method="get" action="http://texascarnivals.com/">
       <input type="text" onfocus="this.value=''" 
         value="Search this site" 
         onblur="this.value='Search this site'" name="s" />
     </form>
    </div>
    
    <!-- REGULAR HEAD -->
    <div class="regularhead">
     <table><tr><td><img src="logo.gif" /></td>
      <td>
        <form method="get" action="http://texascarnivals.com/">
         <input type="text" onfocus="this.value=''" 
          value="Search this site" 
          onblur="this.value='Search this site'" name="s" />
         </form>

    Notice that I put the first header in a DIV with the class-name “mobilehead” and the other in a div called “regularhead”.

  3. In Atahualpa’s Theme Options, under “Various Content Items”, click “Add HTML/CSS Inserts”.
  4. Find HTML Inserts: Body Top . Place your header codes in the box for the opening .
  5. Use CSS to modify elements. Here’s the tricky part, so I will give you a copy of mine:
    /* REGULAR */
    /* Be default, mobilehead is turned off (hidden) and .regularhead 
       is formatted to match the rest of the page's content. */
    .mobilehead { display: none; }  
    .regularhead { width:99%; max-width:1125px; margin:auto; } 
    
    /* MOBILE - MAX 599 */
    /* Devices with a screen width of 599 pixels or less will use this 
       stylesheet snippet. Notice: I turned off the regular head, the 
       right-hand column, and .colthree. These contained ads that were
       getting in the way. (.colthree is the container that holds 
       td#right) */
    @media screen and (max-device-width: 599px) {
     .regularhead , td#right , .colthree { display:none; }
     .mobilehead { display:inline; }
     .colone { width:150px; }
    }    
    
    /* MOBILE - MAX 799 */
    /* Devices with a screen width between 600 and 799 pixels use this 
       stylesheet snippet. Notice: I left the ads (colthree) on, but I 
       made the left navigation (colone) more narrow */
    @media screen and (min-device-width: 600px) and 
      (max-device-width: 799px) { 
       .regularhead { width:99%; max]-width:1200px; margin:auto; 
         background:url('bg.gif') repeat-x; padding:0px; }
       .colone { width:200px; }
  6. Check your work. Make sure to that if you are like me, and your site depends on ad revenue, you make a mobile ad form too.

5 Comments

  1. Ken on December 5, 2013 at 9:05 PM

    Hi Michelle,
    This is pretty cool! Do you have an example where I can look at it? I tried texascarnivals.com,
    but that doesn’t appear to have the above working… at least not when I resize my Firefox browser.

    Thanks!
    Ken

    • Michelle on January 17, 2014 at 12:41 PM

      Ken, the above looks at your screen resolution. (How many pixels your device is capable of displaying.) And unfortunately, some phones and stuff just resize the whole page instead of reporting that their true size. Still, the above does work on the devices that properly communicate their resolution. I have tested it on multiple devices.

  2. imran on April 13, 2016 at 6:18 AM

    Hello,
    I love the way you put the menu below. Please let me know how to put the menu in this way.

    • Michelle on January 12, 2017 at 2:36 PM

      There are so many customizable responsive themes available now. This article is no longer very relevant.

  3. Michelle on June 1, 2016 at 1:00 PM

    TexasCarnivals.com no longer uses the Atahualpa theme. Sorry to take the example away, but I found a paid theme that I like better.

Leave a Comment