How To Create a Pseudo One Page Site in Wordpress Pt 3

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.