How to add code to your WordPress header in functions.php

Adding code to your header in functions.php can be a great way to customize the look and feel of your website.

How to add code to your WordPress header in functions.php

The functions.php file is a WordPress theme file that allows you to add custom functionality to your website. By adding code to the header section of this file, you can make changes to the header of your website, such as adding a custom logo or changing the font size of your site title.

Optimize WordPress header with functions.php

To add code to your header in functions.php, you will first need to access the file. This can be done by logging into your WordPress dashboard, going to Appearance, and then clicking on Editor. This will take you to the editor page, where you can access your theme files.

Once you are in the editor page, you will need to find the functions.php file. This is typically located in the Theme Files section on the right-hand side of the screen. Click on the functions.php file to open it.

When you have the functions.php file open, you can begin adding your code. One way to do this is by using the built-in WordPress function add_action(). This function allows you to add your code to specific areas of your website, such as the header.

The WordPress handbook: expert guidance straight from the experts!

Grow Your Following!

Gain More Email Subscribers with Bloom, an Email Opt-In Plugin for WordPress.

Get Bloom today

Bloom

The only creative subscription you need

Individual plan – From €14.50/m

Start a 7 day free trail

Already an Envato member? Sign in here.

*All Individual plans include a 7-day free trial with unlimited access for new customers; then chosen plan price applies. Cancel any time.

  • Millions of creative assets
  • Unlimited downloads
  • Simple commercial licensing
  • Cancel any time
Envato elements
Created using items from Photos, Graphics and Fonts

Master WordPress header modifications: functions.php guide

For example, you can use the add_action() function to add a custom logo to your header. To do this, you would first create a function that defines your custom logo. Then, you would use the add_action() function to call this function and add it to the header of your website.

Here’s an example of how you might add a custom logo to your header using the add_action() function:

function custom_logo() {
    echo '<img src="path/to/custom-logo.png" alt="Custom Logo" />';
}
add_action( 'wp_head', 'custom_logo' );

This code defines a function called custom_logo() which echoes an image tag containing the path to your custom logo. Then it adds the function to the wp_head action which will make sure it’s printed on the header.

You can also use the add_action() function to make other changes to your header, such as changing the font size of your site title. For example, you could use the wp_head action to add some CSS code that changes the font size of your site title.

function custom_title_size() {
    echo '<style> .site-title { font-size: 36px; } </style>';
}
add_action( 'wp_head', 'custom_title_size' );

This code defines a function called custom_title_size() which echoes a style tag containing CSS code that changes the font size of the site title to 36px. Then it adds the function to the wp_head action which will make sure it’s printed on the header.

In this way, you can use the add_action() function to add custom code to your header in functions.php and make changes to the look and feel of your website. Keep in mind that if you are not familiar with coding and WordPress, it’s best to seek help from a developer or consult the WordPress documentation.

Personalize your site: WordPress header guide

It’s important to note that adding code to your functions.php file can have a big impact on your website, so it is always a good idea to back up your site before making any changes. Also, if you are using a child theme, it’s best to add code to the child theme.

The best themes for WordPress

Unlocking the power of the best themes for your site.

Divi WordPress theme

Divi theme

A popular WordPress theme developed by Elegant Themes

More information

Avada WordPress theme

Avada

Avada number 1 selling
WordPress theme

More information

Flatsome WordPress theme

Flatsome

The best selling WooCommerce WordPres theme

More information