In this tutorial, we’ll replace the tagline area under the header of the Minimum Pro theme with 5 widget areas.
Here’s an example of what the tagline area can look like when populated with 5 featured post widgets:
The widget titles are displayed rather than the post titles so you can control the length easier.
The code also excludes the portfolio archive and all single posts assigned to the custom post type portfolio.
PHP & CSS Code
If you also want to display these widgets on custom post type archive and single posts attached to that CPT, simply remove the line of code for the conditional tags and CSS code.
Widget Settings
The 5 new widget areas are populated with the Genesis Featured Posts widgets and here’s the settings i used.
The Code & Files
I used Notepad++ to search and find the CSS code using the keyword ‘tagline’. I then removed all this CSS code.
There’s no real need to do this as i have generated classes with different names in the PHP code however you may like to keep your style sheet nice and tidy. You can also remove the default CSS for the taglines Mobile Queries.
I also removed the PHP code for the tagline from the functions.php file on Line 110 to Line 128.
And i replaced the name of the structured wrap from site-tagline to tagline on Line 45 of the functions file.
Mobile Responsive
I didn’t add a lot of CSS to make the widgets responsive.
@media only screen and (max-width: 768px) {
.tagline-container .widget .widget-title {
display: none;
}
}
@media only screen and (max-width: 320px) {
.featured-1 .widget,
.featured-2 .widget,
.featured-3 .widget,
.featured-4 .widget,
.featured-5 .widget {
text-align: center;
padding: 0 0.6%;
width: 100%;
}
}
And here’s how it looks on a small hand held device.
Hi Brad, I was wondering if you could clear something up for me. Are you creating new sidebar files, e.g. sidebar-featured-1.php? As far as my knowledge extends that would be how I would do it. But it just seemed like a lot of small files to create and fill up my currently simple child theme folder.
Hi John
Support for members only. http://wpsites.net/registration/