Community Forums › Forums › Archived Forums › Design Tips and Tricks › How To Add Custom Header For Specific Category And Posts In Quattro Theme
Tagged: category header, coding, Custom header
- This topic has 17 replies, 3 voices, and was last updated 10 years, 8 months ago by
Brad Dalton.
-
AuthorPosts
-
June 13, 2014 at 9:23 pm #109657
ShanG
MemberI'm using the Quattro theme and would like to have a custom header for one specific category AND all the expanded posts in that category. I have found some tutorials, but am not sure if they are still valid for HTML5 themes. Also, this need to be automatic; no adding image URLs to custom fields and no plugins. I want this hard coded.
Essentially, if you click on that category in the CatNav, a specific header needs to display instead of the default header on that category page list and when a post title from that category page is clicked to expand that post, the same header needs to show. All other categories, pages and home page need to have a different (read: default) header than that specific category. What would be the best way to do this for HTML5 themes?
June 14, 2014 at 4:35 am #109688nunotmp
MemberHello,
I have not used the Quarttro theme but this should work.
First you need to determine the right conditionals. In this case it seems like
in_category( 'category_name' )
would work so you can change the header by doing something like this.if ( in_category( 'category_name' ) ) { remove__action( 'genesis_header', 'genesis_do_header' ); add_action( 'genesis_header', 'wpz_do_header' ); }
This will will remove the default header content only on post that use the category name you provide. Now you can build out your custom header using the
wpz_do_header
you can name this whatever you like, this is just my personal prefix. the div.site-header
will stay the same just the content of the header will change. If you are just wanting to use an image you can do something likefunction wpz_do_header() { <img src="path/to/image.jpg" alt="Category Header" /> }
Now if you need to have all of the header features with some customization then you will have to rebuild the
genesis_do_header
. You can find that by navigating to genesis>lib>structure>header.php and searching genesis_do_header. You will have to copy the function and do the customizations there.
June 14, 2014 at 4:48 am #109689ShanG
MemberWill this make the header show on the category page as well as single posts of that category?
Also, wpz_do_header...the only thing I change is the wpz? How will this know where to pull the header from?
And does this all go in functions.php? Do I need to do anything in header.php, index.php, single.php, etc.? I found this tutorial, but it kind of confused me: http://andornagy.com/custom-headers-for-each-category-or-page/
June 14, 2014 at 10:34 pm #109831ShanG
MemberThe code did not work. This is what I used and put at the bottom of the functions.php file:
// Enable Custom Header for Specific Category if ( in_category( 'gin-joint' ) ) { remove__action( 'genesis_header', 'genesis_do_header' ); add_action( 'genesis_header', 'cl_do_header' ); } function cl_do_header() { <img src="/quattro-Zippy/images/CL_Gin_Joint_Header.png" alt="Gin Joint" /> }
I got a syntax error. Uggh. Please, anyone, can you help me?
June 14, 2014 at 10:40 pm #109834nunotmp
MemberYou got a syntax error because you didn't echo the html. Sorry about that.
function cl_do_header() { echo '<img src="/quattro-Zippy/images/CL_Gin_Joint_Header.png" alt="Gin Joint" />'; }
June 14, 2014 at 11:35 pm #109836ShanG
MemberOk, I put the amended code in and no syntax error, but no custom header for the Gin Joint category or expanded posts. What did I do wrong? Is there anywhere else I need to edit any code? The header should have the same CSS as the default header, just a different image for that particular category and posts.
This is the last hurdle to finishing this design. I need to get it done, finally.
http://skeweddesignstudios.com/thisisatest/
June 19, 2014 at 9:17 pm #110715ShanG
MemberCan anyone help me? I am not a coder, but I can follow a tutorial very well. The code that was offered in this thread does not work.
June 19, 2014 at 11:14 pm #110732Brad Dalton
ParticipantThere's many different ways to do this all of which i have written about on my blog.
You can use a plugin or code.
If using code, you can use CSS or PHP.
It depends on how many different header images you want to display? http://wpsites.net/web-design/different-header-images-css/
What way do you want to do it?
June 20, 2014 at 1:07 am #110736ShanG
MemberI think PHP would be best, right? And it's just one single header for one particular category and all the expanded posts in that category.
June 20, 2014 at 1:25 am #110738ShanG
MemberHow would I modify this for a specific category and will the header display for all the expanded posts and the archive page of the category using this code?
function specific_header_image(){ if(is_home()) echo '<div class="home-header"><img src="http://example.com/path/to/image.png" alt="home header image" /></div>'; elseif(is_page() ) echo '<div class="page-header"><img src="http://example.com/path/to/image.png" alt="page header image" /></div>'; } add_action('genesis_header', 'specific_header_image');
Would this work? And how do I specify which category I want in this code?
function specific_header_image(){ if(is_home()) echo '<div class="home-header"><img src="http://example.com/path/to/image.png" alt="home header image" /></div>'; elseif(is_category() ) echo '<div class="page-header"><img src="http://example.com/path/to/image.png" alt="page header image" /></div>'; } add_action('genesis_header', 'specific_header_image');
June 20, 2014 at 1:33 am #110742Brad Dalton
Participantif ( in_category( 'your-category-slug' ) ) {
Where did you get the code from?
June 20, 2014 at 1:37 am #110743ShanG
MemberYour site. lol
Displaying A Different Header Image On Homepage Than Other Pages
Do I need to add CSS too for this to work properly? Everything about the header will be the same as the main site header except the image itself.
June 20, 2014 at 1:46 am #110744ShanG
MemberLike this?
function specific_header_image(){ if(is_home()) echo '<div class="cl-header"><img src="http://example.com/path/to/image.png" alt="cl header image" /></div>'; elseif (in_category(‘gin-joint’)) echo '<div class="gin-joint-header"><img src="http://example.com/path/to/image.png" alt="gin joint header image" /></div>'; } add_action('genesis_header', 'specific_header_image');
Now all other categories, pages, posts, EXCEPT "gin-joint" need to have the same header. According to this code, the main site header will only display on the HOME page and nowhere else, which is not what I want. Or do I have that wrong?
June 20, 2014 at 2:01 am #110746Brad Dalton
ParticipantLike this http://wpsites.net/web-design/2-ways-to-add-a-unique-header-image-if-post-in-specific-category/
The CSS tweaks depend on which method you choose as well as which theme you're using.
For exec Pro i used this
.header-image .title-area,
.header-image .site-title,
.header-image .site-title a {
float: left;
margin: 0;
max-width: 1140px;
min-height: 200px;
padding: 0;
width: 100%;
}
June 20, 2014 at 2:19 am #110747ShanG
MemberThank you! I will look at it with fresh eyes in the morning. At the moment I can't keep them open. Damn bifocals! lol
This is for the Quattro theme. The main header CSS is already in there and working fine.
http://skeweddesignstudios.com/thisisatest/category/gin-joint/
Is it better to use that category slug or ID for this?
June 20, 2014 at 2:35 am #110750Brad Dalton
ParticipantJune 20, 2014 at 3:31 am #110753ShanG
MemberAnd this will definitely make the header show on individual posts from that category as well as the category archive page, correct? I just don't want to spend time on another thing that won't work. lol
June 20, 2014 at 5:40 pm #110866Brad Dalton
Participant -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.