How to add code to the head of WordPress

add code to the head of WordPress

Need to add code to the head of WordPress? Let’s figure out how to do this so as not to disrupt the site.

Google and Yandex statistics, JavaScript scripts of external services (for example, advertising), CSS styles of their blocks are inserted into the header of the site.

Why is the <head> block needed in the page code?

It is a container that holds data about data (metadata). It is located between the HTML tags <html> and <body> . The data of this block is not displayed in the browser but helps it to process the page. Helps search engines index your site.

How to add code to head in WordPress?

There are several methods for WordPress. Look at all and choose the most convenient for you.

Individual plugins

This method is the easiest and recommended for beginners. There are plugins for the VI that add your data to the header of the web resource themselves. They are handy if you don’t want to “play around” with the code and edit site files.

Clearfy Pro

This is a paid multifunctional solution for VP from the WPShop.ru team. One of the features of the plugin is to insert code in the head. For this you need:

  1. Install extension.
  2. Open the Clearfy Pro admin section.
  3. Go to the Code tab.
  4. Paste your code and activate the Code in <head> option.

Head, Footer and Post Injections

This is a free WP extension that serves only one purpose – to add code to the head.

After installation and activation, open the Settings > Header and Footer section in the admin panel, go to the Head and Footer tab.

Find the <HEAD> page section injection block.

In the left block is the code that needs to be displayed on all pages of the site. In the right – only on the main page.

Editing a Theme Template

In this method, the code in the head must be added manually in the desired WordPress theme template. Suitable for those who do not want to install another plugin.

Open the wp-content/themes / header.php file .

We do not recommend editing the parent WordPress theme files. To do this, use child themes. They make it possible to edit files without fear that the changes will be lost when the theme is updated.

The contents of the header.php file may differ for each theme.

For example, let’s open this file in the standard Twenty Twenty WP theme. At the very beginning there will be a <head>…</head> block.

Add the required code before the closing </head> tag .

Via a WordPress Hook

WordPress has a hook that will add code to the head. To do this, open the main theme configuration file functions.php. Located at the root of her folder. For example, for our theme

/wp-content/themes/twentytwenty/functions.php

To add a style or script to the site header, paste the code at the very end of this file

function wpschool_insert_header() {
?>

<! - Your code ->

<?php
}
add_action( 'wp_head', 'wpschool_insert_header' );

Instead of the line <!– Your code –>, add your code and save the changes. Now they work on all pages of the resource.

Leave a comment

Your email address will not be published.