We display posts

Let's move on to the part containing the main content of the page - the file will be edited index.php.

Delete the contents of the block right and instead paste the code for dynamically displaying posts. Alternatively, remove all the code from the file and insert the following instead:

The beginning of a loop that will cause the page to keep posting posts until they run out.

">

Displays the post title.

/ /

Date in the format day, month (abbreviated), year. Tags, comments.

Conclusion of the post.

The end of the cycle, provided that there were records.

If there are no materials, display the appropriate inscription about this and leave the cycle.

Displaying page navigation provided that they do not fit on one page.

The seemingly simple code changed the page globally - the blog became truly dynamic. Each post can be viewed, the links work.

Further design and placement of elements depends only on your imagination and layout skills - you can do whatever you want with the display of data, but work on the template is not yet completed.

Adding widgets

To the left of the main content in the template there is a panel, on it there is an Information block (a kind of widget) and a side menu. The information block should not be static, and since it is very reminiscent of a widget, I suggest making it a widget. To do this you need:

1. register a widget block;
2. bring it to the right place.

Now more details.

1. In your theme directory, create a functions.php file. It stores the functions that make the template work. It may also contain other custom procedures.

2. Add in the following code:

"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "

", "after_title" => "

",)); ?>

This code registers a widget block. Instead of MySidebar, you can enter any other name. You can register a menu in approximately the same function in this file, but I decided to make do with little expense and not do this, in order to minimize the contact with PHP, and at the same time show two different approaches to solving one problem.

3. On file sidebar.php erase the lines:

Information

Further...

and write instead:

The Information block, as expected, disappeared, leaving only a static menu on the side.

4. But changes for the better have occurred in the admin panel - section Appearance got sub-items Widgets And Menu. Go to the first one. Open it and look: inside appeared registered in the file functions.php block (for me it’s MySidebar).

5. To recreate the information block, drag the widget to the sidebar Text, in field Heading enter Information, in field Text- code

We offer you holiday discounts. Further...

6. Refresh the blog page - the block was recreated almost identically (small nuances change in the file style.css and I will not focus on them).

Adapting the menu

The second part of the sidebar is the vertical menu. It also needs to be converted from static to dynamic, so that it can then be edited directly from the admin panel.

1. Remove huge nested menu list in file sidebar.php and enter the code instead:

2. In your WordPress dashboard, open Appearance -> Customize -> Menu, click the Add menu button, name it so that the name in the admin panel matches the name in the page code sidebar.php(I have this left_menu) and add all the necessary items.

3. Save the changes, refresh the page and make sure that the dynamic menu on the left side of the site works and is displayed correctly.

Page code sidebar.php compared to the original one, it decreased greatly and eventually became like this:

In fact, only the inscription remained static Menu. And this is because it is unlikely to change, although it can easily be “revitalized”, for example, by implementing this block in the form of another widget area and adding a Custom menu block to it, but if you carefully read the article, you can now easily do it yourself.

Working with the footer.php file

Before you create a website template in HTML/CSS, you need to work it out. The design is usually drawn in Photoshop. The finished layout is saved in a file format .PSD.

As an example, let's create the website design in the figure below.

1. Open Photoshop and create a new document in it ( File -> New or Ctrl+N).

2. Set the initial parameters. In practice, it is almost impossible to think through a design with pixel accuracy - during the layout process something will definitely need to be changed, moved, or remade. Therefore, the dimensions can be set approximate, and it is advisable to specify the width and height of the document obviously larger than the planned dimensions of the site, so that all elements fit exactly into the layout. Let's make our document 1000 pixels wide and 1500 pixels high. Please note: pixels, not centimeters. You don't have to touch other parameters.

3. Turn on the rulers. You will need them during work, because rulers allow you to measure distances very accurately. Check if your rulers are turned on. If yes, you will see scales next to the left and below the top toolbar.

If there are no rulers, turn them on ( View -> Rulers or Ctrl+R).

The rulers should show the value in pixels. To switch to them from another length measure, right-click on the ruler and select the corresponding checkbox in the menu that opens.

4. Check that the font size is specified in pixels and not in points. If configured incorrectly, go to Edit -> Settings -> General, in the window that appears, go to the tab Units of measurement and rulers, in the drop-down list Text choose Pixels and press OK.

5. We immediately create a background for the site. Here we have a gradient fill of orange turning into yellow. Select a tool in the left panel Gradient.

On the panel that appears at the top, click the button Mirror Gradient, select a color on the palette to the left.

Using the tools in the window that opens Gradient Editor, select the desired colors. To set the exact color of a control point, click on it, press the button Color and in the color picker window, specify it in RGB, HSB, CSS or any other available format.

As a result of the manipulations, the gradient turned out as follows.

To apply a gradient to the current layer, move the pointer over it while holding down the left mouse button.

6. Save the background to a file. What we've done should be displayed below the main page and occupy the entire browser window - a kind of background. For example, the width of the site is 800 pixels, and the user’s screen resolution is much higher. The remaining space (all except those 800px that will be occupied by the page block) will be filled with a gradient background.

Since the screen resolution cannot be predicted, you can cut a one-pixel strip from the created background and save it as a picture. The browser will fill the background with it across the entire width.

6.1. Choosing a tool Rectangular area.

6.2. Select a strip of arbitrary width, but along the entire length of the layer.

6.3. Copy the selected area ( Ctrl+C).

6.4. Create a new document ( Ctrl+N), set its width to 1 pixel and paste the copied ( Ctrl+V).

6.5. Save the file to JPG-format

7. Create the page background. The background will be plain white. Choosing a tool Rectangle and in the properties window set the necessary parameters. We have a rectangle of 800x1100 pixels, the upper left corner of which lies at point 100.0.

8. Making the background of the header. A gradient fill similar to a matte, 780x80px in size.

We save it as a separate graphic file 1 pixel wide, as we did with the background.

9. Create a top menu. Using the Horizontal Text tool, add the first menu item to the layout - home. The layer will be created and even renamed automatically, so you don't have to do anything with it.

It is important here that all points are distributed evenly, so it is highly recommended to use rulers. To drag out a vertical line, drag the pointer while holding down the mouse button from left to right. Use rulers to measure the distance, taking into account that each menu item should occupy 120 pixels in our case.

10. Similarly, insert the remaining menu items.

11. Add a logo. We already have it ready, so all that remains is to carefully insert it into the layout. To do this, click File -> Open, then click on the image and, while holding down the mouse button, move it to the title of the template document; when it opens, drag the image to the desired location on the layout and release the mouse button.

12. We write the name and slogan of the site. With the tool we already know, we supplement the almost created logo with inscriptions.

13. Go to the sidebar. First, let's create and save a gradient fill for its headers as a separate file. You are familiar with the tools, no explanation required.

14. Add the title text of the information block to the newly created gradient.

15. Draw the frame of the area. To do this, just use a transparent rectangle with black contour lines. Select the Rectangle tool, set the shape fill type to No color, click the Set shape stroke type icon and select black color, otherwise there will be no lines. If the outline is too thick, set the line width to 0.5 pt.

16. Below we add a block title with a gradient fill, as in steps 12-13.

17. Create a menu block for the left panel. Add a 100px wide orange rectangle with a 0.2 pt yellow outline.

18. Add text to it.

19. Using duplication of layers and rulers, we create five more menu items in the left panel.

20. We write the text in the main part of the page, using the same tool.

21. Add a photo to the main part of the page, as we did with the logo. To copy an image, simply move it with the mouse while holding down the key Alt. If suddenly the picture does not fit in size, use the Transform tool ( Ctrl+T).

22. Draw the background of the bottom of the site - an orange gradient 64 pixels long.

23. Save the strip of the lower background 1 pixel wide into a separate graphic file.

24. Reduce the page height. It turned out that all the elements have already been drawn, but there is still some extra space left. This is where meaningful layer names come in handy. Among others, select the background layer (we call it “Background”) and using the Transform tool, reduce the height of our white rectangle to the bottom edge of the page footer.

25. Save the template to a file format .PSD (File -> Save).

26. The result of this action was a simple, but already normal-looking website template.

Now, from the PSD layout, all that remains is to create a website template using HTML/CSS, but I will talk about this in the next article.

Greetings. This article will answer the question of how to create a unique template for WordPress, beautiful and different. You will have to try and strain your brain a little.

How to create a unique template for WordPress - let's get started

Below is a list of steps on how to create a unique WordPress template with your own hands and for free.

1. Change pictures.
2. Change the template name.
3. Make minor edits to styles.

Let's start analyzing each point in order.

Changing pictures

I’ll look at the simplest point using the twenty eleven template as an example. We replace stock images with our own converted ones. It is necessary to change the header, footer, background and other small ones.

But I can’t come up with a specific solution, my template has a minimum of pictures (and those that exist are huge). In general, you need to replace most of the images with your own. Let's look at the two elements that are replaced:

• The first is through the admin panel itself.
• The second is through code.

If you understand the principle, then great respect to you.

Through the administrative panel itself

Modern themes have a good function of settings through WordPress itself, why not use them? Go to the administrative panel of the blog, appearance and configure.

If the theme is made for people, then the global design settings will be here, and we’ll deal with the little things below. In the section on the example of Twenty eleven.

1. General theme colors. Settings for basic elements (headings, captions, etc.).
2. Header image, that is, in the header.
3. Background image. It is not present on all themes; it can be customized either with a picture or just with color.

At this stage, this is what I got. Let's move on.

Changing pictures manually

Suppose you are not satisfied with the picture of some element in the template, and you want to change it. What to do? We'll figure out. For example, I will take the output of a picture of the number of commentators.

The system applies to all topics.

Right-click on the element and look for its output in the code using the “view code” tool.

1. The element itself, right-click on it.
2. Select the “view code” option.
3. This is the HTML output code itself, we don’t pay attention to it.
4. This is the treasured address where you need to go with a replacement. The file you are looking for is bubble.png, located in the images folder in the theme itself.

That is, you need to create the same file, with the same name, and replace it. I hope you know how to use file managers like FileZilla. I wanted to make a picture that displays the number of comments with a star and an outline. I made it in Photoshop and saved it as an image with the name bubble and the extension png.

Done, I opened Filezilla, and went to the active twenty eleven topic in the images folder (which we recognized above). and simply drag and drop the new image into the folder, with replacement. All details are in the screenshot.

If everything is done well, then the new picture will be displayed on the site, here is a snapshot.

As you understand, you can change any picture using this method if there are no settings in the administrative panel.

Changing the template name

You can only change on free themes, this is important.

There are two points that need to be done:

• Reworking the title in the style.css file
• Change the name of the theme folder.

Reworking the names in style.css

To do this, go to the editor ( reminds me of the appearance editor), and find style.css.

On the screen we see the inscription, everything needs to be changed here. Every style.css file contains template information at the very beginning. It needs to be changed to at least these lines.

Theme Name: moi-template Description: Standard version 1.. License: GPL

It should look like this after replacement.

You fill in your details, don’t take mine, because we make the template unique. At a minimum, change the name, author, and website.

We figured it out, let's move on to the next point.

Changing the name of the theme folder

We do it through a file manager, I use Filezilla. In the previous paragraph, we changed the name of the topic in the line:

Theme Name: moi-template

Need an original name twentyeleven change to a new one, in my case, moi-template. Go to the FileZilla folder themes, and find the original name twentyeleven.

And we change it to a new one.

If everything was done correctly, it will work. The theme for search engines will no longer be standard, but unique.

Minor edits to styles

I can’t come up with a single solution on how to create a unique template for WordPress, you just need to look at the template purely visually and see what you don’t like. I look at the sidebar.

Really, not really? I want to make the heading font larger, because they are small and blend into the background. We see all the steps in the picture below.

1. Select the element that we want to edit. Right-click.
2. Click on “view code”.
3. The whole style of this title.
4. The style name you are looking for.

Open the style.css file. We look for the name of the style using the key combination CNTRL + F.

I want to make the font larger, make a solid line under it, change the color and thickness of the text. To do this, I change or add the following parameters.

Color: #1a1a1a; font-size: 15px; font-weight: 600; border-bottom: 2px solid #271eb1;

Let's look at the lines of code.

1. Color change.
2. Change of size.
3. Change text width.
4. Adding an underline.

We change or add parameters to the style accordingly. It should turn out like this.

All changes will immediately appear on the website.

My task now is not to teach layout, it will take a lot of time and articles, but to show the very principle of how to make a template unique.

So with all the other elements, bring it to ideal. I show what happened in this article.

This article answered the question of how to create a unique WordPress template. And the standard theme can be called your own.

If you have any questions, please leave them in the comments. Good luck.

Routine work with documents of the same type can be minimized if you create them based on Word templates. Our material today is about what they are and how to create them.

Quite often, in the course of our activities, we create documents of the same type: acts, orders, letters, contracts, term papers, etc. All these documents, as a rule, contain some text or graphic elements - headings, details, logos, text blocks that are repeated from document to document.

An ordinary user of the Word text editor, when creating another document, is forced to use and edit a document that has already been created by someone and contains all these elements, or simply copy the necessary elements into a new document, again, from the old file, while realizing that in this In this case, editing is inevitable.

A template defines the basic structure of a document and contains document settings such as AutoText elements, fonts, assigned keyboard shortcuts, macros, menus, page setup, formatting, and styles. (From Word Help)

This routine can be minimized if you create a document based on a template. Sometimes patterns are also called “fishes”. However, no matter what you call it, templates really allow you to significantly increase your work efficiency.

A template can be created in two ways, taking as a basis a document with all the elements present, or starting from scratch, including the necessary elements yourself.

I'll show you how to create a template from scratch, making it easier to understand the whole process rather than modifying an existing file. As an example, we will create a simple formal letter template. There is nothing complicated about this if you follow my step-by-step instructions.

So let's get started.

1. Let's create a blank document.

2. Let's save it right away. Let's go to the "File" menu and select the "Save as..." command. The “Save Document” dialog box will open, in which we need to select the “Document Template (*.dot)” type in the “Save as type” field.

This will open the Templates folder, where all templates are saved by default. Give the file a name and click the "Save" button.

3. We determine which elements (text and graphics) and where exactly will be located in the document.

As a rule, all official letters contain elements such as the name of the organization, logo, and details. The text of the letter itself may contain a polite address to the recipient of the letter and, in fact, the text of the letter itself. At the end of the letter is the name of the position of the head of the organization with his signature. We will take a similar structure of the letter as a basis.

4. We will place the name of the organization at the top of the document, centered. To do this, we will print the name of our organization in capital letters, for example, “WHITE NIGHTS” LLC. Press the Enter key and go to a new line.

5. We can insert a dividing line below. To do this, click on the “Drawing” button. A drawing panel with control buttons will appear at the bottom of the screen. We are interested in lines, so select the corresponding “Line” button. The mouse cursor turns into a cross.

Please note: you may have a so-called canvas inserted - a dotted area for inserting shapes/drawings. To prudently get rid of the canvas insertion, go to the “Tools” menu and select the “Options” command. Click the General tab and uncheck the Automatically create drawing canvas when inserting AutoShapes option. Click "OK" and close the "Options" window.

6. Move the cursor in the shape of a cross to the name of the organization and just below draw a line from the blinking cursor to the right edge of the field, pressing and holding the left mouse button. The line is drawn.

7. You can leave the line as is, or you can give it a more elegant look. To do this, there is a corresponding Line Style button on the drawing panel. Click on it and select any type.

8. Once you have settled on any type of line, double-click below that line - the address and details of the organization will be printed in this place. Type the data that you consider necessary: ​​legal and actual address, telephone, fax, website URL, E-mail, bank details.

9. Now format the typed text according to your ideas. For example, I selected the name of the organization and assigned it the style “Heading 1”. I also centered the title and created a sparse five-point spacing between letters.

I reduced the font size of the text below the line to nine points and aligned it to the center. You can see a sample below in the screenshot.

Thus, we have created a permanent (unchangeable) part of our template, the so-called “header”. Now let's move on and create the fields into which you will later enter your data.

On the left side of the template, under the “header,” double-click and type the name of the city, for example, Moscow. Then, in the opposite (right) part of the template, double-click again and insert the date where the cursor blinks. For this:

1. In the “Insert” menu, select the “Date and Time” command. A window will open in which you select the desired date display format, for example July 18, 2006.

2. Check the “Update automatically” box. Now, when creating a new document based on this template, the date will already be set in accordance with the current time on your computer.

3. On the right side of the template below the date - indented from the left edge by about 10 cm along the horizontal ruler - double-click the mouse. The cursor will blink, and in this place we will insert a field to substitute the data of the recipient of the letter.

4. In the “Insert” menu, select the “Field” command. A window will open as in the screenshot below:

5. In the Categories area, select Document Automation. In the Field names area, select the MacroButton command. In the "Message" area (Display text), type the text "Insert recipient's full name" and click OK.

Strictly speaking, in the “Macro name” area you should have specified NoMacro (that is, a command without a macro), but it was not in the list. Therefore, we leave it as is, at least I have never encountered any errors.

6. We get a field with our text.

If you have this field displayed as regular text without shading, then I recommend doing such shading. This will allow you to later easily identify the required fields for data entry in the document. To do this, go to the “Tools” menu and select the “Options” command and on the “View” tab, in the “Show” group, select the “Always” option from the Field shading list ).

Below you can additionally insert a similar field for the recipient’s address and position.

All we have to do is insert a welcome message to the recipient of this letter, the text of the message itself and the sender’s signature at the bottom. Try to insert these fields into your template yourself, based on the instructions given above, and do not forget to save the resulting template.

For example, you can take a look at the screenshot of the template I created:

Now, to use this template to create a letter, you need to go to the “File” menu and select the “New” command. A task pane will appear on the right, in which you need to select the “General templates” (On my computer) option. A window will open with all available templates. Select the template you created and click "OK". A new document based on your template will be loaded into Word. Add your data in the appropriate fields and enjoy the automation.