Category Archives: Chris’ Coding Corner

CSS Parent Selector jQuery Workaround

This question comes up a bunch of times on coding forums: How can I style/select the parent of an element with a specific class? Now, most of the time this question is posed looking for a CSS solution. Unfortunately, CSS2/3 doesn’t offer a parent selector. CSS4 has it written as potential addition to the CSS core, but that could change as CSS4 is still in the development phase.

There is a simple workaround for those that are interested in a lightweight jQuery solution. I’m offering the jQuery solution, mainly because most of the sites that are developed already include a jQuery library. So without further ado, here’s the code (this would go into your main jQuery (document).load function):

$('.childclass').parent(this).addClass('parentclass');

What this basically does is from start to finish: finds elements with a class, then finds the parent of that class, then adds a class to the parent. You may already have a class for that parent element, but this will add another class so you can style it. You could also add the CSS directly in the script, using .css(), but I find it easier to have my CSS in my CSS file rather than spread out over multiple places.

Hopefully someone will come across this on the interwebs and find it useful.

Modify default WordPress text widget to add css classes to title tag

The scenario:I wanted the end user to have the ability to add custom css classes to the title tag of the default text widget. So basically, instead of just having <h3 class="widget-title">; (which is added in the default sidebar’s before_title parameter), I wanted the user to be able to have <h3 class="widget-title class-name class-name-2 etc">.

The solution:
I copied the default widget code (found in wp-includes > default-widgets.php), added it to my own themes function.php file and modified it. Sounds simple and it actually was once I got through a few bumps (of self doing).

The code:


class WP_Widget_Text_Advanced extends WP_Widget {

function __construct() {
$widget_ops = array('classname' => 'widget_advanced_text', 'description' => __('Advanced Arbitrary text or HTML'));
$control_ops = array('width' => 400, 'height' => 350);
parent::__construct('advanced_text', __('Advanced Text'), $widget_ops, $control_ops);
}

function widget( $args, $instance ) {
extract($args);
$title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
$classes = apply_filters('widget_classes', empty($instance['classes']) ? '' : $instance['classes'], $instance );
$text = apply_filters( 'widget_text', empty( $instance['text'] ) ? '' : $instance['text'], $instance );

$b_title = explode('">', $before_title);
$b_title_e = $b_title['0'];

echo $before_widget;
if ( !empty( $title ) ) { echo $b_title_e . ' '. $classes . '">' . $title . $after_title; } ?>
<div><?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?></div>
<?php
echo $after_widget;
}

function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['classes'] = $new_instance['classes'];
if ( current_user_can('unfiltered_html') )
$instance['text'] =  $new_instance['text'];
else
$instance['text'] = stripslashes( wp_filter_post_kses( addslashes($new_instance['text']) ) ); // wp_filter_post_kses() expects slashed
$instance['filter'] = isset($new_instance['filter']);
return $instance;
}

function form( $instance ) {
$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '', 'classes'=>'' ) );
$title = strip_tags($instance['title']);
$text = esc_textarea($instance['text']);
$classes = strip_tags($instance['classes']);
?>
<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
<input id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>

<p><label for="<?php echo $this->get_field_id('classes');?>"><?php _e('Add Classes. Separate multiple classes by a space (no commas!)'); ?></label>
<input id="<?php echo $this->get_field_id('classes');?>" name="<?php echo $this->get_field_name('classes');?>" type="text" value="<?php echo $classes;?>" /></p>

<textarea rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo $text; ?></textarea>

<p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox" <?php checked(isset($instance['filter']) ? $instance['filter'] : 0); ?> />&nbsp;<label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
<?php
}
}

function register_advanced_text_widget() {
register_widget( 'WP_Widget_Text_Advanced' );
}
add_action( 'widgets_init', 'register_advanced_text_widget' );

The only tricky part in this whole bit (and it’s not even that tricky) was getting the output of the before_widget parameter, running it through PHP’s explode function to look for "> and echo everything that appears before that (it’s the $b_title and $b_title_e variables).

Questions? Ask away!

UPDATE
To make it easier for people, I wrapped this up into a plugin that you can just install. Download it here. To install, just go to Plugins > Install New > Upload.

Display all posts from a custom post type’s categories in WordPress

Whew! That’s a long title and hints at what I was trying to do. Here’s the low down:

I was working on a WordPress site for one our clients and needed to create a custom post type (I’m not going to get into creating a custom post type, there are resources on the internet that already do a great job) so they could easily update their projects. For this custom post type, let’s call it “projects,” I created several categories so that the work could be filed and sorted easily. Some projects may also have more than one category assigned to them.

For those of you that develop with WordPress, you know that you have the option to call get_the_category() to retrieve the category of the current post, however, get_the_category() only works with the default post type. So we need to rely on get_the_terms().

What I wanted to achieve was a “related projects” section on each project page.

Read more…