WordPress Gurus...I need a little help please... - GoFuckYourself.com

SlamDesigns · 11-07-2013, 03:16 AM

First off, just wanna say long time no talk. I've been dropping in from time to time over the past year, but never really had anything to contribute, so I just hung out and tried to catch up on what was going on. Was sad to see that some (most) of the old posters on here are gone, but I guess that's just the way life is. Still sort of sucks though.

Anyway, I have a small problem I can't work out. I say small because I know one of you can fix it in 5 minutes, whereas I've been up all night working on it. I'll try to explain the best I can, but any of you that know me knows I'm not the best at that...

I'm creating a site for one of my business partners and we're using a premium (i.e. bought) theme. The whole damn thing is widgetized, which was working out great until tonight when we wanted to make some changes to the widgets and found that we couldn't...or rather that we could, but it changed all the widgets and not just the ones we wanted to change.

Basically we need 3 different sized widgets on the site, so what I did was copied one of the pre-existing widgets, changed the filename and the CSS on it, and reuploaded it, and it didn't work. We also tried just changing the CSS in the stylesheet, but that caused every widget on the site, no matter what type, to change as well.

Here's where I think the problem lies, in the functions.php file...

PHP Code:


			
if ( function_exists('register_sidebar') ) {



    register_sidebar(array(



        'name' => 'Homepage Widget Area',



        'before_widget' => '<div class="widget-container"><div class="widget-inner">',



        'after_widget' => '</div></div>',



        'before_title' => '<h4 class="widget-header">',



        'after_title' => '</h4>',



    ));



}

The before-widget thing makes every widget in that widget area use the same CSS.

So here's what I need to do, and I'm hoping someone here (Fris...you still around, man?) can help me figure out how to do it.

I need to take this widget...

PHP Code:


			
<?php

/**

 * Plugin Name: Category Feature Widget

 */



add_action( 'widgets_init', 'gd_catfeat_load_widgets' );



function gd_catfeat_load_widgets() {

    register_widget( 'gd_catfeat_widget' );

}



class gd_catfeat_widget extends WP_Widget {



    /**

     * Widget setup.

     */

    function gd_catfeat_widget() {

        /* Widget settings. */

        $widget_ops = array( 'classname' => 'gd_catfeat_widget', 'description' => __('A widget that displays posts from a category of your choice.', 'gd_catfeat_widget') );



        /* Widget control settings. */

        $control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'gd_catfeat_widget' );



        /* Create the widget. */

        $this->WP_Widget( 'gd_catfeat_widget', __('Gameday: Category Feature', 'gd_catfeat_widget'), $widget_ops, $control_ops );

    }



    /**

     * How to display the widget on the screen.

     */

    function widget( $args, $instance ) {

        extract( $args );



        /* Our variables from the widget settings. */

        $title = apply_filters('widget_title', $instance['title'] );

        $categories = $instance['categories'];

        $links = $instance['links'];

        $links_num = $instance['links_num'];



        ?>



            <div class="widget-container">

                <span class="blog-cat-title"><?php echo $title; ?></span>

                <?php $recent = new WP_Query(array( 'cat' => $categories, 'showposts' => 1 )); while($recent->have_posts()) : $recent->the_post();?>

                <?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>

                <div class="widget-img">

                    <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('large-thumb'); ?></a>

                </div><!--widget-img-->

                <?php } ?>

                <div class="widget-inner">

                    <h3 class="home-title1"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>

                    <p class="gd-widgets"><?php echo excerpt(20); ?></p>

                    <?php endwhile; ?>



                    <?php if($links) { ?>

                    <ul class="home-links1">

                        <?php $recent = new WP_Query(array( 'cat' => $categories, 'showposts' => $links_num, 'offset' => 1 )); while($recent->have_posts()) : $recent->the_post();?>

                        <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li>

                        <?php endwhile; ?>

                    </ul>

                    <?php } ?>

                </div><!--widget-inner-->

            </div><!--widget-container-->



        <?php



    }



    /**

     * Update the widget settings.

     */

    function update( $new_instance, $old_instance ) {

        $instance = $old_instance;



        /* Strip tags for title and name to remove HTML (important for text inputs). */

        $instance['title'] = strip_tags( $new_instance['title'] );

        $instance['categories'] = strip_tags( $new_instance['categories'] );

        $instance['links'] = strip_tags( $new_instance['links'] );

        $instance['links_num'] = strip_tags( $new_instance['links_num'] );





        return $instance;

    }





    function form( $instance ) {



        /* Set up some default widget settings. */

        $defaults = array( 'title' => 'Category Title', 'links' => 'on', 'links_num' => 4);

        $instance = wp_parse_args( (array) $instance, $defaults ); ?>



        <!-- Widget Title: Text Input -->

        <p>

            <label for="<?php echo $this->get_field_id( 'title' ); ?>">Name of Category:</label>

            <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:90%;" />

        </p>



        <!-- Category -->

        <p>

            <label for="<?php echo $this->get_field_id('categories'); ?>">Select Category:</label>

            <select id="<?php echo $this->get_field_id('categories'); ?>" name="<?php echo $this->get_field_name('categories'); ?>" style="width:100%;">

                <option value='all' <?php if ('all' == $instance['categories']) echo 'selected="selected"'; ?>>All Categories</option>

                <?php $categories = get_categories('hide_empty=0&depth=1&type=post'); ?>

                <?php foreach($categories as $category) { ?>

                <option value='<?php echo $category->term_id; ?>' <?php if ($category->term_id == $instance['categories']) echo 'selected="selected"'; ?>><?php echo $category->cat_name; ?></option>

                <?php } ?>

            </select>

        </p>



        <!-- Links -->

        <p>

            <label for="<?php echo $this->get_field_id( 'links' ); ?>">Show Links:</label>

            <input type="checkbox" id="<?php echo $this->get_field_id( 'links' ); ?>" name="<?php echo $this->get_field_name( 'links' ); ?>" <?php checked( (bool) $instance['links'], true ); ?> />

        </p>



        <!-- Number of Links -->

        <p>

            <label for="<?php echo $this->get_field_id( 'links_num' ); ?>">Number of links:</label>

            <input id="<?php echo $this->get_field_id( 'links_num' ); ?>" name="<?php echo $this->get_field_name( 'links_num' ); ?>" value="<?php echo $instance['links_num']; ?>" style="width:90%;" />

        </p>





    <?php

    }

}



?>

...and make two copies of it. One is going to be Top Featured Categories and the other is going to be Regional Categories. Then I need to apply a custom CSS class to both of them, making the TFS one (roughly) 350 px tall, and making the RC one (also roughly, as I can't remember the exact dimensions right now) 450 px tall. The original widget, as well as the other widgets that we are using can keep their same styling, but I need these two widgets to have a set size.

Thanks in advance! I greatly appreciate any help that anyone gives me.

Manfap · 11-07-2013, 03:29 AM

Just add 'exclusiveclassname' or what ever you want to call it.

<div class="widget-container exclusiveclassname"><div class="widget-inner">

then you can style just that widget with .widget-container.exclusiveclassname

SlamDesigns · 11-07-2013, 09:35 AM

Quote:

Originally Posted by Manfap

Just add 'exclusiveclassname' or what ever you want to call it.

<div class="widget-container exclusiveclassname"><div class="widget-inner">

then you can style just that widget with .widget-container.exclusiveclassname

Add it where, to the "before_widget" thing in functions.php? I tried that, and it applies it to every widget in that widget area.

Fetish Gimp · 11-07-2013, 10:06 AM

The "register_sidebar" function creates a widget AREA. Once you've created a widget AREA then you can drop widgets onto it.

So what you need to do is to create the two different widget areas you need by adding this to your functions file (you could also use register_sidebars() but it's a bit easier to read them when they're separate):

Code:

/* top categories */
if ( function_exists('register_sidebar') ) { 

    register_sidebar( array( 
    
        'id' => 'top-featured-categories',

        'name' => 'Top Featured Categories', 

        'before_widget' => '<div class="widget-container top-featured-categories"><div class="widget-inner">', 

        'after_widget' => '</div></div>', 

        'before_title' => '<h4 class="widget-header">', 

        'after_title' => '</h4>', 

    ));
    
 }
 /* top categories */
 
 
 
 /* regional categories */
 if ( function_exists('register_sidebar') ) { 
 
     register_sidebar( array( 
     	
     	 'id' => 'regional-categories'
 
         'name' => 'Regional Categories', 
 
         'before_widget' => '<div class="widget-container regional-categories"><div class="widget-inner">', 
 
         'after_widget' => '</div></div>', 
 
         'before_title' => '<h4 class="widget-header">', 
 
         'after_title' => '</h4>', 
 
     ));
     
  }
 /* regional categories */

And then you can add them wherever you want on your theme adding this to the template:

Code:

/* show top featured categories widget */
 if( function_exists( 'dynamic_sidebar' ) ) {
 
 dynamic_sidebar( 'top-featured-categories' );
 
 }
/* show top featured categories widget */
 
 
 /* show regional categories widget */
  if( function_exists( 'dynamic_sidebar' ) ) {
  
  dynamic_sidebar( 'regional-categories' );
  
  }
 /* show regional categories widget */

And now you can use CSS to style the two separate widget areas by styling .top-featured-categories and .regional-categories

SlamDesigns · 11-07-2013, 10:44 AM

Quote:

Originally Posted by Fetish Gimp

The "register_sidebar" function creates a widget AREA. Once you've created a widget AREA then you can drop widgets onto it.

So what you need to do is to create the two different widget areas you need by adding this to your functions file (you could also use register_sidebars() but it's a bit easier to read them when they're separate):

Code:

/* top categories */
if ( function_exists('register_sidebar') ) { 

    register_sidebar( array( 
    
        'id' => 'top-featured-categories',

        'name' => 'Top Featured Categories', 

        'before_widget' => '<div class="widget-container top-featured-categories"><div class="widget-inner">', 

        'after_widget' => '</div></div>', 

        'before_title' => '<h4 class="widget-header">', 

        'after_title' => '</h4>', 

    ));
    
 }
 /* top categories */
 
 
 
 /* regional categories */
 if ( function_exists('register_sidebar') ) { 
 
     register_sidebar( array( 
     	
     	 'id' => 'regional-categories'
 
         'name' => 'Regional Categories', 
 
         'before_widget' => '<div class="widget-container regional-categories"><div class="widget-inner">', 
 
         'after_widget' => '</div></div>', 
 
         'before_title' => '<h4 class="widget-header">', 
 
         'after_title' => '</h4>', 
 
     ));
     
  }
 /* regional categories */

And then you can add them wherever you want on your theme adding this to the template:

Code:

/* show top featured categories widget */
 if( function_exists( 'dynamic_sidebar' ) ) {
 
 dynamic_sidebar( 'top-featured-categories' );
 
 }
/* show top featured categories widget */
 
 
 /* show regional categories widget */
  if( function_exists( 'dynamic_sidebar' ) ) {
  
  dynamic_sidebar( 'regional-categories' );
  
  }
 /* show regional categories widget */

And now you can use CSS to style the two separate widget areas by styling .top-featured-categories and .regional-categories

Thanks Fetish Gimp. I think I can probably do that with the featured categories because they can be separate, but the regional categories are mixed in with other content, so (I don't think) that will work, will it? The basic layout looks something like this....

alcstrategy · 11-07-2013, 12:53 PM

you should style by id as id is for unique identifier and each one should have their own id
I thought widgets always generated their own id's, but if your widgets don't have specific id's this url might be of use to you

specifically this:

<?php $args = array(
'name' => __( 'Sidebar name', 'theme_text_domain' ),
'id' => 'unique-sidebar-id',
'description' => '',
'class' => '',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>' ); ?>

%1$s should give unique id per widget

source url:
http://wordpress.org/support/topic/h...ids-or-classes

11-07-2013, 03:16 AM	#1
SlamDesigns Confirmed User Join Date: Jul 2005 Posts: 2,339	WordPress Gurus...I need a little help please... First off, just wanna say long time no talk. I've been dropping in from time to time over the past year, but never really had anything to contribute, so I just hung out and tried to catch up on what was going on. Was sad to see that some (most) of the old posters on here are gone, but I guess that's just the way life is. Still sort of sucks though. Anyway, I have a small problem I can't work out. I say small because I know one of you can fix it in 5 minutes, whereas I've been up all night working on it. I'll try to explain the best I can, but any of you that know me knows I'm not the best at that... I'm creating a site for one of my business partners and we're using a premium (i.e. bought) theme. The whole damn thing is widgetized, which was working out great until tonight when we wanted to make some changes to the widgets and found that we couldn't...or rather that we could, but it changed all the widgets and not just the ones we wanted to change. Basically we need 3 different sized widgets on the site, so what I did was copied one of the pre-existing widgets, changed the filename and the CSS on it, and reuploaded it, and it didn't work. We also tried just changing the CSS in the stylesheet, but that caused every widget on the site, no matter what type, to change as well. Here's where I think the problem lies, in the functions.php file... PHP Code: `if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'Homepage Widget Area', 'before_widget' => '<div class="widget-container"><div class="widget-inner">', 'after_widget' => '</div></div>', 'before_title' => '<h4 class="widget-header">', 'after_title' => '</h4>', )); }` The before-widget thing makes every widget in that widget area use the same CSS. So here's what I need to do, and I'm hoping someone here (Fris...you still around, man?) can help me figure out how to do it. I need to take this widget... PHP Code: <?php /** * Plugin Name: Category Feature Widget / add_action( 'widgets_init', 'gd_catfeat_load_widgets' ); function gd_catfeat_load_widgets() { register_widget( 'gd_catfeat_widget' ); } class gd_catfeat_widget extends WP_Widget { /* * Widget setup. / function gd_catfeat_widget() { / Widget settings. / $widget_ops = array( 'classname' => 'gd_catfeat_widget', 'description' => __('A widget that displays posts from a category of your choice.', 'gd_catfeat_widget') ); / Widget control settings. / $control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'gd_catfeat_widget' ); / Create the widget. / $this->WP_Widget( 'gd_catfeat_widget', __('Gameday: Category Feature', 'gd_catfeat_widget'), $widget_ops, $control_ops ); } /* * How to display the widget on the screen. / function widget( $args, $instance ) { extract( $args ); / Our variables from the widget settings. / $title = apply_filters('widget_title', $instance['title'] ); $categories = $instance['categories']; $links = $instance['links']; $links_num = $instance['links_num']; ?> <div class="widget-container"> <span class="blog-cat-title"><?php echo $title; ?></span> <?php $recent = new WP_Query(array( 'cat' => $categories, 'showposts' => 1 )); while($recent->have_posts()) : $recent->the_post();?> <?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?> <div class="widget-img"> <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail('large-thumb'); ?></a> </div><!--widget-img--> <?php } ?> <div class="widget-inner"> <h3 class="home-title1"><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3> <p class="gd-widgets"><?php echo excerpt(20); ?></p> <?php endwhile; ?> <?php if($links) { ?> <ul class="home-links1"> <?php $recent = new WP_Query(array( 'cat' => $categories, 'showposts' => $links_num, 'offset' => 1 )); while($recent->have_posts()) : $recent->the_post();?> <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul> <?php } ?> </div><!--widget-inner--> </div><!--widget-container--> <?php } /* * Update the widget settings. / function update( $new_instance, $old_instance ) { $instance = $old_instance; / Strip tags for title and name to remove HTML (important for text inputs). / $instance['title'] = strip_tags( $new_instance['title'] ); $instance['categories'] = strip_tags( $new_instance['categories'] ); $instance['links'] = strip_tags( $new_instance['links'] ); $instance['links_num'] = strip_tags( $new_instance['links_num'] ); return $instance; } function form( $instance ) { / Set up some default widget settings. */ $defaults = array( 'title' => 'Category Title', 'links' => 'on', 'links_num' => 4); $instance = wp_parse_args( (array) $instance, $defaults ); ?> <!-- Widget Title: Text Input --> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>">Name of Category:</label> <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:90%;" /> </p> <!-- Category --> <p> <label for="<?php echo $this->get_field_id('categories'); ?>">Select Category:</label> <select id="<?php echo $this->get_field_id('categories'); ?>" name="<?php echo $this->get_field_name('categories'); ?>" style="width:100%;"> <option value='all' <?php if ('all' == $instance['categories']) echo 'selected="selected"'; ?>>All Categories</option> <?php $categories = get_categories('hide_empty=0&depth=1&type=post'); ?> <?php foreach($categories as $category) { ?> <option value='<?php echo $category->term_id; ?>' <?php if ($category->term_id == $instance['categories']) echo 'selected="selected"'; ?>><?php echo $category->cat_name; ?></option> <?php } ?> </select> </p> <!-- Links --> <p> <label for="<?php echo $this->get_field_id( 'links' ); ?>">Show Links:</label> <input type="checkbox" id="<?php echo $this->get_field_id( 'links' ); ?>" name="<?php echo $this->get_field_name( 'links' ); ?>" <?php checked( (bool) $instance['links'], true ); ?> /> </p> <!-- Number of Links --> <p> <label for="<?php echo $this->get_field_id( 'links_num' ); ?>">Number of links:</label> <input id="<?php echo $this->get_field_id( 'links_num' ); ?>" name="<?php echo $this->get_field_name( 'links_num' ); ?>" value="<?php echo $instance['links_num']; ?>" style="width:90%;" /> </p> <?php } } ?> ...and make two copies of it. One is going to be Top Featured Categories and the other is going to be Regional Categories. Then I need to apply a custom CSS class to both of them, making the TFS one (roughly) 350 px tall, and making the RC one (also roughly, as I can't remember the exact dimensions right now) 450 px tall. The original widget, as well as the other widgets that we are using can keep their same styling, but I need these two widgets to have a set size. Thanks in advance! I greatly appreciate any help that anyone gives me.

11-07-2013, 03:29 AM	#2
Manfap Confirmed User Industry Role: Join Date: Jan 2013 Posts: 2,622	Just add 'exclusiveclassname' or what ever you want to call it. <div class="widget-container exclusiveclassname"><div class="widget-inner"> then you can style just that widget with .widget-container.exclusiveclassname

11-07-2013, 12:53 PM	#6
alcstrategy Confirmed User Industry Role: Join Date: May 2012 Posts: 124	you should style by id as id is for unique identifier and each one should have their own id I thought widgets always generated their own id's, but if your widgets don't have specific id's this url might be of use to you specifically this: <?php $args = array( 'name' => __( 'Sidebar name', 'theme_text_domain' ), 'id' => 'unique-sidebar-id', 'description' => '', 'class' => '', 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>' ); ?> %1$s should give unique id per widget source url: http://wordpress.org/support/topic/h...ids-or-classes