The Limits of Theme Customization On WordPress: Editing Markup With The Theme Editor

I'm working with my wife to get her personal blog up and running. She asked me to set it up for her on her personal site talitices.com. I chose WordPress because it's extensible and not terribly difficult to set up and customize. She's running her own business and she could take advantage of the big selection of themes and plugins.

Some of the themes are more flexible than others. The theme she chose uses a glyph in the header. She can change the glyph to a number of options in the FontAwesome set, but not her own custom image. The designer of the theme didn't include the ability to change the glyph to an image, so we couldn't customize this portion of her web site without getting into the markup.

Getting Into The Markup

Which file do I need to edit to replace the FontAwesome glyph with the custom image?

I inspected the main page with the Chrome developer tools and found that the glyph is rendered as an <i> element. This could be replaced with an <img> element instead.

CSS classes in the nearby HTML suggest that the file we need to edit on the server is a header file. WordPress pages and posts are rendered from smaller pieces of PHP code. We're going to edit one of those smaller pieces.

Changing the glyph (a text element) required altering the theme header (header.php) file in the WordPress theme editor.

This is the code that rendered the glyph:

<?php if ( $bavotasan_theme_options['header_icon'] ) { ?>
<i class="fa <?php echo $bavotasan_theme_options['header_icon']; ?>"></i>
<?php } else {
    $space_class = ' class="margin-top"';
} ?>

I replaced it wholesale with a new image element that she had uploaded for this specific purpose:

<img src="/wp-content/uploads/2016/05/dog-white-png.png"
    style="
        width:  100px;
        animation: fadeHeader 1 1s ease-in;
    ">

The animation attribute is taken from styling of the glyph on the main page. When the page loads, the glyph fades into view while the title of the page slides in from the top and the subtitle of the page slides in from the bottom. This is lost without reproducing it on the styling of the image we're replacing the glyph with.

100px felt like a natural number that would look decent on a variety of screens. We could create a new CSS class to contain styling information for the image but for now we'll only edit this single file.

Menu