At this point the we’ve done the basics for setting up a Wordpress website and adding our Featured Content Gallery. This final post will cover some ideas for sprucing everything up, as well as cover any bits I may have left out along the way.

CSS Adjustments

The gallery gives you some great control in the plug-in settings. You might still want to adjust your font sizes, color, and that sort of things however. Digging inside the CSS reveals everything, but I’ll save you some time and hit a few highlights.

(As before, the CSS is found in featured-content-gallery/css/jd.gallery.css.php)

1. To make edits to the bottom text block, search the CSS for “slideinfoZone.”

2. I mentioned this yesterday, but to make edits to your drop down button, look for “a.carouselBtn.”

More and More Control

You can also bend the gallery to your will by opening up jd.gallery.js.php.  This is the inner workings, so use caution when making edits here. But don’t get too scared, we’re going to stick with a pretty low key area.

Scroll down and find “this.setOptions({”. Below here is a long list of features that you can toggle on or off with “true” and “false.” Further down you can make changes to the varying opacity of the gallery. You can also adjust the placement of your thumbnail images.

Experimentation should allow you to get what you want here, within the means of the gallery. Just pay attention to what you change so you can change it back if it all goes awry!

Control the Thumbnail Order

By default your nav thumbnails will be ordered with the most recent post on the left. (remember, these are “Featured” category posts from the blog.) Once your content is uploaded, you may need to change the post times for each Featured Post to get the order correct. I just edited second by second to get them lined up. And don’t worry, making future edits to the post does not change the original date; only the content will update.

How I Used the Plug-In

You can check out my project here. I needed to make Resolution Church a site that was easily updated but make good use of minimal content. The church is in a pre-launch stage, so visitors really just need a focus on basic information about the church.

The implementation is as good as your graphics. With a pretty basic template, I worked up some nice looking images for each slide and it becomes a fairly slick looking one-page site.

A bonus is the church has a blog that can be used for more detailed information and communication with site visitors. They also have an easily managed Wordpress site that can probably grow with the organization. The Featured Content Gallery can be adjusted in the future to be used in a more typical way, to draw attentions to special information on the homepage.  More pages can be added through Wordpress, and now that we all know how to use Custom Templates each page can have the proper look and feel.

I Heart Wordpress

So far we have set the stage and now we get to the cool stuff. You can see the finished site at ResolutionChurch.TV.

The Plug-In*

We achieve our fake one page site by using the Featured Content Gallery plug-in. This is a cool creation by JonDesign. It takes any posts in the “Featured” category and sends them to the gallery. Custom fields are used to define images associated with the gallery. I won’t go over the basics of installing the plug-in here, the plug-in site has an easy to follow guide on setting it up.

What we want is a page with navigation at the top that will scroll in content right to left, all in the same page. To achieve the right effect, set the width to span the page as much as possible. 960px wide worked well for me.

One big fix will be the navigation. Out of the box it is hidden by default, and it re-hides after every click. This is not very effective navigation for this use. What we need to do is set the nav to stay open. This can be set to open on load or on click.

“Freezing” the Nav

(credit to the FeaturedContentGallery.com Forum on this )

To fix the navigation, you need to dive into the plugin code. Open the editor, and open the file d.gallery.js.php. You will need to make edits in four spots.

1) find:

toggleCarousel: function() {
if (this.carouselActive)
this.hideCarousel();
else
this.showCarousel();

replace with:

toggleCarousel: function() {
if (this.carouselActive)
this.showCarousel();
else
this.showCarousel();

2) find:

‘click’: function (myself) {
this.goTo(myself.relatedImage.number);
if (this.options.thumbCloseCarousel)
this.hideCarousel();
}.pass(currentImg, this)

replace with:

‘click’: function (myself) {
this.goTo(myself.relatedImage.number);
if (this.options.thumbCloseCarousel)
this.showCarousel();
}.pass(currentImg, this)

3) find:

initCarousel: function () {
this.createCarousel();
this.fillCarousel();
if (this.options.carouselPreloader)
this.preloadThumbnails();
},

replace with

initCarousel: function () {
this.createCarousel();
this.fillCarousel();
if (this.options.carouselPreloader)
this.preloadThumbnails();
this.showCarousel();
},

4) last, to remove the drop-drop button, find:

textShowCarousel: ‘Featured Content’,

replace with:

textShowCarousel: ”,

Check out your work! You should have a permanent navigation at the top of the gallery now. You may also decide to keep the nav closed initially and have the user click to open it. If so, keep on reading.

Or Keep the Nav Closed Initially**

This isn’t necessarily ideal, and I honestly haven’t decided to keep my site this way. I decided to go this route because I wanted a full view of the initial slide. Since I went this way, I wanted to include it here.

Basically you needs to skip steps three and four above. This will keep the drop-down button. Since we are requiring a click to show navigation, the user will benefit from a larger button. This is achieved with edits to the CSS.

Open the file featured-content-gallery/css/jd.gallery.css.php. Yes, the CSS is contained in a php file. Search to find .jdGallery a.carouselBtn, .jdGallery a.carouselBtn:hover, .jdGallery a.carouselBtn:active. Edit the font-size and the padding, save, and check out your button. Experiment to find the right look. A 16px font and top/bottom padding of 10px made me happy.

[UPDATE: After much ado, user experience wins. I decided to ditch the button on the site and completely freeze the navigation on load. You may find a different use though, so I'll leave up the instructions for Method 2 above.]

Tomorrow I’ll wrap everything up with some final tips for editing the Gallery.

*I owe lots for some of the work on this plug-in! I’ve made sure to link every source I can think of to give credit where credit is due. I think having all of the information in one tutorial like this will be helpful, but definitely check out my sources for deeper info on every topic covered.

Yesterday we set up the basics for our site. The techniques covered so far would be useful anytime using Wordpress for Content Management. Today’s tip is also useful in other scenarios. We are going to selectively remove the sidebar and clean up a bit of unneeded clutter.

Removing the Sidebar Option 1 (preference)

Now that we have our static front page set up, we want it to look as much like a typical frontpage as possible. That is going to mean removing our sidebar. We still want our sidebar to show up on blog pages, but it needs to go away here. Luckily, this is also a pretty easy fix.

Open up your page.php templage. Navigate to the bottom of the code and find <?php get_sidebar(); ?>. This is where the php is telling Wordpress to call the sidebar. We don’t want it here, but we do want it sometimes, so we use conditional tags.

Delete the sidebar call and insert this:

<?php

if ( is_home() || is_page(x) ) {

} else {

get_sidebar();}?>

Replace the “x” in “page(x)” with the page number of your static page. Basically we are telling wordpress that if the page being called is Home or the chosen page(s) do nothing, but otherwise call and insert the sidebar.

Pretty nifty, huh?

Removing the Sidebar Option 2

There is a second option, which can be good practice for another useful technique: Custom Templates. It’s not quite as elegant but it’s a totally legitimate way to get it done.

Generally for minor edits, I will work in the theme editor inside of Wordpress. It’s just fast and easy. For this however, you will need to download your page template file.

Open the file in your favorite editor, rename it from page.php to foo.php (or whatever you like) and save your new file. At the top of the code insert the following.

<?php

/*

Template Name: Foo

*/

?>

Add your own template name so Wordpress knows what to call it. Next, scroll to the bottom again and just delete the sidebar. That’s it! Save and upload back to your template directory. Open the page editor and now on the right there will be a drop-down to choose your page template. Choose your new template and presto, no sidebar!

One more minor fix

If you’ve been peeking at your work, you may have noticed that Wordpress still wants to stick a heading and content on your static page. That’s all well and good, but for our purposes that needs to go. Since this is a single page site, I will be totally killing the content, however if you decide to add more pages, you might want to use a custom template for this ( aren’t you glad you read the last section?)

Quick and painlessly, open your page.php file and delete everything between <?php if (have_posts()) : ?> and <?php endif; ?>. What did we just do? We deleted The Loop, the beautiful code that makes your blog work. This is what tells Wordpress to look for posts, and if there are any, stick them right here. Deleting that gives us a nice clean canvas

Today we got everything prepped. We deleted the sidebars and we got rid of the Wordpress Loop on our pages. Tomorrow we will get to adding the fun stuff.

For a recent project I really need to create a one page site for a new church “plant.” They really had minimal content and information, but needed a nice web presence. It also needed to be easily editable by them, and the church needed a blog.

I decided to give it a shot with Wordpress, and I’m pretty happy with how it all turned out. Here are the basic tools/techniques I used to pull it off.

1) First I needed a non-traditional blog site with a static front page. This is fixed easily enough in the Wordpress dashboard. Go to “Reading” and select a page to use as your static page. Below that, you will need to select a second page to use as your Blog home-page. I created a new page called “Blog” for my purposes, but use what works for you.

2) This creates a couple problems that are solved fairly easily. First, this places a second “Home” link in the navigation.

To fix this navigate to your Header.php file (and possibly your Footer.php if it also contains navigation). Look for this code:

<?php wp_list_pages(’sort_column=menu_order&depth=1&title_li=’); ?><br />

Add in the condition &exclude=x where “x” equals the page number(s) that need to be excluded. So one excluded page would look like this:

<?php wp_list_pages(’sort_column=menu_order&depth=1&exclude=4&title_li=’); ?><br />

and multiple would look like this:

<?php wp_list_pages(’sort_column=menu_order&depth=1&exclude=1,4,11&title_li=’); ?><br />

At this point your navigation should look nice and pretty with only one “Home” link

FYI, to find the page number, just navigate to “Pages” and click to edit that page. At the end of the address in your browser bar you will see “post=x.” That is your page number.

Next: Removing the sidebar on selected pages.

Click to download fullscreen

Click to download widescreen

Click to download widescreen

Click to download fullscreen