How do I add my HTML? Inserting PHP code into HTML. How to do it right? Inserting code into html

Before embed the code on the site you need to know the structure of the site. You shouldn't paste code anywhere either. For certain elements of the site, there are places reserved for them. For example, they try to place banners with advertisements at the top of the site, and traffic counters at the bottom.

What code do we want to insert?

  • For example, we want to insert (connect) some javascript, as a rule, scripts are either placed in a separate file or placed at the top of the site.
  • If you want to insert a banner with advertising, then it is preferable to choose the same upper part of the site (site header, navigation menu, place above the post), but in some cases, advertising banners are inserted inside the text or at the end.
  • The code of social bookmarks (icons) is placed before the post (at the beginning of the page) and at the end.
  • Attendance counters, if placed, are at the bottom of the screen.

These are just a few examples.

In each specific case, one or another part of the site is selected based on its specifics.

We are looking for (defining) a file to place the code

As a rule, several files are responsible for displaying the site. Here are the most popular ones in WordPress: index.php; single.php; page.php; header.php; footer.php; sidebar.php; style.css.

Top of the site

The file is usually responsible for the output of the upper part. header.php (site header)... The beginning of this file usually looks like this:

> Here you can insert the script

Between tags place scripts that work on all pages of the site.

The content of these tags may be different for each topic.

Site's home page

The index.php file is responsible for displaying the main page of the site, most often using the php language, this file combines code from other files, for example (header.php, footer.php), thus the displayed page in the browser is assembled from several files.

Site Side Menu

For the display of the sitebar (side block) on the site, as a rule, the file sidebar.php is responsible here, you can also insert a block with advertising.

Displaying records

In case you want to change the reflection of blog posts use the single.php file.

Site pages

To change the pages of the site, use the page.php file.

Site footer

Another file that is present in almost every template is footer.php, you can also place scripts in it, it is often used to insert attendance counters.

Page appearance

If you want to modify the display of the site, then you need the style.css stylesheet.

Now you roughly know which files are responsible for displaying certain parts of the site.

Determine the place to insert the code

To understand where to insert the code, you can use the standard Google Chrome tool to do this, right-click on a free part of the page and select the View Code tab.

With its help, we can determine the name of the block above, below or in which it is necessary paste your code.

To highlight the necessary block, click on the button highlighted in red and hover over the desired area of ​​the site.

The picture above shows a panel in which you can see the code of the site or the selected block.

It is necessary to pay on class name of the block above, below, in which you can insert the code.

Now paste the code you need and check the changes.

Do you know what is one of the main advantages of the Wix Editor? In that it empowers everyone without requiring any special programming knowledge. It is a very simple and intuitive platform where you can easily add, delete, move and edit any elements in every possible way, without touching a single line of code.

But what if you need to add a feature to your site that is not available in the Wix Editor? For this, we have developed a seemingly simple, but in fact - mega-functional HTML widget, which we will tell you about today. With the HTML application, you can add literally everything to your site (except perhaps - ed.), Including any kind of third-party content, widgets and applications.

What else is an HTML application?

Let's draw a parallel with creativity for clarity. Imagine you are making a collage. So, an HTML application is such a thing with which you can easily and quickly insert any picture you like into your collage.

A "picture", that is, an embedded element, can occupy the entire page of your site or part of it and be located next to other sections, images or text. You can easily change the position of elements, make them larger or smaller - in general, do everything that you usually do in the Wix editor.

An HTML application can be used in two ways:

    For embedding sites through an iframe. Suitable for adding pages from other resources. It can be an article from Wikipedia or a profile on IMDB, fully published on your site.

    For embedding HTML code. It is used in cases when you want to install a widget on the site, which is not among the applications in.

For a better understanding of how it works, we suggest watching a short video tutorial on adding HTML code in the Wix editor:

Cool uses of HTML code on the site

An HTML application is a very useful thing. Here's a rough list of what you can add to your site with it:

    Audio and video players and playlists. Almost all resources with media content allow you to embed it on other sites.

The ability to post your own HTML code is present only on. This functionality is intended for those who are professionally versed in the web, need advanced features and know exactly what to do with them.

Attention!

Working with this widget requires knowledge of HTML, CSS and JavaScript. Writing a code with errors can lead to incorrect operation and display of the site.

You can post your HTML code:

Important:

The site must be published for the changes to take effect.

Working with jQuery scripts

If you want to use jQuery scripts on your site, then this must be done in a special way, since the jQuery library is connected to uKit in a non-standard way. All jQuery scripts should be placed in the control panel of your site in the "Custom code" section. In this case, the code must be placed " In the end ". All your scripts should be wrapped in a library require.js in the following way:

How to embed the code on the site if you want the inserted code of a banner, button, counter or any other arbitrary code to be visible on all pages?

If you need to insert the code into the site and so that it is visible on all pages and in a certain place, then this can be done directly in the main site file, usually index.php, index.html.

Now in site building it is more common to use CMS - systems, using the php programming language, so you will most likely need to use the index.php file.

How to insert code into a website using a CMS system

To insert the code into the site in a specific place on the page, you first need to open the index.php file. You can open it using a special editor or notepad. Then, in the open file with the code of the site page, find the place where to insert the code. In order to find the place where the code will be inserted, it is convenient to use the search in the source code of the page, specifying for the search a phrase located near the place where the code will be inserted into the site. Next, copy the code and paste it into the selected location in the index.php file. After that, the inserted code should be formatted so that the information displayed by it is displayed in the desired form.

How to embed code on a website and format it

If this is third-party code, then it usually already contains a container like< div> …..

or possibly tabular tags. Using this container, you can format the inserted code on the site by specifying the location, color, borders, font size and color, etc.

This is done through the attributes of CSS tables, using the style property or by creating a separate class in the stylesheet.

If the originally inserted code is not placed in the container, then you can do it yourself by specifying the necessary tags. This is necessary if you want to change the location and appearance of the displayed information.

This is just one way how you can insert the code into the site, with the output of information in the right place.

Liked? Like us on Facebook