Creating Your WordPress Theme
Responsive designs have became a vital thing nowadays. Everyday new
smartphone touch devices and mobile phones are being introduced. This
article is very important for those who are not familiar with responsive
designs. In this tutorial we’ll will cover
the core basics of creating responsive theme with media queries of
CSS3. Reading this tutorial will help you understand the core of
responsive designs and how they work in few quick steps.
The trend is changing rapidly. All the big names have targeted mobile users as well Mashable, Engadget, SmashingHub etc. Let’s have a quick look on what are responsive themes.
To be honest, you should be good in basic knowledge of how to make wordpress themes.
Below is the quick explanation of each line:
Great creating child theme is done. Now activate the child theme by
going to appearance -> Themes from WordPress admin panel. Hope you’re
now able to make child themes easily.
It’s worth checking ScreenFly by Quirk tools.
Source:smashinghub.com
The trend is changing rapidly. All the big names have targeted mobile users as well Mashable, Engadget, SmashingHub etc. Let’s have a quick look on what are responsive themes.
What are responsive themes and why they’re important?
Trend for Responsive themes are increasing tremendously and why not it should be? The increased use of smartphones and tablets make it important for websites to go responsive. What exactly responsive themes are? Responsive theme is an approach in website design that make the theme capable of reacting to different screen sizes. It automatically suits the resolution and look either it’s a desktop PC, a tablet or a smartphone. Developers are crazy about making themes responsive to improve user readability and load time.Basic Requirements
Language knowledge: HTML, CSS 3
Project time: 20min – 1 hour
Difficulty: Intermediate
For achieving anything, first thing is the preparation. It;s not that
difficult, you just need an approach of the design and a basic know how
of how responsive themes work.Project time: 20min – 1 hour
Difficulty: Intermediate
To be honest, you should be good in basic knowledge of how to make wordpress themes.
Creating Child Theme first
It’s good that you make a child theme first, although this is not the only way to go but is recommended. For those newbie who are not known to what child themes are, should check WordPress reference.
Child
themes are less known magic functionality of WordPress. This is the way
to keep your theme edits save, even if the parent theme is updated.
Anyone with the very basic understanding of HTML and CSS can craft
clever colors in theme.
We’ll provide here a quick tutorial on how to make a child theme for your current WordPress theme.First Step:
Create another folder naming mythemechild in your wp-content/themes directory. We’re assuming your theme name is myparenttheme. You can name child theme folder to anything you want to. It doesn’t matter but you should add some convenient name like if you have abc theme, you can name child theme to abc-child.Second Step:
If you’ve read the child theme property, adding styles.css is compulsory for child themes. Create a styles.css file in child theme folder. You can add further functions.php and other template files into child directory.Third Step:
In styles.css of mythemechild, header is the main thing of child theme. Below is the sample header for making child theme function referenced from WordPress codec.
1
2
3
4
5
6
7
8
9
|
/*
Theme Name: myParentTheme Child
Theme URI: http://abc.com/
Description: Child theme for the My parent theme
Author: Your name here
Author URI: http://abc.com/authorname/
Template: myparenttheme
Version: 0.1.0
*/
|
Theme Name. (required) Child theme name.Theme URI. (optional) Child theme webpage.Description. (optional) What this theme is. E.g.: My first child theme. Hurrah!Author URI. (optional) Author webpage.Author. (optional) Author name.Template. (required) directory name of parent theme, case-sensitive.- NOTE. You have to switch to a different theme and back to the child theme when you modify this line.
Version. (optional) Child theme version. E.g.: 0.1, 1.0, etc.
Final Step:
Now you just need to import the parent theme’s stylesheet into child theme and we’ll achieve this with some property like below:
1
|
@import url("../myparenttheme/style.css");
|
The Final Code
Combining them all, it will look like below
1
2
3
4
5
6
7
8
9
10
11
12
|
/*
Theme Name: myParentTheme Child
Theme URI: http://abc.com/
Description: Child theme for the My parent theme
Author: Your name here
Author URI: http://abc.com/authorname/
Template: myparenttheme
Version: 0.1.0
*/
@import url("../myparenttheme/style.css");
|
CSS3 Media Queries
CSS3 brings many exciting possibilities and simple queries that ease the work of designers and developers. Although there are some frustrating issues with IE8. They can help you get the below information- Get the width and height of current browser window
- Check for if the phone is portrait or landscape.
- Get the resolution and device width and height.
Lets not go in deep details of how media queries work, we’ll cover that in another article.
Screen Sizes that we’ll be considering in our tutorial
Defining different screen sizes are important before we proceed to the actual process of code.- Smart Phones - less than 480px (Considering Google Nexus S and ASUS Galaxy 7 also)
- Tablets – 481px to 1280px (Motorola Xoom with max 1280 resolution)
- Desktops – 1281 px and above
(Smashinghub Note: Your values for SmartPhone and Tablets may varry depending on what devices and display screens you’re targeting.)
Below are the queries that we’ll use to make any WordPress theme
responsive. They looks easy but are little trickier, one should consider
the syntax carefully.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
@media screen and (max-width:480px) {
/* Making the headings red for smartphone users */
h1 {
color: red;
}
}
@media screen and (min-width:481px) and (max-width:1280px) {
/* Making the headings Black targeting PC Users */
h1 {
color:green;
}
}
@media screen and (min-width:1281px) {
/* Making the headings red for smartphone users */
h1 {
color: black;
}
}
|
Testing the development
It’s very important that you keep on check the result after adding every query. For those who have the smartphone and tablets available, testing would be easy. But here’s another smart fun testing tool ScreenFly by quirktools. I love this tool for it’s accuracy and ease of use. You can test it by selecting almost all the major tablet screens and all major smartphones.It’s worth checking ScreenFly by Quirk tools.
Source:smashinghub.com
Categories:
Wordpress
Posts
0 comments:
Post a Comment