Hello, dear readers of the blog site. I decided to devote today’s publication to the issue of writing articles in the WordPress HTML editor ().

The fact is that sometimes it is not possible to use the visual editor in the admin panel (most often this is due to hosting problems), and without it it will be quite difficult for novice bloggers to write correctly and beautifully designed articles, because a simple editor that works for everyone without exception requires at least .

When I first started writing this blog and getting acquainted with the engine, I just couldn’t use the visual editor. Neither additional plugins with their different versions, nor other “dances with a tambourine” helped. Therefore, willy-nilly, I had to master the existing basic editor, fortunately, by that time I was already quite familiar with the hypertext markup language.

Using only the HTML editor in WordPress

But the point was not even in HTML, but in the convenience of performing everyday and frequently occurring actions. Yes, the default WordPress editor allows you to use one button to add bold (STRONG tag) and italic (EM) tags, insert links, quotes, pictures, numbered and bulleted lists, highlight various code, and .

But this was not enough for me, because... In the text of the articles, I actively used internal headings of various levels (from H2 to H5), highlighted the code (PHP, CSS, etc.) with special tags and did much more.

So, everything that was not included in the standard set of tools of the basic WordPress editor had to be entered manually from the keyboard, and this did not at all make the work of creating posts easier and was very annoying.

But this problem was successfully resolved thanks to the wonderful WP plugin Post Editor Buttons, with which you can add as many additional buttons as you like to the HTML editor toolbar, programming them for specific actions.

Today we will look at writing posts in WP in detail from start to finish, without omitting the nuances and techniques that, in my opinion, helped the blog site (you are reading it now, unless, of course, this article was stolen and not posted on another site) reach the level of several thousand unique visitors.

That is, this publication will be a detailed appendix to the article (this is not the original title, but taken from a retweet from one of the readers, but, in my opinion, it is even more successful than my original name).

In that article, I outlined the nuances that, in my opinion, influenced the influx of traffic (visitors) from search engines, and in this post I will try to delve into the details, which are often very important and not obvious at first glance.

In addition, I think that a novice blogger or those who are just thinking about creating and running their own project will not be uninteresting to learn about how easy everything is in WordPress if you know what and where to do to get the desired result. Well, okay, the introduction has been delayed, it’s time to proceed directly to the presentation of the material.

For those who do not yet have their own WP blog, but have a desire to become a blogger, or for those who want to move from another blogging engine or free platform to WordPress, I will provide links to materials on its installation and initial configuration:

Let's start writing an article in the WordPress HTML editor

So, to write a new article, you will need to go to the admin panel (http://sait.ru/wp-admin/) and select from the left menu (if you use the standard WP admin panel design) the “Add new” item in the “Posts” area "

As a result, a standard page for adding an article (post) will open, which will have a field for entering its title and a large field for entering the text of the post.

There are no tricks when entering title text in the field intended for this, but what is very important is not how you enter it, but the fact that you need to use keywords in it. How well you choose a title for your post (), the higher your post will rise in search results for certain queries.

But at the same time, the title of an article in WordPress must correlate well with its text (be relevant to the text of the post). In addition, it will be shown in search results and the future fate of your publication will depend on how attractive it is (if they don’t click on it, behavioral factors will worsen and it will leave the Top).

Usually I formulate the final version of the title after writing the article itself. Sometimes I copy all the intermediate subheadings into a separate text file and, holding them all before my eyes, I form a general one, trying to take into account everything that was mentioned in it.

This is probably why my titles are very long, but as practice shows, there is nothing wrong with that. Search engines do an excellent job with my titles and the search results display that part of the TITLE in which the words from the search query appear.

Why is the title so important for promoting a page in search engines? Yes, because for them it is the main criterion for determining the relevance (degree of compliance - and other complex words) of your article to a particular search query.

Although no, not quite like that. Not the title of the post, but the page title TITLE is the most important criterion for search engines when determining the position for a particular search query (see in full detail).

What does the title of a post in WP have to do with it then? And despite the fact that the correct TITLE should be formed from the title of the article plus the title of the entire blog, and in that order. By the way, you can configure the correct formation of TITLE in WordPress. The plugin is simply wonderful, and at the same time allows you to solve a lot of issues regarding internal optimization.

I would like to draw your attention to the difference between the HTML logical highlighting tag “STRONG” and another bold highlighting tag “B”, as well as between “EM” and “I”. The first of these tags (STRONG and EM) should be used not only to attract readers' attention to important points in the text.

Search engines will take into account words and phrases highlighted with these emphasis tags (STRONG and EM) with greater weight, compared to ordinary, non-emphasized words in the text. However, now you need to be very careful with this so as not to go too far and not.

Choosing the optimal structure of headings at levels H1-H6

Now, as for the H1-H6 heading tags, which can also be used in blog articles to place emphasis on the necessary words and phrases.

These internal subheadings, just like the TITLE, should contain the keywords and phrases for which you want to rank in search engines. The search will take them into account with greater weight than ordinary ones. But again, under no circumstances should you spam keys, because you can suffer for this in modern promotion conditions.

In addition, internal subheadings (usually from level H2, H3 onwards) provide an additional opportunity for structuring the text, which improves their perception by readers.
But there is another on-page optimization issue that has to do with the heading levels (H1 to H6) used on WordPress blog pages.

The main way to distribute heading levels on a web page is that the title of the entire article should be enclosed in an H1 tag (the highest level) and it should be one on the page, and all internal subheadings in the text should begin with H2.

By the way, I would like to recommend you a very convenient way that allows you to clearly see in WordPress where and at what level headers are used on a particular site. This is a plugin for FireFox() called .

So, if you select from the menu of this plugin (its menu is added to the top of the browser) the items “Outlines” - “Header Outlines”, then all those found on the web page currently open in the browser will be circled with multi-colored rectangles, next to which there will be a caption their level is H1 -H6.

As can be seen from the above figure, I set the level for the title of the article not to H1, but to H2, while H1 is used to enclose a description of the entire project, i.e. not to any specific article, but to the entire blog.

This Maul, in one of his articles, mentioned that the H1 level header on the site should be the same for all web pages, but he really didn’t justify his idea in any way. However, I use exactly his scheme. For internal subheadings I use H3 and H4 (sometimes H5) tags.

One more nuance. On the main page, the titles of my posts are links that lead to web pages with full versions, but on these pages themselves with the full texts of the posts, the titles of the articles cease to be links. I read somewhere that it would be better this way.

Now we still need to talk a little about how you can change the level of HTML title tags in WordPress, for example, for articles, or add, as I did, one common H1 level for all.

To do this, you will need to connect to the hosting server on which your blog is located via FTP, for example. All the files that we may need are located in the folder with the WordPress theme (template) you are using, which you can find in this path:

/wp-content/themes/Theme name/

In order to have a clearer understanding of the structure and purpose of WordPress theme files (templates), I advise you to read the article given at the very beginning of this publication (in the list).

Let's see where you can change the level of the main titles of articles located on the main page (the INDEX file is responsible for its appearance) and on pages with full versions of articles (SINGLE file).

Let's first open INDEX for editing. In it, the titles of WordPress articles are enclosed in the HTML tag H2 (second level) and in addition they are links, because they are enclosed in the link tag A:

threads)

This technique will allow you to avoid unnecessary parentheses. Also, such code fits well into the HTML context.

14. Procedural and object-oriented approaches

Object-oriented programming will help you stick to a more or less clear structure, but that doesn't mean you should deviate from the procedural principles of writing applications.

Objects are great for representing data. Example:

Class User ( public $username; public $first_name; public $last_name; public $email; public function __construct() ( // ... ) public function create() ( // ... ) public function save() ( / / ... ) public function delete() ( // ... ) )

Procedural methods have their own specific benefits.

Function capitalize($string) ( $ret = strtoupper($string); $ret .= strtolower(substr($string,1)); return $ret; )

15. Read Open Source Code

Typically, Open Source projects are written by a large number of developers. From this point of view, studying the written code in similar projects can help you gain experience. So don't waste your time on this.

16. Refactoring

Refactoring is changing code without losing functionality. It can also be used to improve readability. There is no room for fixing bugs or adding functionality. You just change the structure of your code a little.

I hope you found this article helpful! Am I missing something? Share your experience!

WordPress.com does not allow you to use potentially dangerous code on your blog, but you can publish the source code for viewing. We created a tag that preserves source code formatting and even provides syntax highlighting for some languages. Example:

#button ( font-weight: bold; border: 2px solid #fff; )

To get a result similar to the snippet above, wrap your code in these tags:

Your code

The “language” parameter defines the language and syntax highlighting rules. The following values ​​are supported:

• actionscript3
• coldfusion
• csharp
• delphi
• erlang
• fsharp
• groovy
• javascript
• javafx
• matlab
• powershell
• python
• scala

If the value of the "language" parameter is not specified, the value of "text" is used (without syntax highlighting).
The code between the "code" tags will be automatically encoded for display, so you don't have to worry about HTML elements or anything like that.

Configuration options

Tags also support many configuration options that you can use to customize their appearance. Their use is completely optional.

• autolinks (true/false) - Each URL in the code is displayed as a hyperlink. Default value: true.
• collapse (true/false) - If set to true, the code area will be collapsed when the page loads. In order to expand it, you will need to click on it. This is useful for large pieces of code. The default is false.
• firstline (number) — Determines at what number line numbering begins. Default value: 1.
• gutter (true/false) - If set to false, line numbers will be hidden. Default value: true.
• highlight (comma separated numbers) - Line numbers to be highlighted, for example "4,7,19".
• hmtlscript (true/false) - If set to true, highlights HTML/XML code. This is useful when publishing mixed code, such as PHP inside HTML. Works only with some languages. Default value: false.
• light (true/false) - If set to true, the line numbers and toolbar will be hidden. This is useful when posting a one or two line snippet of code. Default value: false.
• padlinenumbers (true/false/integer) - Allows you to control the padding of line numbers with zeros. The value true sets autocompletion, the value false disables completion, number sets a fixed number of characters for line numbers.
• toolbar (true/false) - If set to false, a toolbar with buttons will not appear when hovering over the code. Default value: true.
• wraplines (true/false) - If set to false, line wrapping will be disabled. If there are long lines, a horizontal scroll bar will appear.
• title (string) – title for the code. Can be useful in combination with the collapse option.

Examples of using the above parameters:

This line is not highlighted. This line is highlighted. This line is highlighted. This line is not highlighted. This is a short piece of code with zero-padded line numbers up to 4 characters. //In this example, line wrapping is disabled. To read the entire text, you will have to use the scroll bar. In addition, in this example, line numbering is disabled and the toolbar is hidden.

And this is a larger code fragment. Here the PHP language is selected and line number 12 is highlighted.

WordPress.com Code Example WordPress.com Code Example This line is highlighted. Very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very, very long line. This is an example of smart tabs. WordPress.com

Acknowledgments
To implement this feature, the SyntaxHighlighter project (author Alex Gorbatchev) is used. Users can set the appropriate