You too can create vibrant HTML titles through WordPress’ custom fields

While developers have a blank canvas when it comes to styling the website and they can make every part of it look exactly how they planned it, authors are usually left without many options. When it comes to titles, a developer can make them look big or small, italic or bold, he can choose a color and even decide if the title will link to a post or not. After coding and styling, authors can only write the title and hope they don’t have any length or word restrictions.

There are different WordPress plugins which can allow you to modify titles differently, but in today’s article, we’re about to show a direct way of editing titles.

We have already explained what custom fields are and how to display them and now we’re about to use them in order to modify the title.

If you choose to install this feature onto your website, any author will be able to enter HTML into a custom field and publish a post with a unique title. Custom fields will allow authors to control the entire title with HTML tags – that means changing the color, size, fonts, creating links, etc.

If you like a clean and a simple design, you probably don’t want all sort of different titles which can render your site looking like a mess. But even in that case, a simple italic word can make a difference to a title and still keep it look clean.

Add the feature to a specific location:

Another great thing about adding this feature is that you get to choose where the new title will appear. Even after implementing the code, you can still choose to show the modified title only in single posts while leaving the home page intact. It’s really up to you. So let’s see the code which you can try out and see if and where you want to implement it.

  1. Open single.php file
  2. Find the_title() part of the code
  3. Replace the code with this one:
  4. $post_title = get_post_meta($post->ID, 'title', true);
    if ($post_title) {
    echo $post_title;
    } else {
    the_title();
    }
  5. Change ‘title’ in the first line to any custom field you want to use in the custom field
  6. Save changes

In this example, we have used the code in the single.php file and therefore enabled the custom title only for single posts. This means that the front page, archives and all the other places where the title is displayed in your theme will stay intact. If you want to show custom titles on other places, you will need to repeat the process in all that other files.

If you tried refreshing a post or two, you noticed that there aren’t any changes. The code is searching for a custom field named ‘title’ but if there is none found, the code is displaying the_title() function which is defined by your theme. So, now that you have prepared the code, you can modify a title directly from a custom field:

  1. Open any post for which you want to change the title
  2. Scroll down to custom fields
  3. In name field, enter a word “title” (or the one you have changed in the code)
  4. Enter your custom HTML title in the value field
  5. Save changes

Just to name some examples, here’s what your custom field, i.e. custom title can look like:

  • This title contains a link to <a href=”https://firstsiteguide.com”>WP Loop</a>
  • This title has <h6> different heading</h6> and <i>italic words</i>
  • <font color=”red”>This is a red title</font>

It wasn’t that difficult, wasn’t it? Enjoy your new titles.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

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