How to create a responsive template(Theme) for WordPress

After having written and published a series of 12 tutorials on How to Create a WordPress Template, and because the technologies are constantly advancing and improving, you must be always at the forefront of technology to ensure the best possible results and the best user experience possible for the user. The navigability and usability are now an extremely important aspect in life and success of a blog, so we can not close our eyes to languages like HTML5, CSS3 and also responsive Webdesign, which basically means a site layout / blog that automatically answers to different screen resolutions of a personal computer, a smartphone or a tablet, setting the entire layout and its elements in order to ensure the best possible browsing experience for the user.




How to create a responsive template(Theme) for WordPress

The colleagues blissfull Interfaces, recently launched an interesting tutorial on creating a responsive theme, which together with our complete guide on How to Create a WordPress Template, can help you make your responsive wordpress template or help in creating its future WordPress Themes of a more modern and suited to nowadays needs.
To create a responsive WordPress Theme , you can do it using queries CSS3 . To understand this tutorial , you should already know how to create a WordPress template (read the tutorial indicated ) and have some knowledge of CSS .
In this tutorial we will learn to create a theme child and use media queries in CSS3 to make our layout adapts to different screen resolutions of the various existing devices on the market .
1. In the ‘ themes ‘ folder of your WordPress , create a new folder called ‘ multiplescreen ‘ .
2. Well to Create a CSS file and save it with the name ‘ style.css ‘ inside your new folder ‘ multiplescreen ‘ .
A CSS file type ‘ style.css ‘ is the only thing you need to create a child theme . Add the following code to your ‘ style.css ‘ file.
Important: We assume that the name of your template is called ‘ EscolaWP ‘ . Replace the name ‘ EscolaWP ‘ the name of your Template .
As with any WordPress Theme , the header information has to be on top of the CSS file. The only difference is that in a CSS file for a Child Theme , the Template : field is mandatory, so that WordPress realize what the Template mother and son, respectively.
Now we will need to call our sheet relative styles into our child theme . Add the following code to your new CSS file that we have been working . The function @import url .. calls the CSS file from your mother Template into your child Template CSS .
1
@import url ( “../ TwentyTen / style.css ” ) ;
To check if our child theme is working properly, we will change the H1 titles child theme to pink – orange. Replace the previous code that calls the CSS Template mother for this new :
Important: Make sure that there appears styles before @import url .. If this happens, the CSS of our child theme can not load the relatives styles .
Now log in to the admin panel of your WordPress , enable template EscolaWP Child in the Appearance menu -> Templates. Now check how is your WordPress blog into a web browser. You should be seeing your same template , but only with the H1 titles color – orange.
Now we need to define which media measures that we use in our layout. Here are the three most common :
1. SmartPhones- Less than 320px
2. Tablets – Between 321px and 768px
3. Desktop – 769px and higher
Save your CSS file. To test the various measures , simply open your site in a web browser and drag the window to different dimensions , to verify that the layout adapts automatically. You will see a color change in color when the dimension H1 decreases .
Do not forget to remove the color changes in H1 if you will not keep them 




LEAVE A REPLY

Please enter your comment!
Please enter your name here