Create your own custom WordPress mobile theme

Ever wondered how the big websites uses custom light version of their PC version of website’s theme for mobile phone browsers?

Actually, it is easy. After reading this guide you can create your own custom theme with logo for your WordPress site very easily.

There is a nice free plugin for Worpress named website to be viewed from mobile browsers in a light version. But it will not maintain the custom appearance of your website. So, the second step is to modify the CSS file of this plugin.

Now go to wp-content/plugins/viewmobile/themes/default/ and you will find the style.css file there.

 

Here is the default CSS marked which is needed to be changed:

 

body {
margin: 0;
padding: 0;
font-size: 62.5%;
font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif;
}
#header {
background: #4281B7;
color: #ffffff;
border-bottom: solid 1px #4281B7;
margin: 0 0 0px 0;
padding: 5px;
}
#nav {
background: #61A4DB;
color: #ffffff;
border-bottom: solid 1px #4281B7;
margin: 0 0 5px 0;
padding: 2px;
padding-left:5px;
}
#nav a{
color:#ffffff;
}
#header h1{
font-size: 2em;
padding:0px;
margin:0px;
}
#header p {
margin: 0px;
}

#first_footer {
background: #61A4DB;
color: #ffffff;
border-top: solid 1px #4281B7;
margin: 0px;
padding:2px;

}

#first_footer a{
color:#ffffff;
}

#footer {
background: #4281B7;
color: #ffffff;
border-top: solid 1px #4281B7;
margin: 0px 0 0 0;
}
#footer p{
margin:0px;
}

(We have pasted the partial CSS)

We have marked the important markups with red color font which you at minimum need to change to get a custom mobile theme. Obviously, you can change other properties too.

 

Other approach via child theme:

 

You can create a folder in wp-content/plugins/viewmobile/themes/ and name as you like (for example TheCustomizeWindows_mobile). You have to follow the same principle of creating a child theme in WordPress, that can be found in repository; you can read this post as well. Advantage of creating a child theme is, you can swithch to any theme from viewMobile Options from WordPress panel.

 

Important notes regarding mobile theme:

 

• Do not overload with too much heavy image files; use CSS as possible for customization.
• Read Nokia, Opera mobile browsers developer resources for using CSS gradient, if you want to add so.
• Keep the CSS small too