Using the WordPress Plugin: Featured Content Gallery

As WordPress has become a popular content management system, we’ve seen a growing need for tutorials aimed at customizing your WordPress website. At times, you may want to have the images in the header of your website display custom images and rotate them accordingly. This guide is going to show you how to install a WordPress plugin that will changes your header image and allow you to customize it.

In configuring this plugin correctly we had to not only watch a video but learn through trial and error. Please watch our video tutorial on this to help you set this plugin up correctly.

Downloading the Plugin

This first step you’ll need to do it download the plugin in WordPress. If you’re not familiar with downloading plugins please see our tutorial.

1. Log into your WordPress Dashboard. Go to plugins and “Add New”
2. Click on “Install Now”, on the top entry entitled “Featured Content Gallery”
3. After installing the plugin, click activate plugin
4. Then you’ll need to add the code provided to themes pages where you want the featured image gallery to display.In this example we’re going to add it to the header.php file so it displays in the place of the current header on our pages. To get this to function correctly we’ll need to remove the existing PHP code and insert the line of code provided:

   <?php include (ABSPATH . ‘wp-content/plugins/featured-content-gallery/gallery.php’); ?>

Configuring the Plugin

Once you have finished the steps above, you’ll need to customize and configure the plugin to use. Keep in mind, you’ll need at least two posts or pages for it to work correctly. Since we removed the header image in the header, we HAVE to include it on each page for it to show a header.

1. Go to Settings > Featured Content Gallery in the WordPress Dashboard.
2. At the top of the page you’ll see the code you need to paste in. If you ever need it for reference it’ll always be displayed here.
3. This next section decides what is displayed in the plugin. You have two basic options. You can display features by category or by individual posts or page ID’s. We’re using individual page Id’s. To find out which page ID’s are for specific posts or pages load the page in the editor and look at the URL, you’ll see the page or post ID number there.
4. In this section, you begin to customize the look and feel of your gallery. Choose your width and height of the gallery. I had to keep trying settings to get it to fit exactly in the default theme so it’s 998 x 300.
5. These next two sections will further customize the look and feel. Feel free to keep adjusting the settings until you find the settings you want.
6. The last sections will help you set up custom fields for the posts. It took a minute to figure out how to get this to work correctly. Once you setup the fields you want, you’ll need to configure your WordPress Dashboard to show custom fields. Don’t worry though, we’ll go over that below.
7. You’ll need ot upload all the images to your server. In our case, we created a folder “img” in the document root of our account and uploaded the images. At this point you’ll want to write down the path because you’ll need to full URL path to the images in the next section.

Setting Up Custom Fields

1. Open one of your pages or posts to edit. Here in this example, we’ll use the Sample Page.
2. At the top of the sample page you’ll need to select the “screen options” in the upper right corner. Check the box next to the custom fields.
3. This will add the custom fields box to the page below the content.
4. under the add new field option type in the custom field name such as “articleimg”. This is required as this field attaches your image to the post or page.
5. Under the value field for the “articleimg” name you’ll enter the full path to the images. In our example it is in a folder called “img” so the full path is: https://tims.inmotiontesting.com/img/land_2.jpg
6. in the example our image we’re attaching is named land_2.jpg so the full path included the image name.
7. If you are using a custom text box at the bottom of your image gallery you’ll need to follow the steps above and create a custom field for “featuretext”.
8. Enter in the value field the exact text you want to display in the banner rotator.
9. Once you are done, you’ll need to do this for each post or page you wish to attach an image to.