How to make templates on a computer. Create a template

In this article, I will talk about ways to create templates for WordPress permanent pages. Each method has its pros and cons. But before we begin, a little about what pages are and how they differ from posts.

In WordPress you can create pages (pages) and posts (posts). They differ in that the posts: appear in the feed on the main page; Categories are indicated for entries; posts cannot be tree-like, and pages: are used for content such as “About me”, “Contacts”, “Site map”; do not have categories, but have a tree structure. Entries are usually intended for chronological information (based on the time they were added), and pages are for a tree structure that is independent of time. For example, this article is published as an “entry” in the “Code” section, and links in the header menu lead to the pages: Functions.

Pages are similar to records - they are located in the same database table and their data is almost the same: title, text, additional fields, etc. Both are posts, but of different types: pages are tree-like and organized by creating parent and child pages, and posts are organized by categories and tags. In WordPress you can create additional post types, tree or not.

Creating Pages in WordPress

Often you need to create a separate page template so that the information displayed differs from other pages. By creating a page template in WordPress, you can completely change the page: remove the sidebar, footer, header, you can change the page beyond recognition. For example, on this site the page on which the WordPress file codes are displayed is changed in this way.

Method 1: page template using a file with a custom name and connecting it in the admin panel (classic method)

This is the most common way to create a page template in WordPress. To do this, you need to create a .php file, for example, tpl_my-page.php in the theme folder and at the very beginning of the file write a note that the created file is a template for pages:

Now, when creating a page in the admin panel, in the “Page Properties” block, we can select a “template”:

From WordPress 4.7. Such page templates can be created for any type of post, not just page. To do this, supplement the comments with the line: Template Post Type: post, page, where post, page are the names of the post types to which the template belongs.

/* Template Name: My page template Template Post Type: post, page, product */

Advantages:

Having created one template, we can conveniently apply it to different pages. For example, you can create a template without a sidebar and use it on different pages.

• Only records with the specified template can be retrieved. For example, you can display all pages with the “Services” template (servises.php file). Sometimes it's convenient. The name of the template file is stored in the _wp_page_template metafield, so to display pages with the specified template you need to create a query using the metafield (see WP_Query).

Flaws:

After creating the template file in the theme folder, you need to go to the admin panel and install the template for the page. This is not always convenient during development. Therefore, if you intend to use the template for only one page, use the second method.

How does this work:

When you go to the admin panel to edit a tree post page, WordPress scans all template files for the line:

Template Name: ***

The line can be located anywhere and any way in the file.

All files with similar strings are collected and displayed in the template selection in the "Page Attributes" block.

When publishing a page, the custom field _wp_page_template is filled with the name of the template file or default if no template is specified:

Wp_page_template = default
_wp_page_template = tpl_my-page.php

Next, when the user visits the page, WordPress will check the _wp_page_template meta field, if the template is installed, then the template file is used. Otherwise, the search for the page template continues through the hierarchy.

Method 2: page template via a file with a specific name (hierarchy of template files)

When a page is created, a label (slug, alternative name) is assigned to it. It is used in the page URL. And it can be changed:

To create a template this way, you need to find out the page slug and create a file in the theme folder. Let’s say our slug, as in the picture, is equal to contacts , then we’ll create a page-contacts.php file in the theme. and fill it with the necessary code (you can copy the contents from the page.php template file and edit it to your liking). That's it, now when we visit the page we should see a new template. Similarly, you can take the ID (let it be 12) of the page and create a file page-12.php .

Advantages:

There is no need to go to the admin panel and install the template file. The template starts working immediately after the file is created. Convenient for development.

Flaws:

The template is created only for one specific page. Depends on the slug of the page; if it changes, the template will not work. If you use ID, then the dependence on the slug disappears, but it becomes unclear in the theme file which page the template belongs to (if there are several templates with ID).

Almost useless when writing templates, and even more so plugins. It can be used when you edit your website, in which the slug or page ID is known in advance.

How does this work:

WordPeress selects which file to use in the following order (the files must be in the theme root):

• (any_name).php (when using a page template)
• page-(post_label).php
• page-(post_ID).php
• page.php
• singular.php
• index.php

Method 3: page template through the "template_include" filter (coding)

This is an advanced method, it is more complex, but along with the complexity it opens up wide possibilities. Using this method, you can set a template for any page, post, category, any publication on the site, or even a group of any publications. See examples with descriptions:

// the filter passes the $template variable - the path to the template file. // By changing this path we change the template file. add_filter("template_include", "my_template"); function my_template($template) ( # similar to the second method // if this is a page with the portfolio slug, use the template file page-portfolio.php // use the conditional tag is_page() if(is_page("portfolio"))( if ($new_template = locate_template(array("page-portfolio.php"))) return $new_template ; ) # template for category group // this example will use the file from the theme folder tpl_special-cats.php, // as a template for categories with ID 9 , title "Uncategorized" and slug "php" if(is_category(array(9, "Uncategorized", "php")))( return get_stylesheet_directory() . "/tpl_special-cats.php"; ) # template for entry by ID // the template file is located in the plugin folder /my-plugin/site-template.php global $post; if($post->ID == 12)( return wp_normalize_path(WP_PLUGIN_DIR) . "/my-plugin/site- template.php"; ) # template for pages of a custom type "book" // it is assumed that the template file book-tpl.php is in the theme folder global $post; if($post->post_type == "book")( return get_stylesheet_directory() . "/book-tpl.php"; ) return $template; )

This code needs to be placed in the theme’s functions.php file or in a plugin, or connected in some other way. As you can see from the example, during the template_include filter, conditional tags are already working, global variables are set: $wp_query , $post , etc.

Advantages:

You can set a template for any page or group of pages. Almost complete carte blanche in actions.

• You can create a template when writing a plugin.

Flaws:

The need to write code and connect it separately (for example, in the theme’s functions.php).

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 “fish”. 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 entire 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 in the center. 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 we 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 the mouse again and insert the date where the cursor blinks. To do 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.

Due to numerous requests from readers, today we will make a design, or rather a website layout in Photoshop. Of course, if you have never encountered this, it is quite difficult to do; many questions arise that I will try to answer today. As it turns out, there is not much material on this subject on the Internet. There are a lot of designers, but no one tells you how to make a website layout. Maybe I was just looking poorly? :)

Continuation

In general, let's do it already.

To begin with, I have prepared a simple layout, which we will fully analyze with you. Here's what it looks like:

As you can see, the template is not complicated; naturally, it is a blog template, which we will later layout in HTML. Well, for now we’ll just draw. Well, now let's go.

Software

The first thing you need is Photoshop. If you don't have it, buy it :-)

Document creation and dimensions

To create a new document in Photoshop, you need to go to “File” and click “Create”, then a window will appear in which you need to set the appropriate dimensions.

The dimensions depend on how wide your future site will be. For example, you decided that the finished site will have a width of 1000 px, therefore the document size needs to be made a little larger, somewhere around 1200 px. This is done primarily for convenience, so that your layout looks the same as in the browser.

Regarding the height, the size is set based on the theme of the template. But it is advisable to do more, I think 4000 px is enough. This is done so that all the elements fit in later. Because I somehow made the height small, and then I had to transfer everything to a new document.

In my case, the site will have a width of 1200px. So I made a document 1300 px wide and 4000 px high. Leave the rest of the settings as they are.

Website template background

After we have created the document, the first thing to do is create the background for the site. It doesn’t matter what color or picture it is, just do it. In my case it's just a white background. Select the Fill tool in the color palette, select white, then simply click on the background.

The width of the future site is 1200 px

Now we need to set the size of the future site so that it looks the same as it will look in the browser. We will do this using a ruler. If it is not active for you, you need to go to “View” and check the box next to “Ruler”. Then it should appear in your viewing window.

And here's what she looks like:

Select our layer, you just need to click on it once:

Now we need to place a ruler in the center of our document, or rather, find the center. To do this, move the cursor over the ruler on it, hold down the left mouse button and draw the line onto our document. Pull approximately to the middle, the ruler will find the center itself.

After we have found the center, we need to place our site with a width of 1200 px in the center of a document that has a size of 1300 px. To do this, select the “Rectangular Area” tool, set the Style on top to Specified size, where we write the following values: width - 1200px, height 400px. Next, simply click on our white background and we will have a selected area of ​​the width we need.

Now we place our selected area in the center with the mouse, it will find the center itself. Then you need to pull out 2 more rulers and place them on both sides of the selected area. In this way we indicate the boundaries of our future site, which will have a width of 1200 px. This ruler will also make it easier to adjust design elements. If you don’t understand, do the same as in the figure below.

We will continue to use the ruler in the future, since we cannot do without it here; it allows us to set everything evenly.

Now we have almost completely prepared our document. We found out the middle, and also identified the exact size beyond which you do not need to climb. Now let's move on to the most interesting part, namely creating a website design (layout).

Creating a website design or layout

Important!

Always create groups for layers and give them names. Because in the future you will definitely get confused!

Groups

We create a group and call it “Hider” (Hat) and in it we create a “Top Menu” group, since we will start with it. In the group, create a new layer and call it “background”. This will be the background of our top menu.

This is what you should get:

Top menu

Again we pull out the ruler and set it as in the figure:

Select the “Rectangular Marquee” tool and select along the horizontal ruler:

In the color palette, enter this color #0dbfe5, select the “Fill” tool and fill the selected area, then you need to deselect in the “Selection” tab, click on “Deselect”:

Click on the “Horizontal Text” tool. In the top panel, select the “Segoe UI” font. Now click on the blue menu background and write the name of our pages. Then you can move the text wherever you need.

Now we create separators between pages. And we’ll give it a slight depression effect. Create a new layer and select the Line tool. Then hold down Shift and draw a vertical line across the entire blue background of our menu.

Double-click on the layer with the shape and a window with the layer style will open. Check the box next to “Color overlay” and add this color #0aaacc there.

Go to the “Shadow” item and set the following parameters:

This is what you should get:

After that, we simply copy the layer with our line and place it after each word. Here's what I got:

Social bookmarking icons

Here in the menu only on the right side we will add bookmark icons. In my case, this is , but you can also install regular downloaded icons. You can download it here.

First, using a ruler, you need to set the height of our icons so that they are even. Here's what to do:

Then we create a group, call it “Social Bookmarks”, create a new layer in it. Now click on the “Custom Shape” tool and select the desired shape:

Move the cursor to the place where the icon will be, hold down Shift (so that the icon appears straight) and stretch it to the desired size. And we repeat the same process with the following figures. In the end, this is what you should get:

Let's move on to the logo. Again, create a separate group for the logo and add it to a new layer.

Logo

Go to this site and download the font. Select the “Horizontal Text” tool. We look for the name of our font Olivier in the font field. Click on the place where the logo will be located and write the name in English, because this font does not support Cyrillic. This is what you should get:

Create a “Bottom Menu” group and a new layer.

Bottom menu (Main)

We set the rulers as in the figure:

Select the Rectangular Marquee tool and make a selection. Then fill the selected area with this color #303030. This is what you should get:

Deselect the selection in the “Selection” tab. Now go to the Filters - Noise tab and select Add Noise. Then we set the following values:

Adding lines. They are done in the same way as in the top menu, only the color of the line itself is changed. I think you can handle it, and this should look like this:

Now we move on to the panel with information that will tell the user where he is on the site.

As usual, in the “Hider” group, create an “Info Panel” group with a new layer.

Information panel

First, add stripes from the ruler as in the figure below:

Select the “Rectangular Marquee” tool and select the area directly below the menu, and fill it with black color #000000

Deselect the selection, select “Horizontal Text”, change the font size to 48 pt and the color #a4a4a4. We write “Latest Entries”. This is what you should end up with:

Content

Let's move on to marking the middle of our future site. We need to use a ruler to mark where the post blocks and the sitebar block (Right column) will be located.

Immediately you need to create 2 separate groups:

• Tags— we will add text to this group with the size of our columns.
• Content— a group where our entire site will be located.

In the group, we create content for the “Left” group, which will contain our blocks with posts.

Select the “rectangular area” tool, give it the “set size” style and set the width to 800px and height to 100px. Here's the result:

Add lines from the ruler as in the figure and deselect:

In the “Content” group we create a group called “Right” (Sitebar). We will mark the place for the right column of the site.

Again we take the “rectangular area”, but in the style of the area we set a slightly smaller size with a width of 350px and the height will remain the same at 100px. And then we do everything as in the figure:

Now we know exactly where the blocks with posts and the sitebar will be. And everything will be smooth.

Remember we created a label group? There, just create a layer with block sizes labeled, like mine:

These marks will be very helpful during layout. You won't need to remember the sizes.

Blocks with records

Let's start with blocks with records; in this case they are made very simply.

In the “Left” group, create a “block” subgroup and a new layer.

Select the Rectangular Marquee tool again. In the style we set the dimensions to 800 x 300. We adjust it to the lines. Then fill it with this color #d9d9d9. This is our miniature.

In the same group, add a label using text like I have in the picture above.

Now let's add a title to the post. Take “Horizontal Text” and set the size to 35 pt and the color to black. Add right below the thumbnail:

Adding information to the post. Set the font size to 14 pt and the color closer to gray:

And the description for the post:

Now add some text and see what we got:

To separate the records at least a little, let's create a simple separator from circles.

Create a “Separator” group, select “Oval Area” and create a layer. And under the block of entries, while holding Shift, draw a circle, then fill it with this color #efefef.

Deselect the selection and look for the middle of the circle using a ruler

Select the layer with our circle on it, right-click and select “Create a duplicate layer.” Drag it a little to the left.

In the top panel, go to the “Editing” - Transformation tab and select Scaling. And we make a circle a little smaller than the first one, while holding Shift to make the circle even.

This is what you should get:

Copy the layer of this small circle and move it to the left again. We also exactly reduce its size as written above, so that it turns out like this:

Now you need to create a duplicate of the middle circle and move it to the right, and do the same with the small circle. To make it clearer, do it as in the figure:

But this is what happened only in normal size:

Now we place the block of records under the block. Create a duplicate of our “Block” group. Select the cursor (topmost) on the toolbar. And drag our block of records down. and we do this 5 times.

Sidebar (right column)

We find our “Sidebar” group and create a “Search” subgroup in it. Using a line we do this:

Select the Rectangular Marquee tool and select the search field, then fill it with this color #eeeeee

Don’t forget to deselect, click on the “Horizontal Text” tool and write the word Search in the gray field

On the left, select the Free Shape tool and look for a magnifying glass shape on top. It is available in standard figures. Create a layer in the “Search” group, point it at the field and draw our figure while holding Shift.

The search field is ready. Now let's move on to widgets.

Create a “widget” group and a new layer in it. Then add lines as in the picture. This will be the background of our header, and fill it with this color #eeeeee

Now we need to add the title itself to our title; we do this using text. We’ll also add an icon to the title. To do this, you need to choose any shape that you like and that fits the meaning :) Don’t forget to hold down Shift when adding a shape. And fill it with this color #0dbfe5

And of course we need to add entries to our widgets. You need to select the horizontal text tool, then set the size to 16 pt. And make ka in the picture below

Then we simply create a duplicate of the group and drag the widget down. We do the same as with posts.

Now we can see an almost finished and simple layout for our future website.

Footer (Bottom of the site)

Well, what would we do without him? In this template it is also not very complicated.

As usual, create the “Footer” group and a layer in it. And mark it using a ruler, select our already favorite “rectangular area” tool, select it and fill it with #0dbfe5

Deselect the selection. Take “Horizontal Text”, find the font that we downloaded (Olivier), and enter our logo, only make the text color a little darker.

And on the right side of our footer we add a menu the same as on top only without the line. You can even just copy it and move it down.

That's all, friends, we have a ready-made layout that can already be typed up :)

Also, here is its PSD file. Download and see if you don’t understand something.

Friends, if you don’t understand anything, be sure to ask in the comments.

See you soon.

They are the widest field of activity for developers. WordPress natively includes 5 main post types: post, page, attachment, revision, and navigation menu.

Posts and pages are the main types of posts for posting content on a website. And there are several differences between them.

Posts, typically appear in reverse order on the blog's home page, and pages appear without a publication date. Categories and tags can also be attached to posts, but not to pages (although this can be done in the settings).

Pages can be structured in order. This is especially useful for organizing content for site owners and visitors.

Page designs can also be easily changed by using different page templates. They will allow you to change the style of any page on your site.

Let's take a closer look at what page templates exist and how they can be used for a website.

Why not use different page templates?

WordPress themes typically use a template page.php, which defines the style of all pages on the site. Most theme developers create a home page template using the same principle. This template displays the content of the page and by default determines which design elements will be present on it (for example, header, sidebar, footer, etc.).

By default, the page template (page.php) is configured in such a way that all the necessary content is displayed on the page.

Creating a unique page template allows you to go beyond WordPress standards and change the display of content on your site to your liking. For example, you could redesign your pages by removing the sidebar. You can also change the default font and use a different header than the one offered by the home page.

The most famous custom page template is Archive(archive page template archive.php). It is available in many WordPress themes and contains all the site content, which is divided into pages, categories, tags, archive dates, author archives.

Many archive templates also display a full list of blog posts and a field to search for posts on the site. Essentially, an archive template is a sitemap that helps a user find what they are looking for.

You can find other types of page templates in themes, such as:

• Contact form
• Pages without a sidebar (sidebar)
• Landing page (landing page)
• Blog index

The page template possibilities are endless. It all depends on how convenient you want to make your site for the end user.

How to choose a template for a page?

Adding a page template is very easy. In the page editor on the right you will see a window (widget) called “ Page Attributes" It is located under the window " Publish».

In the page attributes, you can select the parent page and the order in which it will be placed on the site in the corresponding field. And the option between them allows you to change the template. All you need to do is select a template for the page and update it.

The template can also be changed in another way - through the list of all pages. You just need to click on " Properties».

Then change the template in the menu options on the right.

Template options will not appear if your theme only uses a standard page template.

Creating a basic page template for the site

Creating a new page template for your WordPress site is easier than you think. To do this, you do not need to have experience in developing and creating themes or plugins.

You just need to use the code page.php an existing theme template as the basis for a new page template. For example, let's say you're using the old default Twenty Twelve theme. File page.php has the following code:

You can use this code to create a new page template. To do this, you just need to make sure that the code comment is placed at the top of the new file. This will define this file as a page template:

/* Template Name: My Custom Page Template */

Your page template will look like this:

Let's walk through the process of creating a basic page template and try to create a full-width page template without using a sidebar. The Twenty Twelve theme comes with a full-width template out of the box, but we'll pretend it doesn't because we need it for our tutorial.

In the standard template, the page sidebar is displayed on the right side:

Standard page template in the Twenty Twelve theme

It's easy to create a new page template without a sidebar.

First you need to create a new file using any text editor (Notepad or Notepad++ will do). It can be called something simple, for example, nosidebar-page.php or full-page.php(we'll talk about file names a little later). Then upload the file to your site so that it is located next to the page.php file.

Essentially, our template is a template from page.php Twenty Twelve themes, code removed only.

It looks like this:

Once the template file is loaded into your theme, it can be used for all pages. You can also link a page to this template to remove its sidebar.

But that's not all. So far we have only removed the sidebar. We need to make sure that the content is posted across the entire width of the page. In the meantime, it only takes up two thirds of the page:

If you look at the code in our template, you'll see that the bulk of the content is under the influence of a specific CSS class: