Lotsa “unique category” options — but which is best?

  • I’m working on a site that’s basically a clearinghouse of information on Franco-Belgian comics. There are eight categories within the site, ranging from general to news to podcasts to “fansub” translations.

    I would like each category to have its own variant of the site header image, and also to use the dominant colour in each category header image for h1 and h2 tags, the sidebar background colour, etc.

    I’ve been doing a lot of reading on how to accomplish this, and — in theory — I think there are (at least) four ways to go about it.

    But I don’t know which is best. Web design is an art AND a science, and I’m trying to find the best solution in terms of page load times + ease of maintenance + lowest probability of something going terribly wrong.

    I’d like some more seasoned opinions on which is best.

    FIRST OPTION: No category pages and one header.php using if/else to call header images and styles, with a stylesheet for each category:

    1. Put if/else commands into the header.php to call category-specific header images (e.g. newsheader.png, interviewsheader.phg, etc.);
    2. Put if/else commands into the header.php to call category-specific stylesheets (e.g. news.css, interviews.css, etc.).

    OR

    SECOND OPTION: Individual category pages with individual header.php and individual css files for each category:

    1. Make a different category-x.php file for each category;
    2. Have each category-x.php call a unique header-x.php for that category (using “⟨?php include (‘header-x.php’); ?⟩” instead of get_header);
    3. Have each header-x.php call its own category-specific header image and stylesheet.

    OR

    THIRD OPTION: Individual category pages, only one header.php and one style.css

    1. Put if/else commands into the header.php to call category header images;
    2. Make a different category-x.php file for each category;
    3. Make unique DIVs for each category style (i.e. div id=”container-news”, div-id=”container-interviews”, etc.) in each category-x.php page;
    4. Have all relevant styles in one huge style.css rather than having a unique style.css for each category.

    OR

    FOURTH OPTION: Individual category pages, with the headers and unique-to-that-category CSS right in the category-x.php page.

    1. Make a different category-x.php file for each category;
    2. Remove the get_header command and just put the header in the category-x.php file with the link to the relevant header image, and calling the general style.css;
    3. Put all category-relevant CSS information in the category-x.php file to override the style.css.

    …which of these seem like the best approach? Are there any that are just a total waste of time?

Viewing 10 replies - 1 through 10 (of 10 total)

  • Only one category.php and one header.php is all that is needed if you use conditional tags and php if, elseif, and else in both template files.

    <?php if (is_category('my category a') ) { ?>
<!-- Insert code for my category a -->
<?php } elseif (is_category('my category b') ) { ?>
<!-- Insert code for my category b -->
<?php } elseif (is_category('my category c') ) { ?>
<!-- Insert code for my category c -->
<?php } else { ?>
<!-- Insert default code or leave blank -->
<?php } ?>
    Thread Starter mattshepherd

    (@mattshepherd)

    Thanks for the prompt reply, iridiax.

    If I understand correctly, you’re recommending my Option One, yes?

    Is there any concern for page load times if you have lots of elseif commands running through eight options in your template files?

    If you only have 8 categories, it should not be a problem. If you had hundreds of categories, this method would be unwieldy.

    if you think about it matt, they’re there anyway, in order to dictate which category template file should be used to display the category you’re viewing now…

    … you just don’t see that because you didn’t put it there.

    using conditionals like this isn’t a problem. I tend to agree with iridiax on this, given your small number of categories using conditionals actually saves on lots of duplication vs using separate category templates.

    Thread Starter mattshepherd

    (@mattshepherd)

    That makes sense, Ivovic.

    That sounds ideal, then! I’ll try getting this done over the weekend.

    Thanks, guys!

    Thread Starter mattshepherd

    (@mattshepherd)

    It worked!

    Essentially, I made a CSS file for each category, using the CSS header image background to call the header image, then styled the colours according to the category theme.

    I’ll paste the code here in case this can help somebody else in the future: 

    <?php if (is_category('1') ) { ?>
<link rel="stylesheet" href="https://EXAMPLE.COM/wp-content/themes/bede/style.css" type="text/css" media="screen" />
<?php } elseif (is_category('12') ) { ?>
<link rel="stylesheet" href="https://EXAMPLE.COM/wp-content/themes/bede/category12.css" type="text/css" media="screen" />
<?php } elseif (is_category('8') ) { ?>
<link rel="stylesheet" href="https://EXAMPLE.COM/wp-content/themes/bede/category8.css" type="text/css" media="screen" />
<?php } elseif (is_category('11') ) { ?>
<link rel="stylesheet" href="https://EXAMPLE.COM/wp-content/themes/bede/category11.css" type="text/css" media="screen" />
<?php } elseif (is_category('13') ) { ?>
<link rel="stylesheet" href="https://EXAMPLE.COM/wp-content/themes/bede/category13.css" type="text/css" media="screen" />
<?php } elseif (is_category('9') ) { ?>
<link rel="stylesheet" href="https://EXAMPLE.COM/wp-content/themes/bede/category9.css" type="text/css" media="screen" />
<?php } elseif (is_category('10') ) { ?>
<link rel="stylesheet" href="https://EXAMPLE.COM/wp-content/themes/bede/category10.css" type="text/css" media="screen" />
<?php } elseif (is_category('7') ) { ?>
<link rel="stylesheet" href="https://EXAMPLE.COM/wp-content/themes/bede/category7.css" type="text/css" media="screen" />
<?php } else { ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>

    And so on. I may do the same for individual posts (checking the parent category) so that individual posts also use the same header/sidebar as the category pages.

    Is there a way to replace that all that HTTP:// with a php command?

    Replace https://EXAMPLE.COM/wp-content/themes/bede with
    Bloginfo in the appropriate parameter…

    And for the single posts Kaf has a plugin:
    https://guff.szub.net/2005/07/21/post-templates-by-category/

    Thread Starter mattshepherd

    (@mattshepherd)

    I’m a bit of a dolt, but I can’t figure out how to make the “bloginfo” parameter work with specific css files, because “bloginfo” just looks for what WordPress has designated as the CSS file (style.css in my case). But I’m probably not understanding something.

    Thanks for the link to the plugin, but I opted to use “in_category” elseif commands for the category-specific posts, because the plugin would have required me to make category-x.php templates for each category (right?). Extending the if-else just seemed easier. It doesn’t appear to drag too much.

    (it occurs to me that this may fall under the “if it ain’t broke, don’t fix it” category, but I can’t help but feel that a PHP command would be cleaner than that repetitive HTML. But does it make any PRACTICAL difference?)

    Of course a php command would be more portable because then you could change your theme, theme name, or domain name and a bloginfo command will still work, but if you hard code the URL they would all have to be changed individually.

    To replace the URLs in your code, you would use <?php bloginfo('template_directory'); ?>/categoryX.css in place of `https://EXAMPLE.COM/wp-content/themes/bede/category7.css’.

    Example:
    <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/categoryX.css" type="text/css" media="screen" />

    If you want to make the code a little cleaner still, you could use a switch statement.
    https://www.php.net/manual/en/control-structures.switch.php

    Thread Starter mattshepherd

    (@mattshepherd)

    Whoo! I’ll check that out; now that I don’t feel like a complete imbecile I’m really starting to enjoy this stuff. Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Lotsa “unique category” options — but which is best?’ is closed to new replies.