The evolution of touch based SmartPhone devices has revamped entire cyber communication industry. The era of desktop internet is reaching to its very end. Therefore, it is necessary to understand the dynamics of this change and get the fixes available for web development resources. If you are using a WordPress website then it will be good to understand the process of creating a responsive theme for your website. It will enable your business organization to cast your eyes on the specific customer circle, which prefer to access internet via their SmartPhone devices. Here is a small tutorial for you to make a mobile theme for your website. You are required to follow the process of development precisely.
Are You Ready?
As you have landed on a tutorial to learn the process of creating responsive WP child theme, it is expected from you to have plenty of knowledge about WP blogging, WP theme development, and CSS creation. The knowledge of HTML, PHP, and Java script will be highly appreciable. If you have mastered these aspects then you can go on to create your responsive WP theme.
Begin Your Process
You are required to create a new folder in your theme directory. If you do not know about the location of your theme directory then you can find the theme directory folder in WP-content folder. In this folder, you will create a new folder and name as mobile_child. After creating the folder with mobile_child name, you can go on to place your new mobile_child theme in the same folder, which consist of all the themes for installation of WordPress. However, you cannot name the theme with restricted directory names, which are prohibited by WordPress.
Now, Start Your Theme Creation Process
After finishing above-mentioned steps, you should move on to the first step of creating your responsive theme in WordPress. In the first step, you are required to open your text editor to save a CSS file with style.css. Further, you can upload your CSS file to the mobile_child directory. In this way, you should add the child theme header in the directory so that WP can recognize your CSS file as a child theme. While uploading the header in the theme, you should add the “template” line as mentioned in the below given example.
/*
Theme Name: yourThemeNameHere Child
Theme URI: http://www.example.com/
Description: Child theme for yourThemeNameHere
Author: Creator’s Name
Author URI: http://www.example.com
Template: yourThemeNameHere
Version:0.1.0
*/
You should use the name of your current active WordPress theme in the place of yourThemeNameHere. After completing this step, you should move on to put your header in the CSS file. Further, you need to call your main theme’s CSS files into your child. For this purpose, you can add below mentioned code after end comment tag of your header.
@import url(“../yourThemeNameHere/style.css”);
This code should be placed above all styles, which will be added in your child theme’s style.css file. BY doing so, the style of the main theme will be unaffected with the placing of other files. Your child theme will call the styles form the active theme of your active WordPress theme. It will help you in making necessary changes in the content of your website. You can make changes in the style of the theme as many times as you want. For example, you will need to place the below mentioned code for making changing in p tag, the h1, h2 and h3 tags styles.
P{
color:red;
font-family: arial;
}
h1, h2, h3{
color:blue;
font-weight:bold;
}
However, you can choose the styles for your theme as per your preferences. It is just an example of styles.
Congratulations! You Can Now Activate Your Theme
For making your site available for WordPress, you will have to activate your theme. It will allow WordPress to use your child theme. You are required to follow below given steps to activate your child theme.
Firstly, you will have to login in your WordPress admin panel.
Secondly, you will have the requirement to upload the style.css and then in theme directory called mobile_child.
Thirdly, you should navigate to “Appearance” tab. By clicking on this tab, you will find “Theme”. At here, you should activate the child theme.
After finishing all such steps, you can open your WordPress site in a new browser to see the changes in look & feel.
Lets! Make It Responsive
If you can see the changed look and feel in new browser window then you should proceed to the step of making your theme responsive. For this purpose, you are required to follow below mentioned tips precisely. The precise adherence will keep your site’s look impressive all screens regardless of size.
There are mainly three sizes are available in internet enabled devices. Technically, you will need 769px+ size for desktop screens, 321 to 768 pixels for tablet screens, and below 320 pixels for SmartPhone. You can use the below mentioned media queries, given for each size.
|
After using these media queries, your site will look uniformly at all screen sizes. In case, you see any issues in the look and feel of your website in any particular version then you can make changes in the pixels of above mentioned media queries. It will fix the issues for you. You should define the pixel range from minimum to maximum in the media queries. It will finish your step of creation of mobile_child theme.
You can easily create a responsive WordPress using this tutorial. You need to take every step carefully to create an error free website. Further, you should test the look and feel of your WP theme at different SmartPhone devices. It will help you in using an exclusive responsive theme in your website, which will look uniformly at all touch based SmartPhone devices.