Styling Your Second Title
Secondary Title allows you to customize the output with HTML in the title format field. This gives you more control over how and where the title is displayed. This page does this via HTML and CSS.
Basics Title Format
Formatting
The title format input field only allows one line. However, the code here contains line breaks to make the code more readable. You can still copy and paste the code into the input field, which will format itself.
Our current title format is this:
%secondary_title%: %title%Nothing special, just both titles separated by a colon.
Using <span>
If we want to change the style (i.e., color, font size, …), we'll need to wrap the specific parts that we want to change into an HTML element. <span>...</span> is usually the best choice because it doesn't come with effects like <strong> (bold) or <div> (line break).
Inline Styling
We can use <span>'s inline styling for quick changes:
<span style="color:red;font-size:12px;">
%secondary_title%:
</span>
%title%This works fine, but there's one side effect that we might not want to have: It's applied everywhere on the entire website.
WordPress' CSS Customizer
WordPress has a place where you can add your custom CSS. Open the Customizer and go to the "Additional CSS" section at the bottom.
This is the recommended method of changing the style of your output because it allows us to have different style changes for different sites.
Define "class" Attribute
The customizer only makes sense if we can reference our <span> via a class name. So, make sure that every <span> you create has one, like:
<span class="secondary-title">
%secondary_title%:
</span>
%title%<body> Classes
A tiny example. We want to:
- change the secondary title's font size to
18px - hide the secondary title in archive pages but show it everywhere else
For this to work, we need to know what site we're currently on in a way that CSS understands it. Luckily, it's very easy to find out: Open the current page's source code and find the <body> element at the top of the document. This tag has a lot of classes, but some are unique.
Code Example
For example, on the front page (and only there), it'd include home. This is what we need for the first adjustment. In CSS, this would look like this:
.home { /** The `.home` we found in the <body> class list */
.secondary-title {
font-size: 18px;
}
}For our second adjustment, it'll take the same number of lines since we only need to get the <body> class for archives (archive).
Code Example
.archive {
.secondary-title {
display: hidden;
}
}This is one way to style the output and the easiest. You can combine different "rules" together, of course, and add and split up different parts of the title format with <span> elements, depending on how your format looks like.
HTML and CSS only
Remember: HTML and CSS only work when the "Auto Show" setting is enabled. If you're using Secondary Title in manual PHP mode, move on to the next page.