[/cc]

In this example, for each campus post, I’m using the post_thumbnail function (to get the post thumbnail wrapped in an img tag) and putting it inside an already styled div. I’m also using a custom thumbnail size I defined in my functions.php file. You could easily substitute “the_excerpt()” for “the_content()” if you don’t want to display the entire post content or add your own custom fields to each post.

Personally, I try to use the content functions built into WordPress whenever possible.

Here’s what the finished section of our page template will look like.
[cc lang=”html”]

[/cc]
Congratulations! You just created a fully dynamic jQuery element for your page!

The advantage of this is obvious for most church web devs. You can now change information about your campuses in your WP back-end instead of in the code. This means you can successfully make “updating the campus information” a job for someone else (even a volunteer), which will give you more time to add MORE dynamic jQuery UI elements to your page.

And when you can do that, you are most definitely #winning!

Like this:

Brian Notess

<3 Code, <3 Film, <3 Coffee. Combine ingredients for instant fun.

Level up your inbox.

Free resources, top posts, and more!

Reader Interactions

There are 5 comments already... Come join us!

  1. sandy boone says

    I am new to jquery and don’t know hwere to put that code into my html page – does it go in the header, footer, or page code? Does it go above, below the tab div?

    Does this code still work if someone has turned off javascript?
    Last question for this NOOB
    * When I call the

    Here is what I have in the header.php just before closing the head:

    $fb = jQuery.noConflict();

    $fb(document).ready(function() {

    //When page loads…
    $fb(“.tab-content”).hide(); //Hide all content
    $fb(“ul.tabs li:first”).addClass(“active”).show(); //Activate first tab
    $fb(“.tab-content:first”).show(); //Show first tab content

    //On Click Event
    $fb(“ul.tabs li”).click(function() {

    $fb(“ul.tabs li”).removeClass(“active”); //Remove any “active” class
    $fb(this).addClass(“selected”); //Add “selected” class to selected tab
    $fb(“.tab-content”).hide(); //Hide all tab content

    var activeTab = $fb(this).find(“a”).attr(“href”); //Find the href attribute value to identify the active tab + content
    $fb(activeTab).fadeIn(); //Fade in the active ID content
    return false;
    });

    });

    • Brian Notess says

      Those are good questions.

      With this example, you don’t actually need to include the jQuery code in your html. All you have to do is.

      1. Make sure you load jQuery in your header.php file
      or whatever version you want.
      2. in the same way load your own script containing the jQuery from this example.
      (or whatever you call it)

      the code will run “on load” which means as soon as your page loads your script should start running.

      It will not work if JS is turned off on a users browser.

      Hope that helps.

  2. Samia says

    Nice post. I am tying to do the same thing, only with custom fields. so far, I can’t escape going to the editor to add the name of the field, so that it fetches the correct tab/field. any idea how I can make it dynamic?

Speak your mind...

Your email address will not be published. Required fields are marked *

%d bloggers like this: