WordPress.org

Ready to get started?Download WordPress

Forums

Specific header image for specific category? (87 posts)

  1. raindance
    Member
    Posted 2 years ago #

    Is there a way to specify a header image for a specific category?
    I'm using the Graphene theme.

    Thanks in advance for any help.

    Laura

  2. Marventus
    Member
    Posted 2 years ago #

    Hi Laura,

    I can help you out with this. Do you only need to display a special image for one specific category or several?
    If you give em the path to the image(s) and the category ID(s), I'll tell you what code to insert and how.

    Cheers!

  3. raindance
    Member
    Posted 2 years ago #

    Hi Marventus-
    Awesome, thank you!
    I'm using the Graphene theme.
    Here is the page which is an example of the category archive page I want to show what I choose.
    http://juicytravels.com/category/juicy-travels-blog/
    See it's showing the regular header from the rest of the site. I'm trying to make the Blog section look different than the rest of the site, so Blog (slug = juicy-travels-blog).
    Which I have accomplished so far with the help of the Graphene Forum from Syahir. But we left it hanging at getting the category archive page working. So for blog posts and pages, I have them doing exactly what I want, which is randomly rotating headers from a folder of images, for example, here
    http://juicytravels.com/blog-post-test/

    And the code we are using to accomplish the random rotation of the headers for the pages and posts in the category "blog" is:

    [code moderated - please use the pastebin for any code longer than 10 lines - see forum guidelines for posting code]

    The full thread of the conversation where we got to that code is
    http://forum.khairul-syahir.com/graphene-support/rotating-headers-for-one-category/page/3
    If that would be helpful.

    I'm using a child theme by the way so have a child theme version category.php and functions.php. We are trying to stay away from using a loop.php file. The code above is in my functions.php file which is great.

    In a perfect world, I would have the code/choice to:
    1. Specify one specific header image for any category archive page
    OR specify a folder for randomly rotating image headers for a category archive page.
    2. Same for posts/pages in a particular category. I know I can do one specific one by making the featured image bigger than the default header size, but if there code that encompassed that, it would be more elegant.

    Sample image name for the category archive page for the category "Blog" slug= juicy-travels-blog and category id=52
    image:
    http://www.juicytravels.com/wp-content/themes/graphene-child/images/custom-headers/blog/juicytravelsblog-header-1.jpg

    Thank you so so much if you can help me dial this in...it's so close to what I want...it's just getting it so I can do the same or single choice for the category archive page here
    http://juicytravels.com/category/juicy-travels-blog/
    Like I am doing here
    http://juicytravels.com/blog-post-test/

    Sorry if that is way more info than you needed... :-)

  4. raindance
    Member
    Posted 2 years ago #

    Oh ya the password for that test blog post is "testblog"

  5. Marventus
    Member
    Posted 2 years ago #

    Hi,

    It seems that what you want is far more complicated than what I had understood from your original post, but it is still feasible.
    Let me see if I understand you correctly. Right now, you have rotating images for your entire site (Home, Posts, Pages, Archives, etc.), but you want a separate set of images for your Blog category.
    What I don't understand is if you want that separate set of images for single blog post view or also for the Blog archive.

    Oh, your code didn't make it because it got moderated. The rule is that if the code exceeds 10 lines, you have to use a code paste bin, such as Pastebin. So please paste your custom functions.php and category.php code there with "PHP Syntax highlighting". You can make two pastes or one big one, marking which one is which with a comment. One line comments are introduced with // or #. For comments that span through more than one line, you have to use /* text here */. Then simply share the links to your paste(s).

    Cheers!

  6. raindance
    Member
    Posted 2 years ago #

    Thanks for your follow up...
    Sorry if I wasn't clear.
    Both for single blog post and for blog archive.
    I've got it working for the single blog posts, its great, I can make a folder and it looks there based on slug title. Perfect. I can put one if I just want one or more than one and it will randomly rotate them. That part is perfect.
    The only problem is that we were then going to dial in how to also do the very same thing for the blog archive page, but I never got any response from the moderator who got me almost there.
    You can see all of the code in the original thread on that forum link...
    http://forum.khairul-syahir.com/graphene-support/rotating-headers-for-one-category/page/3
    It's that last block of code. This might be better than pastebin because you can see the evolution of the code and the coversation and where we left off.

    Thank you so much for being willing to help!

  7. Marventus
    Member
    Posted 2 years ago #

    Yeah, you are right: it is more useful to read the code from that link you shared.
    Where are you currently storing the regular rotating images (I mean, the ones that are showing everywhere else on the site?

  8. raindance
    Member
    Posted 2 years ago #

    I just uploaded those the "normal" way in WP admin to the media library. So like in wp admin appearance > headers I uploaded them there and chose random.
    I'm happy to move them elsewhere though if it makes more sense.

  9. Marventus
    Member
    Posted 2 years ago #

    Ok,

    I just finished reading (and understanding) all the thread and all the code shared by Syahir.
    The last version of the code he posted, with very minor adjustments, should display a random image for all posts under the category juicy-travels-blog from the following directory:

    graphene/images/custom-headers/[sub-category_slug]

    where sub-category_slug is the slug of the juicy-travels-blog subcategory underwhich the post is filed.
    So, say you have a post with the parent category juicy-travels-blog and the sub-category (hierarchically defined as such under WP Admin Panel -> Posts -> Categories) blog jokes. The slug of that subcategory would be blog-jokes, so you would have to upload the image(s) you want to display for that blog subcategory to the directory:

    graphene/images/custom-headers/blog-jokes

    That should display a specific image for that subcategory.

    The revised code you have to paste inside functions.php is here. Please delete the previous version (you can make a backup before if you wish).

    Please note there are two functions there:
    The first one, post_is_in_descendant_category, is a custom WP function that comes from the in_category Codex article;
    The second one is the modified version of the function posted by Syahir.

    Let me know if there is any progress.

  10. raindance
    Member
    Posted 2 years ago #

    Ha yes you can see this has been going on for awhile.
    It's seems so odd that there is no easy way to do this...in my searching I see tons of people wanting to do this but no plug in or easy method. I'm so grateful for your help.

    Ok so I'm going to try what you wrote now...just to clarify:
    This will keep what we have so far, where the category post and pages headers are being pulled to randomly rotate from the custom image header folder, but, it will ALSO let me assign a header image or folder of images for the category archive page?

  11. Marventus
    Member
    Posted 2 years ago #

    You are welcome, :-)
    The code I just posted should not tamper with your current image rotator, because it checks whether the post is inside the blog category or is a descendant of that category and then works its magic.
    However, since I am not very familiar with the theme, I'm not 100% sure it will work, but hopefully with some additional tuning we should be able to get it to work.
    Let me know how it goes.

  12. raindance
    Member
    Posted 2 years ago #

    Ok so its there an uploaded but I don't see any difference.
    Everything works as it did but the blog category archive page is still showing "rest of the site" images.

    Question...did I say the wrong path for images?
    Because I'm using a child theme, the path is in the child theme images folder, not main graphene folder.

    So like...
    http://www.juicytravels.com/wp-content/themes/graphene-child/images/custom-headers/blog/juicytravelsblog-header-1.jpg
    And I notice your note above says graphene/images...
    ?

  13. raindance
    Member
    Posted 2 years ago #

    In case it was that path issue, I duplicated the folder graphene-child/images/custom-headers/blog and /juicy-travels-blog and uploaded.
    I still don't see the blog headers on the category archive page for blog here
    http://juicytravels.com/category/juicy-travels-blog/

    Did I miss something? :-) Entirely possible!

  14. raindance
    Member
    Posted 2 years ago #

    Assuming we tweak this and get it working for category archive pages, what if I want to do it for other categories, like
    air travel category 76
    travel tech category 34
    rewards programs category 45

    or whatever...I just made those up but...how would we do it so I can use the same theory for different categories? :-)

  15. Marventus
    Member
    Posted 2 years ago #

    Hi Laura,

    I just saw your posts. I'll run some tests on my test blog tomorrow and get back to you about this.
    What I can answer with confidence, because I tested it before, is that get_stylesheet_directory_uri does retrieve the URL of the child theme, not the parent one.

    Have a good night!

  16. raindance
    Member
    Posted 2 years ago #

    Thank you so much for hanging in there with me :-)
    I have no idea what else to try!

    Have a great night yourself.

  17. Marventus
    Member
    Posted 2 years ago #

    Hi again,

    So, good news: I managed to make custom images appear on my test blog's header. The problem with Syahir's version of the code (and thusly mine, heehee) was that he was trying to pass the $image variable to the graphene_header_image hook, but the variable used by the header image function is called header_img.
    Here is a new Pastebin paste with the updated code.
    Two things to keep in mind:
    1. Custom images will be retrieved from the folder:
    `graphene-child/images/custom-headers/[sub-cat]
    Where [subcat] is the name of the subcategory under the parent category juicy-travels-blog.
    2. Custom images need to be as wide (or wider) as the default header images in order to get displayed (this is not my doing, it's set in Graphene's functions.php).

    If you want to have this working in other categories, I can try to adjust the code accordingly. You will still need to create the folders and upload the pictures into each one manually though.

  18. raindance
    Member
    Posted 2 years ago #

    Oh how wonderful, thank you, I'll try it right now!

  19. Marventus
    Member
    Posted 2 years ago #

    BTW, I realized that I left the category value 4 from when I was testing this on my test blog, but you should change it to 52 in this line of code:

    if ( in_category(4) || post_is_in_descendant_category(4) ){

    Sorry about that!

  20. raindance
    Member
    Posted 2 years ago #

    Hmmm...did I do something wrong?
    I have the same results.
    Blog header showing up great/random for the actual posts in that category.
    http://juicytravels.com/blog-post-test/
    But no blog header for the category archive page for the category "blog"
    http://juicytravels.com/category/juicy-travels-blog/
    I did change the cat id to 52.

    So I think we're in the same spot as we started...working well for the posts/pages within the category blog, but not for the actual blog main page/category archive page.

    Anything else to try? Or maybe I did something wrong?
    The only thing I did differently was to paste in the new code to my child functions file and change the 4 to 52 in two places.
    Did I miss something? :-)

  21. Marventus
    Member
    Posted 2 years ago #

    Ok. I think I know what the problem is. My previous post was not clear enough. Let me try to explain.
    On my test site, the code Syahir's shared last was not working (because of the variable problem I mentioned). The only thing I did was fix it.
    Now, what that code does is test if we are inside the post category (regardless of the sub-category), and if we are, it tries to look for images inside the directory

    grapehene-child/images/custom-headers/[sub-cat]

    However, when you are inside the blog archive page, there is no sub-cat value because you are in the parent blog category, which means the code will try to look for images inside

    grapehene-child/images/custom-headers/

    Since there are no images in that folder, the default images get displayed instead.

    I left it that way because I was simply testing to see if the code actually worked, and because you had mentioned you might want custom images for all categories, not just for the Blog. Now that we know the code does work, it is only a matter of adjusting it based on what you want.

    I hope this is more clear now, :-)

  22. raindance
    Member
    Posted 2 years ago #

    Awesome! Thank you for explaining again...sorry if I missed the point :-)
    Ok so...if we can:
    I want to be able to have it pull images for a parent category, like Blog (let's just do that one then figure out multiples)
    So...I want the parent category "blog" to pull images from a folder, in this case I named it for the slug title of the main category called juicy-travels-blog.
    Can we make the category archive page pull from the folder with the slug title?
    Right now it looks like the post/pages within the category "blog" are pulling from that folder, which is perfect. In other words, I want the parent page to also pull from the same folder so that they all look the same to start.
    Then...if I want sub-categories like your example slug title blog-jokes to pull from their own folder /custom-headers/blog-jokes it would, but if there is no such folder, it would just also pull from the main category slug titled folder images/custom-headers/juicy-travels-blog

    Does that make sense?

  23. Marventus
    Member
    Posted 2 years ago #

    Yeah, it makes perfect sense.
    For all posts under the category Blog (slug juicy-travels-blog):
    1. if there is a sub-cat folder with images, images should be retrieved from that folder (juicy-travels-blog/sub-cat);
    2. If there is no sub-cat folder, images should be retrieved from the parent folder (juicy-travels-blog).
    Please confirm if I'm understanding you well.

  24. raindance
    Member
    Posted 2 years ago #

    Yes! Perfectly!

    And in a perfect world...I could do it for as many parent categories/sub categories as I wanted to...like can I add more of the line that calls the catid 52 in?
    Like
    if ( in_category(52) || post_is_in_descendant_category(52) ){
    if ( in_category(41) || post_is_in_descendant_category(41) ){
    if ( in_category(17) || post_is_in_descendant_category(17) )

    or whatever?
    Then when I add a new category which I want to control images, I can just add in that line to functions with a new cat id?

  25. raindance
    Member
    Posted 2 years ago #

    Any luck? :-)

  26. Marventus
    Member
    Posted 2 years ago #

    Hi Laura,

    I'm very close, but I have not being able to figure it out completely.

  27. raindance
    Member
    Posted 2 years ago #

    Thank you for not giving up! :-)

  28. Marventus
    Member
    Posted 2 years ago #

    Hi Laura,

    I just wanted to give you an update on this: I rewrote the code as per what we discussed, and I managed to display one set of custom images for the main cat from one folder and a different set for child cats from a sub-folder.
    I also made it so that you can specify what categories custom images should be looked for.
    What I am struggling with, is to force the display of main cat images when inside a sub cat that has not have a custom folder from which to retrieve images. However, I should be able to figure this out pretty soon.

    Cheers!

  29. raindance
    Member
    Posted 2 years ago #

    Oh that's wonderful news, thanks!
    I'm sure a lot of people with Graphene will be reallllly appreciative of this! Can't wait to see it and play with it!

  30. Marventus
    Member
    Posted 2 years ago #

    Hi Laura,

    The script is finally ready! It is rather long and verbose, but it does the trick. You can get the code from here.

    I have included detailed instructions inside the script, so it is easier to understand for other people that might want to use it.

    Let me know if it works properly or if you encounter any problems.

    Cheers!

Topic Closed

This topic has been closed to new replies.

About this Topic