Where to paste this code in WordPress? General theme file structure.

25.01.2022

and you will need to paste the code.

So what are we doing? We click on the magnifying glass icon and start inspecting the area in which our article is located. It is necessary to find such a part of the page when the area of ​​the entire article is highlighted. This will be the block that displays the content.

As an example, I created a new article with little content to show how a given block would be highlighted.

By clicking, you must also find the block that contains your content. On hover, you see a small tooltip showing the name of the given block.

When you find such a part of the template, then click on the mouse button and this part becomes active. In the element's code view panel, the line of code with this block will be automatically highlighted.

As you can see, this block has exactly the same name as in the hover tooltip.

When we know the name of the block in which the main part of the article is displayed, we can go to the necessary file and insert the code we need after this block. Let's take the record output file (single.php) as an example.

I open it in the Notepad editor and look for a line in the code that starts exactly the same as in the element's code view panel.

It is very convenient to work in the Notepad editor, because when you click on the opening tag of the block, the closing tag is also selected (shown in the image above). The closing tag indicates that this is the end of the content output. It is after it that we can insert our social buttons, related posts and other functions.

I just inserted the social buttons there along with the subscription form for updates.

They are displayed on the pages.

Similarly, insertion into other template files (pages, headings, archives...) takes place.

Without practice, this insertion method is unlikely to be mastered by text and images. Therefore, take it and try it. I'm sure everything will work out. Also to help the video at the beginning of the article.

About determining the place in the template file for subsequent insertion into it when you need it, figured it out.

The last moment left, which is worth consecrating in this paragraph.

There are quite a few settings that require intervention in the template's functions.php file. But you also need to understand how to insert codes into it.

As a rule, on all blogs they write that the insertion should be done at the very end of the file, before the closing tag?>.

But what if this tag is not in the file? For example, I just don't have it. How to be in such a situation? The absence of a closing tag does not mean that the file is invalid. The blog does work. So everything is OK.

In this case, I propose to do the opposite - insert it into the code at the very beginning of the file before the opening tag. Look at the image below.

The opening tag is highlighted in red, and the code that was inserted is highlighted in blue.

This is one option. You can also insert code at the end of the file, but before the last code. In this case, you need to understand at least a little where the last code starts so as not to cut it off.

That's all. If suddenly you have the same situation with the absence of a closing tag in the funsctions.php file, then you will know how to proceed.

Defining visual styles in a template

Also, we ourselves can view the design styles for page elements and change them, as well as add our own. The same element inspector helps with this.

When we find the required element and click on it, the styles for the selected block (element) are displayed in the right area of ​​the code view panel. I will show the styles for the same block of the article discussed above.

If we want to edit these styles in real time and see how this or that element will look, we can change them right in this panel. Just click on the values ​​of the desired styles and change them.

But the changes will be valid only until the 1st page refresh. To apply these styles, you must add them to the template's style file. In one of the images above, I've shown with a blue border an area that shows the name of the file where these styles are written, as well as the exact line they start on.

Therefore, we open the style.css file and look for line 890 in my case.

Here you can edit them. Save the file and upload to hosting.

I note that I edit all the files on my computer. In this case, I use external programs, which makes it possible to cancel any changes if any jambs occur. The same goes for various experiments with codes and scripts - everything is on .

I strongly recommend that you also perform similar editing of any files on your computer. To do this, you must first download the files to your computer from your hosting using an ftp client. I wrote about this in . And then just open the files with any editor convenient for you that can open them. I use Notepad for this purpose.

This article has come to an end. Here is such a tricky process of determining the place where you need to insert some code or script. At first glance, this procedure may seem complicated. But everything is very simple. Try a couple of times and you will not ask such questions.

Of course, you can embed codes and scripts on your blog using special plugins, which I will consider without fail in future articles. But, in order to avoid using them, you can do such actions without them, which I recommend. By doing this, you will get rid of the extra load on the site, thereby speeding it up and making it more convenient for your visitors to use.

All friends. I end with this. I look forward to your questions in the comments. We'll figure it all out. See you in new content.

Sincerely, Konstantin Khmelev.

Of course, not everyone needs this information, but only those who, on their pages, share with readers their best practices in picking the code (read the guts of the site) and some of its upgrades through ... well, you understand Through intervention in "genetics"! What did you think?

Looking ahead, until I started the main story, I can tell you that I will continue to tinker, what I will write about and which, very likely, can be useful to you if you also have your own resource for keyboard creativity on the Web. And therefore, I recommend that you follow the release of new articles, so as not to miss the release of a freshman. Especially if you haven't done it yet, I wonder why?

And now, my dear beautiful ones, it begins - the story.

A reasonable question may arise, but does the loan generally need to bother about inserting the code? Why do you need to do some kind of code highlighting and why can't you just paste it, like text, for example?

And everything is simple - if you try to insert the code just like that, then instead of displaying it, it will sometimes start to run and do all the functions for which it was intended, moreover, right where you insert it. From all these "charms" the site can "float", it can "twist", and the article itself turns into something incomprehensible and something in the middle - ugly! Yes, and the code itself in its “bare” form, not a very readable “spectacle”, which for an unprepared look can represent an indigestible substance, from which, the beholder may even develop a reluctance to understand anything and delve into the essence of what is happening. In short, it's not! Yes, you can see for yourself if you look, for example, at the image in the code:

To make it “it”, there are several options, and more specifically 3. I will try to describe everything, as I promised at the beginning, and you yourself decide which one will be more convenient and pleasant for you to implement and perceive.

How to insert html code into the body of an article beautifully and correctly.

Option #1 - code highlighting through the WP-Syntax plugin.

More precisely, this option is implemented through a bunch of two plugins - for ease of use. The first part of the bundle is called: WP-Syntax and performs the main function. And the second part is a service one and is called WP-Syntax Button, which implements the work by pressing a button, which this very button adds to you on the dashboard of the wordpress editor. Download both parts of this bundle either through a search in the admin panel of the blog by name, or from the pages of the engine repository. The repository page for WP-Syntax is here. And the page for WP-Syntax Button . We're not on the bus, right?

The installation is standard - found, downloaded, activated. Please note that the Button plugin has not been updated for over two years and there is no data on its compatibility with your new version of WordPress, which may alert you. If you are concerned about this circumstance, then you can not download the button and get by with only the first part of the bundle - this will also work, only less convenient. From myself, I can say that I use the full set and everything works.

If you install everything, then you will have a new button "Code" on the editor panel.

To insert code through this plugin, you must first insert it in visual (normal, where you type) mode, select it with the mouse, and then click the "Code" button and select the language that matches your code from the drop-down list. At the same time, you can set the numbering of lines by specifying the number of the first in Line Number. Once selected, press Insert.

At the same time, after saving / updating the post / page, you will see something like this picture with your beautifully inserted picture code, for example:

If you did not install the WP-Syntax Button part, then you will have to use this combination of code to insert the code:

Enter your code here

Where, Language is the language of your code. This combination must be inserted in the HTML editor, and enter your code inside. The list of supported languages ​​is on this plugin page. The option of inserting code like this is not very convenient, but someone may need it. The result will be something like this:

1	Enter your code here

Option #2 - Syntax Highlighting via the SyntaxHighlighter Evolved Plugin, the name of which is exactly what is translated. You can download it by searching for the name in the blog admin panel, or from this plugin page. The installation is standard. This plugin works like the previous one, but in a less convenient way.

After installation, you will have the menu item Settings> SyntaxHighlighter, where all its settings will be. Yes, I forgot to say that the plugin is in English and non-Russian - a drawback. If something is not clear, then use the translation of the page.

Plugin settings can be left at default - they are functional. Or you can set the values, as in the picture with an example of my settings:

If you get confused, then in the settings there is a Reset to Defaults button - resetting the settings to the original ones. And also at the bottom of the page, under the buttons, there is a preview of the code display - you can safely play around and choose your own version of the settings and output of the code. There is a list of supported languages ​​and a more detailed description of its settings - everything is in Russian, you'll figure it out.

To insert html or php code into a site post with this plugin, you need to apply one of the constructions from the example in the plugin settings page (at the very bottom):

When writing a post, switch to the HTML editor, select the desired language option from the example, paste it, and paste your code inside. It will turn out something like this:

Here you enter your long code

Option number 3 - insert html or php code without a plugin.

To do without the plugin and insert the html code into the body of the blog, you need to enclose it in the following code:

INSERT YOUR CODE HERE

Where, height and width are respectively the height and width of the output field with the code in pixels, color is the color. You can choose the color with the pipette in, which I already wrote about. Width and height can be adjusted according to the parameters of your site. The output will be something like this:

In appearance and functionality, this is, of course, less pretty, but it does not load the blog with unnecessary plugins, although I myself do not use this method. Brought him in for a change.

I think now decide how to insert html code beautifully into a blog.

This is where I will end my talk. I hope I did something good for you today Thank you for reading.

A little positive:

Clicking on social buttons and comments are welcome!

Follow the buttons, tell your friends about the article - this is for the money!

Moreover, I would like to immediately clarify that we will insert the code into the article itself, so that our readers can copy it without wasting time typing the text itself. Thus, we will increase the convenience () of our resource - this time. Yes, and the articles will look more professional and finished - these are two.

I would also like to note that the information in this article will be useful to people who either, as we tell you, how to make various kinds of add-ons on the site, or to users who simply like to share useful information. And it doesn’t matter that this information is a code 🙂 By the way, I’ll reveal a little secret, on this project we display it using the Wp-Syntex plugin.

You ask: "Why do we use it?" The answer is simple - there are no comrades for the taste and color. Joke. In fact, we chose this plugin because it is easy to use, it perfectly adds visual style to various programming languages ​​(css, html, java, javascript, perl, sql, etc.), and it does not load our server.

Well, since I let it slip about Wp-Syntex, let's use it as an example to show how to insert code into WordPress articles.

First you need to install this plugin. We talked about how to do this in an article about . Therefore, I will not describe this action here.

As a result, you will have the following output:

The code you want to be displayed

Also, instead of php in this code, you can insert another programming language, such as css or java. At the same time, the style of appearance will change.

Additional Features of Wp-Syntex

If you add the attribute to the opening "pre" tag line, that is, the code that you will have to paste will begin like this:

The code you want to be displayed

I hope you notice the difference.

There is one more small attribute that you may need - this is escaped. It allows you to convert html character codes directly into the characters themselves. For example, ">" it will convert to ">". In order for this function to work, insert the following attribute into the opening "pre" tag:

escaped="true"

Accordingly, the tag will begin like this:

< pre lang= "php" line= "1" escaped= "true" >

Also on the Internet, I found information that you can install another plugin (WP-Syntax Button), which works in conjunction with our plugin and adds a code insert button to the WP editor. I was not too lazy and decided to test it.

Immediately upon installing it, I was alerted by the fact that it had not been updated for a long time and was not tested with our version of WordPress. Well, what can I say, my fears were justified.

After activating the WP-Syntax Button, I decided in one of our articles I tried to insert a java script. I did everything as it was indicated in the mountain of instructions and recommendations. Pasted the script into the article, highlighted it and pressed the "code" button.

After that, he indicated the programming language and the line number from which the script output should begin.

You may ask why I wrote about this experiment in this article? By this I wanted to say that when you are looking for some information on the Internet, pay attention to the date of publication. After all, there is a very high probability that the information in the old article was relevant several years ago, but at the moment it simply does not work, and its use or implementation can lead to vulnerability of your project.

On our blog, I try to keep all the material up to date, constantly monitor updates and, if necessary, make adjustments to already written articles.

If you want to receive up-to-date information to your e-mail, then I recommend.

Video "How to insert HTML code into an article"

Friends, if someone prefers to see how this is done, then I recorded a video for you. And I remind you that we also have a youtube channel that you can also subscribe to.

Related articles:

Well, I hope the article turned out to be not difficult, and I was able to tell you in detail about how you can insert html code into the site without unnecessary troubles.

Don't neglect the aesthetics of your blog. After all, our reader, as in life, meets by clothes, but sees off by mind.

That's all for me!

Bye Bye!

Best regards, Anton Kalmykov

Hello to all readers and subscribers! those who did not have time to become one - please, in order to be the first to learn from me about new posts on the Video Blog site

So, the other day I ran into a problem, I couldn’t insert html code on the page, I searched through Google, Yandex and even mail search, but I didn’t find a specific answer to my question on how to do it like this.

it's very easy to do this, you just need to use the textarea tag + use additional parameters for height, width and padding

Let's put it in order how and what. On wordprese, you can simply put the necessary code in the visual editor and it will be displayed like this:

»alt="Automated money making system"/>

But as you can see, the code is not displayed beautifully and it is not very convenient to copy it. So, to implement such tasks, you need to use the tag:

</b> between which to enter your code or any text <b> .

Also remember that this tag must be inserted in a text editor not only on the wordpress engine, but on any engine.

It is necessary to take into account and use additional tags that add indent parameters from the top line style=margin: 2px; Also the height parameter: height: 40px; and of course the width parameter: width: 660px

Now I will summarize what I have written. When opening the code </b> you need to insert the width and height indent parameters, it looks like this: <b><i><textarea style=»margin: 2px; width: 660px; height: 40px;»> </i> </b> set the required parameters in pixels and your code is almost ready, then write text or code and then close the tag <i><b>

And finally, as promised, I am attaching a Cheat Sheet:

How to insert html code into html page?
—————————————

Copy the tag to notepad and between paste the code below, while replacing the link to your site and the link to your banner

</b></p> <p><a href=»http://ваш_сайт.ru»><img src='/samsung-galaxy-s5/kuda-vstavlyat-etot-kod-v-wordpress-obshchaya-struktura-failov/' loading=lazy loading=lazy>»alt="enter the text that is shown when you hover over the banner"/></a></p> <p><b>

Footnotes:
* - a tag that allows you to embed any Html tag on any web page
*style- a parameter responsible for the style, size, color of the text inside the tag
* margin: 5px- indent parameter
* width: 660px- width parameter
* height: 80px;- height parameter

That's all dear friends, subscribe to the RSS feed and also to my youtube channel
Good mood to you all. 🙂

about the author

Many probably do not understand why I named my blog Social lift from darkness to the sun Then I'll tell and explain. For me, the Internet is an elevator into which I plunge to the level of skills, skills, and earnings that I need; but social, because it is for people, for society, for those who wish, for those who are very similar to my vision. Dark- this is an asshole, or in other words, the bottom of an ordinary life in which I was, in which many now, yes, probably half of the people in our country are in this asshole, who think that this is a seagull, but not ... Sun- this is what gives life to absolutely everything living on the planet, including us. If there were no sun, there would be no life. Sun is the energy for life. And to sum it all up, InternetLIFT- this is an opportunity for ordinary Internet users who work for their uncle, are in financial trouble, dream of getting rich, but do not know where to start. Internet Lift is a platform that will help those who wish to become slightly or significantly savvy in the intricacies and schemes of earning. They will be able to learn where to start, where to go, and how to become your own boss. I hope my advice and articles will help you and me as well. Since one day you will understand why I blog, if you know something, it is only valuable when you remember it. And when you record and share, it will be forever, including in your memory!!!

Hello dear friends. Today, continuing the topic of speeding up blog loading, let's talk about the possibility of replacing plugins with "light" scripts. Scripts, unlike plugins, have a much lower load on the server, and therefore the site loading speed will be higher. To date, there are a lot of plugins and they are able to solve many tasks of bloggers. But often, these plugins can be replaced by the work of faster scripts. And sometimes even disable unnecessary plugins. And the fewer third-party plugins, the higher the loading speed of a site or blog.

If you analyze the site loading speed, you can see which of the plugins slow down the loading speed of your site. What services to use for verification I wrote. In my case, the biggest brake is a plugin that allows you to display source code examples in articles, with syntax highlighting of this very code. This plugin is called SyntaxHighlighter.

The result of the test did not even fit on the page. Of course, code highlighting is very beautiful, but if you look at it, it's not about highlighting. By and large, the efficiency of the code is important. And if the code is simply inserted, then the probability of its inoperability is high.

And today I will tell you how to replace the SyntaxHighlighter plugin with the usual code, and even insert a button into the edit panel of your blog.

How to enter code in an article without a plugin

It is known that in WordPress, in order to display an example of the source code in an article, it is enough to go to the test editor when typing an article from the visual editor and enclose the desired code in tags

Your code

But such code will hardly stand out in the bulk of the text of your article. And so you can add several styles, say, background color, font, frame, and so on. So your code will be most clearly presented in the form of an example.

How to change the type of displayed code

To do this is quite simple.

Option 1

You can assign a tag

Class, for example, class="cod" and set the desired styles in the style.css file.
.cod ( width: auto ; background-color: whitesmoke ; border: 1px solid #C7C3C3 ; border-radius: 5px ; color: #167dec ; ) 
Option 2
You can also set styles directly when inserting the code.  It will look something like this:
 
Your code
 
And in the first and second examples, if the inserted code gets out of the article, you should add the property overflow: auto;  which will allow you to control the block element.
These methods are good for everyone, but I would like something simpler.  In general, again laziness - the engine of progress makes you come up with something that will facilitate this process.
How to Add an "Insert Code" Button to the WordPress Edit Bar
A simple button in the WordPress edit panel will make this process easier.  And she looks like this.
If you want to install such a button for yourself, then you will need a few minutes of your time and a few files from me.  So let's get started.