> >

Creating a simple Wordpress theme. Excellent themes for WordPress in Russian with open source Very simple customizable WordPress theme

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


.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 corrected if necessary):


.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 several other WordPress classes that do not need to be described in the style sheet, but because... WordPress generates pages using them, and you can style them:


.categories(...)
.cat-item /* This class is assigned to all categories */)
.current-cat (/* current category style */)
.current-cat-parent (/* style for the current category's ancestor(s) */)
.children (/* class for child */)
.pagenav(/* page navigation */}
.page_item (/* any list element */)
.current_page_item (/* this class is assigned in the list of pages to the current active page */)
.current_page_parent (/*class for the parent page in relation to the current one */)
.current_page_ancestor (/* any page upper levels in relation to this */)
.widget (/* all widgets are wrapped in this class */)

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

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

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

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

/*
Theme Name: Create a unique theme name
Theme URI: http://link-to-theme-homepage
Description: Description of the topic
Author: Topic author
Author URI: http://link-to-author-page
Template: ancestor theme-name
Tags: theme tags - only from the list offered by wordpress.org
Version: version
Well, here is the text of the license
*/

Also don't forget to do screenshot.png and put it in the folder with the template (at the root). Information placed in this way in the style sheet will be displayed in the admin panel in the section "Theme" management. We test the designed template in browsers, if everything is fine, you can move on.

I will not provide the code for the pages of the designed template, because... it’s big enough, just download it, and then we’ll 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 a blog, WP includes the theme files (index.php<

At this point, the preliminary preparation is complete and we can move on to creating a theme from the available 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 search on the blog. Then in ruseller_lessons copy the style sheet style.css our template, screenshot.png (300x225) and folder images.

Now our template files need to be “cut”, i.e. extract footer, sidebar and header into separate files. The diagram shows a simplified view of the file index.php with marks according to which we will cut it:

Step 2 - Header.php
Opening index.html and cut out everything 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 with them we replace the corresponding lines in our <b>header.php</b>.</p> <p>Then all tags <li>located <b>id="nav"</b>(list of pages at the top of the blog) replaced with a 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
Let's return to the index.htm file. First of all, delete the entire search form, then cut out everything from it