Today, I needed to add a domain verification code to my site’s head. I’ve done this hundreds of times. However, this was the first time I’ve tried while using full-site editing. As is the theme with Gutenberg (pun intended), I learned something new.
WordPress themes have evolved significantly over the years, and with the introduction of block themes, the traditional approach to modifying theme files like the header.php has changed. In this tutorial, we’ll explore how to add custom content to the <head> tag of your WordPress site, especially when using a block theme. Additionally, we’ll touch upon a specific solution for those using the Kindling theme.
Understanding block themes
Block themes are part of the full-site editing experience in WordPress. Unlike traditional themes, block themes don’t rely on PHP templates for every part of the website. Instead, they use a combination of HTML templates and theme.json to control the site’s appearance and layout.
How to customize the head tag in WordPress block themes
In classic WordPress, we would include our custom code in the header.php or use a function to enqueue scripts and styles. However, without a header.php file in our block theme, we need to use a different approach. Thankfully, WordPress has a hook for just about everything.
The code snippet below is a way to inject custom HTML (in this case, a meta tag) into the <head> section of every page on your WordPress site by defining a custom function and hooking it to the wp_head action in WordPress. Like most WordPress functions, this will live in your theme’s functions.php file (or wherever you write your functions.
It’s a best practice to create a child theme to make customizations. This ensures your changes are not lost when the parent theme is updated.
function my_custom_head_content() {
// Your custom content goes here
echo '<meta name="custom-content" content="This is my custom content">';
}
add_action('wp_head', 'my_custom_head_content');
While you could copy the snippet as is, below are some recommendations after you’ve added it to your theme.
- Replace the
my_custom_head_contentfunction name with a name that fits your specific needs. - Replace the
Your custom content goes herecomment with a comment that identifies what this code is for. Trust me, your future self will thank you. - Replace the
echoline with whatever content you need to add.
Of course, you can customize and expand this to fit your needs, but hopefully, it’s a start.
Breaking down the code
I can’t tell you how many sites I’ve taken over that clearly had code just lifted from Stack Overflow. I’ve even lifted some of that code myself. The biggest thing I wish I had as a self-taught developer was an explanation of the code.
A trick that I’ve been using is asking ChatGPT to explain the code to me. Even as a seasoned engineer, I can’t even begin to tell you how much I’ve leveled up my coding abilities.
Below is a sample prompt I would ask.
The code below is for a WordPress website. Can you break it down in detail for me?
[Paste your code here]
Now that I’ve shared my trick, let’s break down how this snippet helps add custom code to the head in a block theme.
Understanding the function
function my_custom_head_content() {
// Your custom content goes here
echo '<meta name="custom-content" content="This is my custom content">';
}Function declaration: function my_custom_head_content() { ... }
- This line declares a new function named
my_custom_head_content. - Functions in PHP are blocks of code that can be executed repeatedly. This particular function, when called, will run the code inside its curly braces
{ ... }.
The echo statement: echo '<meta name="custom-content" content="This is my custom content">';
- Inside the function, there is an
echostatement.echois used in PHP to output content to the web page. - The content being echoed here is an HTML meta tag:
<meta name="custom-content" content="This is my custom content">. - This meta tag is a custom HTML element that can be used for various purposes, such as providing metadata about the webpage. In this case, it’s a placeholder for whatever custom content you wish to add.
Adding the function to WordPress
add_action('wp_head', 'my_custom_head_content');The add_action function
add_actionis a WordPress function that hooks a custom function to a specific action point in the WordPress lifecycle.- In WordPress, actions are specific points during the execution of a page request where custom code can be executed.
Parameters of add_action:
'wp_head': This is the name of the action to which we are hooking our function. Thewp_headaction is triggered in the<head>section of the website’s HTML output.'my_custom_head_content': This is the name of the function we want to execute when thewp_headaction is triggered. In this case, it’s the function we defined earlier.
What Happens When the Code Runs
When a page on your WordPress site is loaded, WordPress will execute all functions hooked to the wp_head action at the appropriate point in the page load process. When it reaches this action, it will execute the my_custom_head_content function, which will output the specified meta tag into the <head> section of your HTML.
Customizing the Kindling theme
If you’re using the Kindling theme, you can directly add custom content to the <head> tag by modifying the kindling_wp_head() function in the theme’s functions.php file.
/**
* Add custom content to wp_head
*
* @since 3.0.1
*/
function kindling_wp_head() {
// Add your custom code here
}
add_action('wp_head', 'kindling_wp_head');
All you need to do is replace the // Add your custom code here comment with your custom code. This method is straightforward and doesn’t require a child theme, as Kindling is a starter theme and is designed to handle such customizations.
Conclusion
When we customize the head tag in WordPress block themes, it requires a slightly different approach than traditional themes. By using the wp_head action hook, you can easily add custom content. The process is even more straightforward for Kindling theme users with a dedicated function.