Category: Quick Tips

WordPress Helper Functions for Detecting IE

Posted on

The other day I was working on a problem where I wanted to check if a website was using a specific browser (in this case IE) and version (in this case 9 or below). I came up with 2 functions that would serve an a nice, reusable check for both. These can also be extended to check for other browsers or versions, or even accept custom regular expressions.

Continue reading “WordPress Helper Functions for Detecting IE” →

WordPress Database Encoding & the Case of Disappearing Widgets

Posted on

Recently I was updating the widgets on my homepage to promote the new WP in One Month. I decided to do so with the logo and a caption, making Jetpack’s Image Widget the perfect candidate. I uploaded the logo, added a title, then copy and pasted the text from the website’s ‘Jumbotron’ area for the caption. I clicked ‘Save’ and something strange happened: all of the Image Widgets, everywhere on my site, disappeared. I tried to do the same thing with a Text Widget, thinking maybe there’s a bug in Jetpack’s Image Widget or it doesn’t allow certain text/markup. After going through the same steps and clicking ‘Save’ every Text Widget on the site disappeared. I decided (really, was forced) to do some investigating.

Continue reading “WordPress Database Encoding & the Case of Disappearing Widgets” →

Add IE Conditionals to wp_enqueue_style

Posted on

When creating a WordPress theme, it’s best practice to use wp_enqueue_style for adding all stylesheets, including style.css. At first glance, this can pose a challenge if you want to conditionally include CSS based on the browser (like IE-only styles, for example). Luckily, there is a quick way to do this in WordPress using $wp-styles:

global $wp_styles;
wp_enqueue_style( 'jlc_ie_styles',get_template_directory_uri() . 'css/ie-style.css', array(), '1.0.0' );
$wp_styles->add_data( 'jlc_ie_styles', 'conditional', 'IE' );

The code above calls on the $wp-styles class to associate our IE-only stylesheet (by tag/name/slug) with a condition, the condition being “IE.” If you wanted IE 9 and below, you could do this:

$wp_styles->add_data( 'jlc_ie_styles', 'conditional', 'lte IE 9' );

This is a great (and best practice) way to conditionally call styles. You can see more examples with comments over in this gist by wpscholar.

Make wp-caption the same (responsive) width as the Image

Posted on

I was working on a problem last week in WordPress where the caption for an image was extending the whole width of the container, not staying the width of the image. This make sense – the image is inside the .wp-caption container. So how to we fix it? Let me tell you!

Continue reading “Make wp-caption the same (responsive) width as the Image” →

Fix wp_nav_menu on Custom Type Archives in WordPress

Posted on

Recently I was working with an issue in WordPress where the site’s menu was not showing up on an archive page for one of my custom post types. There were a few troubleshooting things I tried, including the most common recommendation, use theme_location instead of menu when referencing the menu in your theme (code after the jump):

Continue reading “Fix wp_nav_menu on Custom Type Archives in WordPress” →

Add Attachments to WordPress Search Results

Posted on

I feel like this has to have been done a lot, and there are great plugins out there for it, but if you’re just looking to add a quick function to your theme (or a really simple plugin) yourself, here’s how to modify WordPress’ search query to include attachments (like images).

function attachment_search( $query ) {
    if ( $query->is_search ) {
       $query->set( 'post_type', array( 'post', 'attachment' ) );
       $query->set( 'post_status', array( 'publish', 'inherit' ) );
    }
 
   return $query;
}

add_filter( 'pre_get_posts', 'attachment_search' );

This does 2 things: includes posts of type ‘attachment’ to the search query, and adds the post status of ‘inherit’. This will ensure that any images (or other attachments) that were added while adding a new post or page will be included in the results.

You can also extend the post type array to include your own Custom Post Types (eg array(  'post', 'attachment', 'products' ); )

These 2 posts were very helpful in getting this code together: