ThemeShaper Forums » Thematic

[closed]

Creating a custom homepage with multiple category search fields

(9 posts)
  • Started 2 years ago by MrChase
  • Latest reply from helgatheviking
  • This topic is not resolved
  1. MrChase
    Member

    Hi there! This is my first post. I'm from the Netherlands so my english isn't that good. I'm sorry for that! First thing I want to say: Thematic rocks!

    Okay, here's the deal: I want to make a custom homepage (frontpage) with an extra area below the header section. In this custom area, I want to have a multiple category search widget. (See: http://wordpress.org/extend/plugins/multiple-category-selection-widget/ and http://wordpress.zackdesign.biz/ )

    In other words: I want a huge header with a nice background image and a div containing the multiple cat search, so visitors can filter categories.

    My questions:
    1) Is there already a kind of "Thematic multiple category search filter" ready to use?
    2) If not: Do you guys and girls know a tutorial so I can create this multi-cat-search box straight into my custome homepage / frontpage?

    I just don't like to add lots of non-thematic plugins to my wp theme and want to have a clean childtheme with only one stylesheet.

    Is there any kind of solution, or should I keep dreaming?
    I'm kind of a noob with PHP, but I'm familiar with HTML and CSS.
    Thanks for your replies!

    Posted 2 years ago #
  2. MrChase
    Member

  3. you can add any amount of divs you'd like to the header. that part is easy, but thematic does not have that type of search ability built in. in lieu of writing it yourself, i'd go w/ the plugin. why re-invent the wheel?

    you can always add a widget area in the header and drop it in there.

    http://forums.themeshaper.com/topic/something-new-bout-widgetized-areas#post-6660

    if the plugin is loading its own stylesheet, but you'd rather that it didn't... assuming that it is well-written you should be able to deregister it's stylesheet and then handle all of its styles in your own style.css

    see Devin's post on deregistering stuff
    http://wptheming.com/2009/12/optimize-plug-in-script-wordpress/

    Posted 2 years ago #
  4. MrChase
    Member

    Thanks for your reply Helga! That widget area looks nice and quite simple. I'll go figure it out!

    Posted 2 years ago #
  5. MrChase
    Member

    Ok, it's kind of working. Now I've got another problem:
    I want to have one plugin (http://wordpress.org/extend/plugins/cat-tag-filter-widget/) with two styles: one style for the homepage, one style for the other pages. Let's say I want the form at the homepage having bigger fields than on the other pages. (Sorry for my bad english.)

    Is this possible?

    This is in the plugin functions PHP file:
    Note the form within the "filter-cat" div.


    function ctf_widget(){
    global $ctf_options; ?>
    <div class="filter-cat">
    <form action="<?php echo get_bloginfo('wpurl') . '/' . PLUGINDIR . '/' . dirname(plugin_basename(__FILE__)) . '/cat-tag-filter.php'; ?>" method="post">
    <?php if ($ctf_options['cat_list_label']) echo '<label for="ctf-cat-select">' . $ctf_options['cat_list_label'] . '</label>'; ?>
    <select name="cat" class="ctf-cat-select" >
    <option value="-1">
    <?php if ($ctf_options['all_cats_text'] != '') echo $ctf_options['all_cats_text']; else _e('Any category', 'cat-tag-filter'); ?>
    </option>
    <?php echo cat_options(); ?>
    </select>
    <?php if ($ctf_options['tag_list_label']) echo '<label for="ctf-tag-select">' . $ctf_options['tag_list_label'] . '</label>'; ?>
    <select name="tag" class="ctf-tag-select" >
    <option value="-1">
    <?php if ($ctf_options['all_tags_text'] != '') echo $ctf_options['all_tags_text']; else _e('Any tag', 'cat-tag-filter'); ?>
    </option>
    <?php echo tag_options(); ?>
    </select>
    <input type="hidden" name="ctf_submit" value="1" />
    <input type="hidden" name="home_url" value="<?php bloginfo('url'); ?>" />
    <input class="ctf-submit" class="button" type="submit" value="<?php echo $ctf_options['button_title']; ?>"/>
    </form> </div>

    This is in the style.css in the childtheme folder:

    /* =Cat Tag Filter
    -------------------------------------------------------------- */

    .filter-cat{
    font-size:12px;
    border-style:solid;
    border-width:3px;
    }
    .filter-cat .ctf-tag-select,.ctf-cat-select,.ctf-submit{
    width: 130px;
    }
    .filter-cat .ctf-submit{
    border-style:solid;
    border-width:1px;
    border-color:#000;
    }

    /* =Cat Tag Filter Home Only
    -------------------------------------------------------------- */

    .home-only .filter-cat{
    font-size:24px;
    border-style:solid;
    border-width:8px;
    }
    .home-only .filter-cat .ctf-tag-select,.ctf-cat-select,.ctf-submit{
    width: 200px;
    }
    .home-only .filter-cat .ctf-submit{
    border-style:solid;
    border-width:5px;
    border-color:#FFF;
    }
    }

    Styles are just an example.
    I've got a different homepage calling the Cat Tag Filter widget within the "class="home-only" div.

    It's working, only the
    .ctf-tag-select, .ctf-cat-select and the .ctf-submit aren't visible at the homepage.

    I hope you'll understand this problem. Thanks in advance for your replie!

    Posted 2 years ago #
  6. MrChase
    Member

  7. are you using firebug? or the chrome/safari equivalent developer tools? if you aren't you absolutely NEED to be, as these types of questions are rendered extraordinarily simple.

    for instance, thematic's default style is

    .aside #searchsubmit {
    display: none;
    }

    which is probably hiding your submit button. (by the by, you can wrap code with two ` backtick marks... if you have a US keyboard that is usually up next to the 1. so you'd need to override that somehow

    .filter-cat .ctf-submit{
    border-style:solid;
    border-width:1px;
    border-color:#000;
    display: block;
    }

    that might not be specific enough, i'm not sure w/o actually testing it, but hopefully you get the point.

    where did this ".home-only" class come from? did you add it to the dynamic body classes or is it a place holder b/c you don't know what to actually put there? if the later, you can again use firebug to read all the dynamic thematic body classes

    home page page-id-62 page-template-default logged-in admin-bar windows chrome ch15

    and the first one happens to be home so in lieu of .home-only you'd just use .home

    .home .filter-cat{
    font-size:24px;
    border-style:solid;
    border-width:8px;
    }

    if you have hidden selects i'm not sure what the problem is. but you can probably sort it out w/ firebug.

    Posted 2 years ago #
  8. MrChase
    Member

    Thanks Helga for your usefull reply and the tricks.
    I'm using the .home class now, thanks for mention it.

    Well, I'm a bit of a noob when it comes to PHP but the problem was the following:

    <div class="home">
    <?php ctf_widget() ?>
    </div>

    I replaced the ctf_widget line with the this

    <div class="home">
    <?php the_widget('cat_tag_filter', $instance, $args); ?>
    </div>

    The solution was in de readme.txt in the plugin folder:

    If your theme doesn't support widgets, you can use this code:
    <?php the_widget('cat_tag_filter', $instance, $args); ?>

    Lesson learned! From now on I'll always read readme files ;)

    Posted 2 years ago #
  9. why are you are manually calling the widget. the readme.txt (always a good idea to check out) says to do so if your theme doesn't support widgets. thematic has something like 13 widget areas and in my very first reply i mentioned how to add another. regardless, glad you have solved it.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.