Customize Native WP Gallery Images & Display In Different Theme Locations

The latest update to WordPress, version 3.5, adds a better experience for creating and inserting galleries in WordPress.

But its also limited to the default settings.

In this post, i’ll show you some additional ways to customize the display of your gallery images.

You’ll also learn how to display your gallery anywhere in your theme using a shortcode or custom php function.

Rather than display your gallery in a post or page, you may want to display it in any header area which is easily done.

Firstly, lets take a look at customizing your gallery beyond the default settings WordPress gives you when creating a gallery.

Once you’ve created a gallery using the default settings in WordPress, you may want to customize your gallery images further.

Here are some parameters you can add to the default shortcode generated by WordPress when you insert your gallery in a post.

Gallery Image Thumbnail Size

The thumbnail image size you choose to use in your gallery depends on what you have set in your Media Settings.

You can change the default thumbnail sizes displayed in your gallery by adding the size parameter:

• size=”small”
• size=”medium
• size=”large”
• size=”full”
• size=”custom”

Example:

This example of the gallery shortcode generated by WordPress when you create a gallery includes:

1. i.d’s for each image included in the gallery and
2. the size parameter

Check the size in your media settings to find out what size you have set for your images to display.

size=”custom” – You can also add custom image sizes which you can choose from to display in your galleries.

Gallery Images

You can add more image i.d’s to this shortcode for any images you have uploaded to WordPress.

By default, WordPress includes the images you have already uploaded and selected when creating the gallery or all images uploaded to the post/page you create the gallery in.

You can also exclude images uploaded to the specific post/page you are creating the gallery to display in using the new features included in WordPress 3.5 or add an exclude to the gallery shortcode like this:

Style Gallery Thumbnail Image

Remove the border from your galleries thumbnail images:

#gallery-1 img {
border: none!important;
}

Change the border color of a framed thumbnail image:

#gallery-1 img {
border: red solid 5px
}

Once you’ve customized your gallery, you can then display your gallery anywhere your theme allows using shortcodes or php.

Display Options

You can display your gallery in WordPress using at least 3 methods:

1. using the gallery shortcode in a post, page or widget
2. using the shortcode in a hook plugins box
3. pasting the shortcode or php directly into a template file like header.php

Examples:

1. Clearly, the easiest way to display your gallery is to use the shortcode.

If you’re wanting to add the shortcode to a widget area, you’ll need to ad support for shortcodes in your child themes functions.php file

add_filter('widget_text', 'do_shortcode');

You could then create a widget area anywhere your theme offers action hooks and add your gallery shortcode to a text widget.

2. If you’re using a premium theme framework, you can also use the shortcode in any hook location using a hook plugin.

You can even add a conditional tag if you want your gallery to display based on specific conditions like the home page only or category pages etc.

You can use the conditional tag in your hook plugin or include the conditional statement in a custom function in your child themes functions.php file.

3. Place the php code directly into a template file.

The header.php would be best for displaying your gallery in your header don’t you think?

Here’s a code example:

Here’s the code placed just above the navigation in a Twenty Twelve child themes header.php file

Displaying your gallery using conditional tags in your template files – header.php

This code displays the gallery in the header, above the primary navigation menu and on the home page only using a Twenty Twelve child theme.

Once you’ve chosen the location, add the conditional tag based on your preferences.

Other Display Options

You can create a custom function for your child themes functions.php file however the code won’t be the same for all themes because of the different action hooks and filters themes use.

Another option would be to install a plugin which displays the native gallery in a widget area meaning you won’t need to play around with code.