Table of Contents
Introduction
Overview
In this article you’ll learn how to create an element in the Divi theme which will be auto-populated with the actual page or post title. You’ll then be able to place this element wherever you want without making duplicate titles or affecting the Category view on your site.
Here’s what you’ll need to accomplish this:
- The Divi theme by ElegantThemes
- Title Remover WordPress plugin
The Problem
You have probably wanted to be able to place your title somewhere else other than the top of a page or post inside of Divi. But when you do it your title appears twice on the page, and annoyingly, also on your category archives page.
If you don’t want your title to be duplicated in posts and in category view, here’s a simple solution.
Solution
How to hide the title on Divi pages and posts
There are few ways to do this.
• With Divi Theme
• Using a Plugin (recommended and simplest way)
• Custom CSS
With Divi Theme
Unfortunately with Divi you can hide title only on posts.
On the right sidebar change Post Title to “Hide”
Using a Plugin
- Install and Activate “Title Remover” plugin.
- Go to your page/post and on the right sidebar click the box to enable “Hide the title for this item” option.
- Click update.
Custom CSS
With Custom CSS you can hide titles for all posts and pages. If you want to hide the title only for a specific page/post it is best to use the plugin solution above.
Use this method ONLY if you are sure you want to hide all titles across the entire website!
- From your WordPress Dashboard go to Appearance => Customize => Additional CSS.
- Add this code:
.entry-title{display: none;}
- Click Publish.
How to remove duplicated title in Category/Blog view
You can skip this if you used Custom CSS method above.
- Add this code to your theme’s functions.php file:
function dynamic_title(){
if(is_single() || is_page()){
echo "
<script type='text/javascript'>
var titles = document.getElementsByClassName('dynamic-title');
var pageTitle = document.title;
var siteName = '".get_bloginfo('name')."';
for (i = 0; i < titles.length; ++i) {
titles[i].innerHTML = pageTitle.slice(0, -siteName.length-2);
}
</script>
";
}
}
add_action('wp_footer', 'dynamic_title'); - Use this element where you want to display your title:
<h1 class="dynamic-title"></h1>
I want my page titles to be “site name” : “post/page name : “site description” in Divi Theme but I can’t for the life of me find out which theme file and code sets this? Any ideas or advice?
I want the home page title to be just “site description” by “site name”