WordPress.org

Ready to get started?Download WordPress

Forums

Creating a Category page in Kubrick (31 posts)

  1. jberglund
    Member
    Posted 9 years ago #

    Morning everyone!
    I'm using the Kubrick/Default template in my blog and want to be able to make my different categories have different 'styles' - ie, a different header, color scheme, etc.

    From what I can figure out (from previous posts), I think I first need to have a category page. So, my first question: How do I use the default 'index.php', save it as a 'category.php' file, and change the php in it to be a 'category' page?

    Here is the code from that part of the index.php file:
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="post">
    <div class="small">Posted in <?php the_category('&');?> <?php the_time('d M Y h:i a'); ?> <!-- by <?php the_author() ?> --></div>
    <h2 id="post-<?php the_ID(); ?>">" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></h2>

    <div class="entrytext">
    <?php the_content('Read the rest of this entry »'); ?>
    </div>

    <p class="postmetadata"><?php edit_post_link('Edit','','|'); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?>

    <!-- <?php trackback_rdf(); ?> -->
    </div>

    <?php endwhile; ?>

    I'm VERY new to php. Can someone tell me what I need to change here to create a category page?

    Any and all help greatly appreciated.
    Thanks!

  2. Kafkaesqui

    Posted 9 years ago #

    It would help to know what exactly you want to display on your category page.

    Also, if you need a different style for each category, see this:

    http://codex.wordpress.org/Category_Templates

  3. jberglund
    Member
    Posted 9 years ago #

    Basically, I want it to appear just as the archive pages currently do. Which was typical of a category page I saw in another theme. This is what I have now, and I wish to keep: http://www.jbergdesign.com/archives/category/family/

    But... I want to create a 'category.php' page so I can apply different styles to each category. Thanks for the Codex info, I read through that earlier. But, I need to be able to first create a category.php page in order to use that.

    So... what I'll need to know is 'how do I CALL the category information'?

    Also... has anyone actually been successful with that codex info? If so, I'd love to see your site and how each of your categories differ.

  4. Marc
    Member
    Posted 9 years ago #

    Have a look at this theme, it changes the header image dependant on the category selected.
    http://www.curtisfamily.org.uk/?p=99

    Maybe you can get an idea of how it is coded by downloading and disecting it.

  5. jberglund
    Member
    Posted 9 years ago #

    Cool. Thanks, Marc. I'll take a look! (Though, I may be back for more questions later! ;)

  6. jberglund
    Member
    Posted 9 years ago #

    Well... looking at the files from Chris's site, the category header 'call' is built into the header.php file. So... working with that, I managed to get it to call main header... but, it leaves a blank space where the header should be in the category pages.

    So, obviously, I'm missing something. Hmm...

    Considering this code to 'call' the category numbers:
    <?php
    if (is_category()) {
    $imgurl = "images/".single_cat_title('',FALSE).".jpg";
    } else {
    $imgurl = "images/all.jpg";
    }
    ?>

    and THIS line that calls the style sheet:
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

    Does anyone know how I can change that to call a completely different style sheet (instead of just calling the image)?

  7. jberglund
    Member
    Posted 9 years ago #

    I'm still having a difficult time with this 'category' subject. Can anyone help me with this?

    I've managed to create a new 'category.php' file. I would like to give each category a different header and color palette. So, a different style sheet is necessary. I tried just using Curtis's idea above to simply change the header - the images don't show up: http://www.jbergdesign.com/archives/category/home-remodeling/

    I've also tried reading through the codex/Category_Templates file - I don't know php enough, yet, to figure out how to WRITE it, and I don't think the 'sticky-snip' explanation is what I need.

    Using the 'Kubrick/default' template to build my site, the call for the style sheet is in the 'header.php' file. So... how can I call separate stylesheets, that are each based on a different category, from that file?

    I'm getting desperate here. So far, I've seen a lot o f people say this can be done and it's easy, but I've only seen Curtis' site as coming close to it.

  8. moshu
    Member
    Posted 9 years ago #

    As the Codex says: the category.php template will apply to ALL your categories (instead of the archive.php or index.php - see hierarchy.)
    The Codex also says you can create different templates for different categories, so you can have catgeory-1.php for your category with ID# 1, category-2.php for your category with ID# 2...etc.
    Furthermore the good souls here on the forum hopefully can give you a hand to write the statements in the head(er) - if you are as unfamilliar with PHP as I am - to call for a different stylesheet.
    However I think there is another way, too - though quite redundant and involves more work. Namely you can call into the catgeory-2.php, for example, another header, let's say header-2.php in which you define what stylesheet will apply to the template.
    I know it's not an "elegant" solution but might work for PHP dummies :)

  9. jberglund
    Member
    Posted 9 years ago #

    I'll take any solution I can find right now. :)

    I've been thinking about exactly what you said - creating different headers and categories. What's stopping me from doing that right now is: I don't know how to call a different stylesheet. This is all I've seen, so far: @import url( <?php bloginfo('stylesheet_url'); ?> );

    So... I'm hoping someone can help me figure that code out.

    I'm still VERY unfamiliar with PHP. I can pick my way through parts of it and say 'Oh... that's what that does.' But, that's it, for now. I did get a book, though. :)

  10. moshu
    Member
    Posted 9 years ago #

    I've tried this on my local install and it worked :)
    Changed
    @import url( <?php bloginfo('stylesheet_url'); ?> );
    to this:
    @import url( <?php bloginfo('url'); ?>/wp-content/themes/mytheme/newstyle2.css );
    where "mytheme" is the name of the theme used/modified.

  11. jberglund
    Member
    Posted 9 years ago #

    Cool! Okay... THIS worked! http://www.jbergdesign.com/archives/category/home-remodeling/
    compared to: http://www.jbergdesign.com

    This WILL give me a LOT of files. But, at least it's a 'temporary fix' until I can figure out a more simplistic way to get it to work. I want this site up to have with my online resume (for design purposes). So, I've been busting a gut trying to get my different categories back online.

    Thanks Moshu! I will be forever grateful for your help!!!! (well, until someone comes along with an easier route. Then, I'll make sure I pass it along to you, too ;o)

    Much thanks!!!!!!

  12. moshu
    Member
    Posted 9 years ago #

    Hopefully a PHP guru will come along and tell us how to use correctly the
    <?php
    if (is_category(2)) {
    use XX stylesheet
    if (is_category(6)) {
    use YY stylesheet
    } else {
    use another stylsheet
    }
    ?>

    or something along those lines... I know the principle, just lacking the skills to write the code :(

  13. jberglund
    Member
    Posted 9 years ago #

    Same here. I know what I *want* to do... I jsut don't know how to do it. If you ever find anything like that out, please pass it along. I'll do the same. :)

  14. jberglund
    Member
    Posted 9 years ago #

    Afternoon everyone! Okay... this whole 'category/style' thing has been a bugger for a while for me. I think I've finally gotten it to work, with just one minor flaw:

    please go here: http://www.jbergdesign.com
    (remodeling, taekwon do, family, etc. - some have different styles, some keep the default)

    It's working, as it's picking up the style sheets that for the different catagories. BUT, as you can see, I'm missing the header images. Can anyone see why that may happen?

    This is from the css files (same in each, but, with different .jpg)
    #header {
    background: url("images/category1.jpg");
    height: 120px;
    margin: 0 auto;
    width: 100%;
    padding:0;
    border: 1px solid #BEBEBE; }

    Any thoughts as to why the background image refuses to show up? I'll continue looking on my end. But, any thoughts would be appreciated! :)

  15. jberglund
    Member
    Posted 9 years ago #

    Got it working! Without having to create multiple category and header pages. I built the PHP into the header (which, in Kubrick, that's where the call to the style sheets is). Then just created multiple style sheets for it to call. Here's what I placed in the header.php:

    <style type="text/css" media="screen">
    /* Calls the style sheets for each category */
    <?php
    $post = $wp_query->post;
    if ( in_category('3') ) {
    include(TEMPLATEPATH . '/category3.css');
    } elseif ( in_category('4') ) {
    include(TEMPLATEPATH . '/category4.css');
    } elseif ( in_category('5') ) {
    include(TEMPLATEPATH . '/category5.css');
    } elseif ( in_category('8') ) {
    include(TEMPLATEPATH . '/category8.css');
    } elseif ( in_category('13') ) {
    include(TEMPLATEPATH . '/category13.css');
    } elseif ( in_category('15') ) {
    include(TEMPLATEPATH . '/category15.css');
    } else {
    include(TEMPLATEPATH . '/style.css');
    }
    ?>
    </style>

    <?php /* Calls the header image for each category - necessary code */
    $post = $wp_query->post;
    if ( in_category('3') ) {
    $imgurl = "images/category3.jpg";
    } elseif ( in_category('4') ) {
    $imgurl = "images/category4.jpg";
    } elseif ( in_category('5') ) {
    $imgurl = "images/category5.jpg";
    } elseif ( in_category('8') ) {
    $imgurl = "images/category8.jpg";
    } elseif ( in_category('13') ) {
    $imgurl = "images/category13.jpg";
    } elseif ( in_category('15') ) {
    $imgurl = "images/category15.jpg";
    } else {
    $imgurl = "images/all.jpg";
    }
    ?>
    <style type="text/css" media="screen">
    /* Disable the header style in the individual style sheets and embed it here. */
    #header {
    background: url(<?php bloginfo('stylesheet_directory') ?>/<?php echo $imgurl; ?>);
    height: 120px;
    margin: 0 auto;
    width: 100%;
    padding:0;
    border: 1px solid #BEBEBE; }
    </style>

    The php code for the header images was partially what I put together from how the curtisfamily site runs. But, the rest was pieced together from the codex info and other bits and pieces I heard of from others.

    It does exactly what I've been looking for. Took me 2 months, but hey! ;o)

    Thanks for the help, Moshu.

  16. hayscg
    Member
    Posted 9 years ago #

    Ok I'm a little loss here. I've got some idea but where do I put the code in the header? Am I make css sheet for all the category. I'm using Neptune how do I get it work with that. Thanks for the help greatly appreciate.

  17. jberglund
    Member
    Posted 9 years ago #

    I'm not sure what template pages Neptune uses. I used Kubrick (default). It's built with sections - header.php, footer.php, sidebar.php... etc.

    I placed the above code in the 'header.php' file above 'The Loop'.

    (The header.php file - in Kubrick - contains all call for the style sheets, like a typical index.php page normally would. By doing this, you can make a change to that file only, and it will make changes across ALL pages it is embedded inside - index.php, page.php, category.php, single.php... etc.

    Does that make sense?

  18. hayscg
    Member
    Posted 9 years ago #

    Yes Thanks.

  19. Root
    Member
    Posted 9 years ago #

    We can use the is_category( ) tag instead of if else. Cuts the php by 80%.

  20. yung_chi_lee
    Member
    Posted 9 years ago #

    JBerglund:

    Can you please give me a hand with this. I'm using the Landzilla theme and all the calls for the CSS is located in the index.php. In fact, everything is in there. My blog is http://www.yunglee.com

    Please have a look if you can and let me know where I need to insert the code and if I need to make any alterations to the code you have provided. Thank you.

  21. Jaxia
    Member
    Posted 9 years ago #

    We can use the is_category( ) tag

    Does anybody know what that would look like instead?

  22. Jaxia
    Member
    Posted 9 years ago #

    Also, I'm confused about the header image call part that I'm supposed to put in the header. Why can't I call my header image in each css like this:

    #header {
    background: url('category4.jpg') no-repeat bottom;
    height: 185px;
    margin: 0 auto;
    width:700px;
    padding:0;

    That's how I call my header image now...
    Thanks!

  23. Jaxia
    Member
    Posted 9 years ago #

    Anybody?

  24. moshu
    Member
    Posted 9 years ago #

    1. About the is_category see the Conditional tags in Codex http://codex.wordpress.org/Conditional_Tags
    2. Depending on your theme you can have the call for the header image either in the header (see the examples above in this thread) or in your css files for the given category.

  25. nateomedia
    Member
    Posted 9 years ago #

    Wow, this thread is fantastic. Thank you for the info. My header file is a little different -- it doesn't extend below </head> so that I can really change the entire template when the category changes. Anyway, I built my css switcher a little differently and thought I should share:

    <style type="text/css" media="screen, projection">
    @import url(<?php bloginfo('template_directory'); ?>/global.css);
    @import url(<?php
    if ( is_category('3') ) { //FPO
    bloginfo('template_directory');
    echo "/support.css";
    } elseif ( is_category('4') ) { //Support Category
    bloginfo('template_directory');
    echo "/support.css";
    } else { //Home Page
    bloginfo('stylesheet_url');
    }
    ?>);
    </style>

    This allows me to use a global stylesheet that carries styles used throughout the site and then add in additional, category specific styles as necessary.

    My category.php file looks like this:

    <?php
    /*
    Template Name: Category
    */
    ?>

    <?php get_header(); ?>

    <?php
    if ( is_category('3') ) {
    include(TEMPLATEPATH . '/category3.php');
    } elseif ( is_category('4') ) {
    include(TEMPLATEPATH . '/support.php');
    } elseif ( is_category('5') ) {
    include(TEMPLATEPATH . '/category5.php');
    } elseif ( is_category('8') ) {
    include(TEMPLATEPATH . '/category8.php');
    } elseif ( is_category('13') ) {
    include(TEMPLATEPATH . '/category13.php');
    } elseif ( is_category('15') ) {
    include(TEMPLATEPATH . '/category15.php');
    }
    ?>

    <?php get_footer(); ?>

    Hope this helps someone. :)

  26. nateomedia
    Member
    Posted 9 years ago #

    Here's a question: How do I write is_category() to include more than one? This doesn't work:

    if ( is_category('3', '5', '6') ) {

    It was just a guess. :) I'm sure if I keep digging, I'll find the answer...

  27. nateomedia
    Member
    Posted 9 years ago #

    Answering myself. You write it like this:

    elseif ( is_category('3') || is_category('5') || is_category('6') ) {

  28. Kassad
    Member
    Posted 9 years ago #

    I happened to be in the same business :)

    I applied nateomedia's solution (the style part only) to change the background picture for a specific post and it worked.
    I would have liked to change the condition based on post id to narrow down on one single post because I plan to have similar posts with different background pictures and styling.
    However the respective conditional tag is_single() did not work for some reason.
    Could anybody advice me how to achieve this ?

  29. moshu
    Member
    Posted 9 years ago #

    @Kassad,
    it should work like is_single(23) - where 23 is the post ID#.
    At least according to Codex...
    http://codex.wordpress.org/Conditional_Tags

    Edit. You can also take a look at this thread:
    http://wordpress.org/support/topic/35053

  30. Kassad
    Member
    Posted 9 years ago #

    Thanks, Moshu !
    That, I did, exactly. Unfortunately, for some reason, it did not work.
    Browsing through the information you mentioned, it seems to me that everything is chained to the categories. It works, but when I choose the post from the Archive, it loses the preferences.
    It should have been the more elegant solution to tie the post to the id. So, it looks I shall have to take the other way, using several single files.

    Though, it is not urgent as the category chaining works beautifully even if with limitations. If you care to look at:

    Unique background

    If I have a working solution, I will post it.
    Thanks, again :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags