This is more of a problem I introduced. It all began with an attempt to add a theme-color tag in the header. The header is provided by the blog theme, Kahuna, hence the most straightforward way to add the tag is to override the whole header.php with a file with the same name and only one line of difference in my child theme.
Regardless to say, and as I correctly pointed out, this would cause version control issues, as when Kahuna updated I would have to manually merge in the modifications.
The reality was, however, even worse. Last year there was a security vulnerability in the Kahuna theme, which was promptly fixed. I assumed that installing the upgrade was all I needed to do!
It turned out that I forgot this little poor forked version of header.php, which stayed in the unpatched version and might as well still contain the vulnerability.
Fortunately, the vulnerability involved a malicious blogger with certain permissions but not administrator (otherwise nobody could stop him anyways). This is a single user blog, so it does nothing to me.
It was a hint that despite I wisely pointed out the problems in the approach, the reality is even worse: it was not only a version control chore, but also a security anti-pattern.
OK, so much for an introduction. So let’s now look at the header and see what we can do about it. The good thing about open source software is that I can safely show code here and not worry getting sued…
<head>
<?php cryout_meta_hook(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?>
<link rel="pingback" href="<?php echo esc_url( get_bloginfo( 'pingback_url' ) ); ?>">
<?php endif; ?>
<?php
cryout_header_hook();
wp_head();
?>
</head>
Back then I noticed the existing <meta> tag and placed my new <meta> tag alongside it. But had I looked at the bigger context, I would have seen a few function names that should have alerted me: cryout_meta_hook(), cryout_header_hook() and wp_head().
Obviously, the theme already reserved room for me to insert stuff in a more elegant (and chore-less, and safe) way.
Now, knowing that what I was looking for, I checked the official WordPress documentation, as well as an excellent piece of tutorial written by no one other than the maker of the theme I happen to be using.
Anyways, for the sake of completeness and as a defense against the general rotting of our Internet, let me make a short introduction here. WordPress uses hooks everywhere and that’s the fundamental mechanism of the themes and plugins system: exactly because everyone can plug code everywhere, the system had expanded in all the ways people could not have thought of when WordPress was “just a blog system”.
In its simplest form, the plugins system involves one key function, add_action('foo', 'bar'), which will register the function bar to the hook foo. There’s more to it, but the fundamentals are enough for our purpose.
The code I arrived at looks like this:
function de_finibus_meta_theme_color() {
echo "<meta name=\"theme-color\" content=\"#378aba\">";
}
add_action('cryout_meta_hook','de_finibus_meta_theme_color');… and that is it.
I believe we are in a much better state than before. Feel free to check the full code of the child theme, though bear in mind that it might contain future change and may not conform to what I said in this blog post.
Now, the remaining question is that magical color code in the echo statement. If you compare it with previous posts the site color scheme, you’ll realize that it is the site accent color 1, and it should be possible to fetch that value from WordPress directly. That’s its own problem though, and would be solved in another day, another post.