Remove Titles From Posts in Wordpress Development
How to properly remove the title from a Wordpress post, and how to do it for specific post types.
By. Jacob
Edited: 2021-05-31 15:17
Sometimes you may want to hide the title on posts belonging to a specific post type, or maybe you just want to get rid of the title and the h1 all together; this tutorial will teach you how to do that while developing Wordpress Plugins and Themes.
What you need to understand first is that the title of a post is not just what users see on the front-end — the title is also used in admin-lists inside the Wordpress administration — in the post type admin sections — and when editing individual posts. If you remove the title field from the editor, then you should consider dynamically creating a title that can be used in the overview, menus, and other places where a title may be used by Wordpress.
The best way to remove the title from the front-end is to use a filter to remove it, as this also seems to get rid of the h1 element in the HTML code; users can then instead manually create the headings they want within the editor when creating a new post.
Another way to remove the post title is to hide it visually with CSS, but that is not recommended since the title and its related HTML will still be present in the source, and it also clutters your CSS.
Hiding or removing titles in Wordpress
We can get rid of post titles using the the_title filter, but the problem with this filter is that it does not just apply to front-end post titles, it seems to apply everywhere that post titles are used, including the post lists in the Wordpress administration. There are solutions to this, and I will cover some of them in this tutorial — the ideas covered here should work both for plugin- and theme development.
Using the_title filter
To avoid that the filter gets applied all over the place, you will need to target the specific area where you want to change the title. To only change front-end titles, you should use the is_single() function to check if the requested resource is a single post.
Remove the title from front-end posts
If you only want posts of a specific post_type to be changed, then you may use the name_of_post_type() function to check the post type of the post currently being treated.
Keep in mind that Wordpress will be looping through posts in some places, such as the post-lists in the admin back-end, and inside of the menus — you will be changing titles in all of those places if you do not check for is_single() or is_blog_admin().
A simple non-oop example may look like this:
add_filter('the_title', 'modify_title');
function modify_title($title) {
if ((get_post_type() === 'name_of_post_type') && (is_single())) {
return '';
}
return $title;
}
The return ''; is empty when both checks return true, and return $title; is run when not — this is needed since you would otherwise cause all other titles to show up empty.
Once a post title is hidden in this way, the HTML heading element should be removed completely from the source — although that may depend on the theme. The correct thing to do when a title is empty is to remove the element completely, but I am not sure all developers will think of checking for that.
Modify titles in admin-lists
It is also possible to modify the title in admin lists, that is, the list of posts, pages and other post types in the administration back-end; this is possible by using the is_blog_admin() function to check if an admin section was requested:
add_filter('the_title', 'modify_title');
function modify_title($title) {
if ((get_post_type() === 'name_of_post_type') && (is_blog_admin())) {
return 'some fancy new title';
}
// Else return original title
return $title;
}
Hiding the title with CSS
This is the dirty-hack solution, but sometimes useful if you are in a hurry, and do not know how to remove a title properly using PHP.
The title of a post appears to have the .entry-title CSS class applied; knowing this you can edit your themes CSS code, and insert something like:
.entry-title {
display:none!important;
}
Ideally you would want to place this in the CSS of your child-theme. If you do not have a child-theme, then you either need to create one or find a way to edit the CSS from within the Wordpress administration. For example, if you are using the Divi editor/theme, then there is a place to do it from Divi's configuration — but it is not the ideal solution.
It is generally not recommended to edit CSS or HTML from within Wordpress, because it tends to complicate your Website. If a developer later changes something that is influenced by your micro-changes, then it can take a long time to find out about it, since the code is not organized properly in a child-theme or plugin. Code that is hidden in the database is also not searchable, so that is another reason never to do that.
Only inserting the code when needed
There has been a lot of debate over whether it was okay to insert style elements in the body of your HTML, and a lot of that also applies to Wordpress. The traditional recommendation has been to include your CSS in a external stylesheet, but there is a problem with that approach for very big websites, and perhaps Wordpress in particular.
The problem is that Websites tends to be very complex applications, with a variety of plugins and features; many of which are not really used on every single page. The best thing is therefor if their related code can be unloaded when it is not used, so that it does not slow down the site unnecessarily.
One way to easily and quickly get around all this, is by simply outputting your CSS in a style element in the places where your changes are in-use. So, if you want to hide the title on a specific post type, then you can just include the code on posts that belong to this type, rather than cluttering your global CSS.
Again, you need to use a filter to do this; there is a filter called the_content which can be used for that purpose. E.g:
add_filter('the_content', 'modify_content');
function modify_content($content) {
if (is_singular('name_of_post_type')) {
return $content . '<style>.entry-title, .post-meta .author, .post-meta .comments {display:none!important;}</style>';
}
return $content;
}
The above will also hide author and comment information from a post of a given type. The is_singular() function is used to target a specific post type, so if you want to have the code inserted on all posts, simply get rid of that.
Disabling the title field in the Editor
Disabling the title field completely in the Editor can be done by modifying or creating a new post type — but it is probably not a good idea, since the title will be empty, and the permalink information will disappear from the editor as well.
When a new post is created, the post_name will typically be auto-generated based on the title. It is also possible to disable the title completely for a post type, and instead generate your own post_title and/or post_name instead.
To disable the title in the editor, you should just leave it out from the supports array when creating or modifying a post type. E.g.:
register_post_type('name_of_post_type', [
'label' => 'name of post type',
'description' => 'Description of post type.',
'exclude_from_search' => true,
'publicly_queryable' => true,
'public' => true,
'show_ui' => true,
'show_in_admin_bar' => true,
'show_in_rest' => true,
'menu_icon' => 'dashicons-lock',
'supports' => ['editor', 'custom-fields'],
'rewrite' => ['slug' => 'privacy'],
'delete_with_user' => false
]);
In this case, the supports array only contains editor and custom-fields; this is because I am using a custom field and dynamically generating a post_title and post_name based on what the user supplies in a custom form element.
Tell us what you think: