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.