GeneratePress Fast WordPress Template: Lightweight, Responsive, Valid, Free. Basic Voted Fastest Responsive WordPress Theme Easiest WordPress Theme

Just keep in mind that WordPress generates some classes that must be present in the stylesheet. For example classes aligncenter, alignleft and alignright serve to align images and block elements, and they need to be included in your stylesheet (you can copy from the default theme's stylesheet):


.aligncenter,
div.aligncenter (
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft (
float: left;
}
.alignright (
float: right;
}

The following classes are used to align images that have captions (can be copied from the default theme, later, if necessary, correct):


.wp-caption (
border: 1px solid #ddd;
text-align: center;
background-color: # f3f3f3;
padding-top: 4px;
margin: 10px;
/ * optional parameters that will make rounded corners in supported browsers * /
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img (
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text (
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}

In addition, there are a few more WordPress classes that do not need to be described in the stylesheet. WordPress generates pages using them, you can style them too:


.categories (...)
.cat-item / * This class is assigned to all categories * /)
.current-cat (/ * style of the current category * /)
.current-cat-parent (/ * style for the parent (s) of the current category * /)
.children (/ * child class * /)
.pagenav (/ * page navigation * /)
.page_item (/ * any item in the list * /)
.current_page_item (/ * this class is assigned in the page list to the currently active page * /)
.current_page_parent (/ * class for the parent page relative to the current one * /)
.current_page_ancestor (/ * any top-level page in relation to this one * /)
.widget (/ * all widgets are wrapped in this class * /)

In the process of layout, use blocks and styles for them, as defined in the screenshots at the beginning of the article. This is not necessary, but very desirable.

For example, in the future we will connect the search form to the site through a special. wordpress tag , as a result of which wordpress will display this form:

Therefore, we take this into account when designing a theme.

And the last thing to add to style.css is information about yourself and the theme you created. Information is placed at the beginning of the file in comments:

/*
Theme Name: Come up with a unique theme name
Theme URI: http: // link-to-theme-homepage
Description: Description of the theme
Author: Thread Starter
Author URI: http: // link-to-author-page
Template: ancestor-theme-name
Tags: theme tags - only from the list suggested by wordpress.org
Version: version
Well, here's the text of the license
*/

Also don't forget to do screenshot.png and put it in the template folder (in the root). Information placed in this way in the style sheet will be displayed in the admin panel in the section Management of "themes"... We test the built-up template in browsers, if all the rules, you can go further.

I will not give the code of the pages of the typeset template, because it is large enough, you just download it, then we will work with it.

How a wp theme works:

If you open the default theme folder (wp-content / themes / default), you will see many PHP files (theme files) and one style.css file. When we view the blog, WP includes the theme files (index.php<

This completes the preliminary preparation and we can move on to creating a theme from the existing source material.

Step 1:
First, in the WordPress themes directory (wp-content / themes), create a folder with the name of our theme. Let it be ruseller_lessons... Then from the default theme folder (wp-content / themes / default) copy the files comments.php, search.php and 404.php to our theme folder. These files are responsible for comments and searches on the blog. Then in ruseller_lessons copy the stylesheet style.css our template, screenshot.png (300x225) and folder images.

Now the files of our template need to be "cut", ie. pull in separate files footer, sidebar and header. The diagram shows a simplified view of the file index.php with marks according to which we will cut it:

Step 2 - Header.php
We open index.html and cut out everything that is before the comment, create a new file header.php and paste the cut code into it, save it in the directory of our theme ruseller_lessons:






index.html






Now go to the folder with the default theme, open header.php and copy the tags from there , <link>, <h1>, and <div class=description> </b> and replace them with the corresponding lines in our <b>header.php</b>.</p> <p>Then all the tags <li>located <b>id = "nav"</b>(list of pages at the top of the blog) replacements for the wordpress function</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>As a result, we get:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
"type =" text / css "media =" screen "/>
" />





Step 3 - Sidebar.php
Returning to the index.htm file. First of all, we delete the entire search form, then we cut out everything from it from