Skip to content

When WP Subtitle meets Neve

How to add an HTML element beneath the title
From the sixteenth to the nineteenth century, there has been a slow evolution to make the title and the subtitle two clearly and hierarchically distinguishable blocks, as witnessed by the editions of Francis Bacon’s Essays.

WP Subtitle is one of the best WordPress plugins for adding  post/page subtitles and this since more than thirteen years. It’s rather easy to use.  But, as we all know, a little workarounds are sometimes necessary for the cooperation between a plugin and the theme of the site. This is the case when WP Subtitle meets Neve, frequently distinguished in the running race of WordPress Themes.

Mode 1. The title and the subtitle concatenated as a chain

There is more than one way to display the subtitle of a post in the frontend. If you prefer to combine the title and the subtitle together to form a single chain, the plugin Secondary Title may be a tool more convenient for you. It automatically does the combination by rewriting the text content of the title block and hence saves the user from coding.

As for WP Subtitle, some supplementary codes are necessary. No need to write them yourself: just paste the snippet below to the function.php of the theme and the job shall be done.

//function.php
add_filter( 'the_title', 'append_subtitle' );
function append_subtitle($title) {
    if ( in_the_loop() && ( is_single() || is_page() ) ) {
        $subtitle = apply_filters( 'plugins/wp_subtitle/get_subtitle', '', array(
            'post_id' => get_the_ID();
        ) );
        $sanitized_subtitle = wp_kses_post($subtitle);
        if (!empty($subtitle)) {
            $sep = ": ";
            $title = $title.$sep.$sanitized_subtitle;
        }
    }
    return $title;
}
//Output: Title: Subtitle

The snippet above could be applied to most of themes, including Neve.

Mode 2. The subtitle in an HTML element inserted beneath the title

The most classical way to display a subtitle consists of make it stylistically a subordinate beneath the title — as the etymology of the word “subtitle” suggests. We could even say this is a tacit rule of layout design since of the nineteenth century. It persists still today in innumerous websites, for exemple the science.org.

In the case of Neve, as well as in many other themes, the subtitle should be inserted between the tile and the post meta.

echo '<h1 class="title entry-title">' . wp_kses_post( get_the_title() ) . '</h1>';
if ( $render_meta ) {
    self::render_post_meta();
}

Since the function render_post_meta() is not “hookable”, we should use neve_post_meta_single() instead.

//function.php
add_action( 'neve_post_meta_single', 'prepend_subtitle_to_meta' );
function prepend_subtitle_to_meta() {
    $subtitle = apply_filters( 'plugins/wp_subtitle/get_subtitle', '', array(
        'before'  => '<div class="subtitle">',
        'after'   => '</div>',
        'post_id' => get_the_ID()
    ) );
    if (!empty($subtitle)) {
        echo wp_kses_post($subtitle);
    }
}

The present article offers a live example of the snippet above.

Concerning other themes…

For adding an HTML element in a given place on a WordPress webpage, the key point is almost always to find out the right place for hooking the custom function in the theme in use. Every theme has its own manner of organizing. Its creator is far better placed than anyone else to solve the puzzle.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Meditamenta