Subtitle shows the small info about the content. And it is important to understand the main theme of the content at the beginning. By default, there is not option to add subtitle to WordPress post.

You can also check, how the subtitle looks at the top of this page. And in this tutorial, we gonna make the same.

Add Subtitle To WordPress Post Without Plugin

In this tutorial, we’ll not be using any plugin. But we will provide the code snippet down below.

Step 1 : Create Custom Subtitle Plugin

class pt_post_subtitle
{
    private $config = '{"title":"Subtitle","prefix":"blogietech_subtitle_","domain":"blogietech","class_name":"pt_post_subtitle","post-type":["post"],"context":"advanced","priority":"high","fields":[{"type":"text","label":"Subtitle","id":"blogietech_subtitle_subtitle"}]}';

    public function __construct()
    {
        $this->config = json_decode($this->config, true);
        add_action('add_meta_boxes', [$this, 'add_meta_boxes']);
        add_action('save_post', [$this, 'save_post']);
    }

    public function add_meta_boxes()
    {
        foreach ($this->config['post-type'] as $screen) {
            add_meta_box(
                sanitize_title($this->config['title']),
                $this->config['title'],
                [$this, 'add_meta_box_callback'],
                $screen,
                $this->config['context'],
                $this->config['priority']
            );
        }
    }

    public function save_post($post_id)
    {
        foreach ($this->config['fields'] as $field) {
            switch ($field['type']) {
                default:
                    if (isset($_POST[$field['id']])) {
                        $sanitized = sanitize_text_field($_POST[$field['id']]);
                        update_post_meta($post_id, $field['id'], $sanitized);
                    }
            }
        }
    }

    public function add_meta_box_callback()
    {
        $this->fields_table();
    }

    private function fields_table()
    {
?>
<table class="form-table" role="presentation">
            <tbody><?php
                    foreach ($this->config['fields'] as $field) {
                    ?><tr>
                        <th scope="row"><?php $this->label($field); ?></th>
                        <td><?php $this->field($field); ?></td>
                    </tr><?php
                        }
                            ?></tbody>
        </table><?php
            }

            private function label($field)
            {
                switch ($field['type']) {
                    default:
                        printf(
                            '<label class="" for="%s">%s</label>',
                            $field['id'],
                            $field['label']
                        );
                }
            }

            private function field($field)
            {
                switch ($field['type']) {
                    default:
                        $this->input($field);
                }
            }

            private function input($field)
            {
                printf(
                    '<input class="regular-text %s" id="%s" name="%s" %s type="%s" value="%s">',
                    isset($field['class']) ? $field['class'] : '',
                    $field['id'],
                    $field['id'],
                    isset($field['pattern']) ? "pattern='{$field['pattern']}'" : '',
                    $field['type'],
                    $this->value($field)
                );
            }

            private function value($field)
            {
                global $post;
                if (metadata_exists('post', $post->ID, $field['id'])) {
                    $value = get_post_meta($post->ID, $field['id'], true);
                } else if (isset($field['default'])) {
                    $value = $field['default'];
                } else {
                    return '';
                }
                return str_replace('\u0027', "'", $value);
            }
        }
        new pt_post_subtitle;

Step 2 : Import Your Plugin to functions.php

You can replace blogietech with your Theme’s Text Domain. To check what’s your Theme’s text domain, you have to check style.css of your Theme. You will find it on the top documentation section (Top) of style.cssYou can either place this directly inside functions.php or create a new file name subtitle.php inside template-parts folder.

// If you created a new file name subtitle.php inside template-parts, then you need to include this into functions.php. Copy and paste the below code to functions.php

require get_template_directory() . '/inc/plugins/subtitle.php';

Almost done !!

This will create Meta box, it will appear right below post edit section.

Add Subtitle to WordPress Post Without Plugin

Step 3 : Edit content.php

Now, open template-parts/content.php and navigate to right below your entry-title or heading. You need to add the following code right down there.

Add Subtitle To WordPress Post -Without Plugin
<?php
    $subtitle = get_post_meta(get_the_ID() , 'blogietech_subtitle_subtitle', true);
    if (!empty($subtitle))
        {
            echo '<div class="entry-subtitle">' . $subtitle . '</div>';
        }
?>

Replace blogietech with your own theme’s text domain, like you did before. And congrats, you did it. Now you can add subtitle to every post you want.

You can also click here to make your own meta box

The Sum Up

I believe in light site and it is important to make the site load faster. And using plugins might load unnecessary CSS and JavaScript files which make the Webpage load slower. Using the above technique will only load the code inside back-end and gives output only if you have placed Subtitle inside it.

Did the above code snippets work for you ? I hope, this tutorial helped you to add subtitle to WordPress post. And If it did, please don’t forget to share and leave a comment down below. And see you in the next WordPress tutorial.

Sakar Aryal is a Computer Application student from beautiful town Tilottama, Nepal. He loves coding and blogging. He provides problem solving technique specially related to WordPress, HTML, CSS, php and more other web and tech related things through on his blog , blogietech.com

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.