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”
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”
If I can say one thing about working at Crowd Favorite, it’s that I’ve learned a lot about git and Github. From using the basic command line tools to working closely with submodules, I can say I understand git much more today than I did 3 months ago. Earlier this week, my friend Colin challenged me to 30 weekdays of committing to projects on Github. Starting today, I will take him up on that.
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:
…without including the Editor. In the Admin. That was a really long title, so I hope you don’t feel mislead! I was recently working on a project that required a Custom Post Type without the editor, but needed the Media Uploader.
Note: This is not a full-blown tutorial. The purpose of this post is to help those troubleshoot the fact that the media uploader is not working, given the conditions above.
Here is how I define the media custom meta box (this is only part of a bigger array of arguments):
array(
'title' => __( 'Upload File', 'jlc' ),
'type' => array( 'custom-post-type' ),
'id' => 'upload-file',
'items' => array(
array(
'type' => 'media',
'name' => '_upload_file',
'label' => __( 'Upload File', 'jlc' ),
'label_position' => 'before',
),
),
),
In the post type definition, here’s what the ‘supports’ argument looks like:
'supports' => array(
'title',
'page-attributes',
)
Note that the editor is not listed. If it were, the media uploader scripts would be automatically added. Instead, you get an error that wp.media is undefined. Luckily, there’s an easy fix for this. Simply add this line in where you custom post type is defined:
add_action( 'admin_init', 'wp_enqueue_media' );
This says that when you are on the admin, add the required media scripts. That way, even if the editor isn’t loaded, the media uploader will be.
Updates have been added after the jump!
In the coming weeks I’ll likely put a lot of my own personal code (as in, not code people pay me to write) in public repos on Github. A lot of my work is WordPress related so I’ll make a local repo at the root of some WordPress install as to not complicate things. In order to make sure I don’t put up something unintentionally (like say, my wp-config.php file), I’ve created a more thorough .gitignore than what I have seen from automatic generators. If you’re interested, I put it into a Github Gist, so you can just copy and paste it. If you think I’m missing something or am wrongfully excluding something, leave a comment on the gist!
At Crowd Favorite we use git for everything, which is a nice change from my old workflow of hoping for the best. I’ve learned quite a bit about git and Github since starting and have looked for tools to help me do things better. A really simple, but super helpful, tool is the GitGutter package for Sublime (thanks Dave!)
It’s very straight forward: when you add, change, or delete a line, it will put small icons in the gutter of your file, with the line numbers, to make it easier for your to spot where you made modifications. It doesn’t seem like much, but I definitely miss it when I’m using a different editor or machine. Check it out!
Recently I was developing a few forms for a project at work and wanted a fairly specific format for the input of one of the fields. It was a time of day, and since the <time> element isn’t very well supported in browsers yet, I opted for my own text input and validation. While I do provide some examples for users and check the input on the server side, I opted for input masks on the front end of development to make the form validation easier, and more importantly, to make using the form easier.
Continue reading “Use Input Masks for Better UX and Easier Validation”