Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am currently looking for a way to replicate the image I have below. I have come across many tabbed content plugin's and snippets of code, but I cannot figure out how to add different background images to each tab.

enter image description here

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

Prepare

You will have to use some jQuery and jQuery UI on your tabs.

Load it with wp_enqueue_script - Codex, How-To.

The search

In any case: Google for "jQuery Tabs".

Mark up

The mark-up will look close to this one.

<!-- These are the tabs -->
<ul class="wpse-tabs">
    <li>
        <a href="#your-target-div-A" title="Your target description A">
            <span class="wpse-tabs-icon smilie-icon"></span>
            A: Some descriptive text
        </a>
    </li>
    <li>
        <a href="#your-target-div-B" title="Your target description B">
            <span class="wpse-tabs-icon stats-icon"></span>
            B: Some descriptive text
        </a>
    </li>
</ul>

<!-- This is your content with wrapper -->
<div class="tab-target-wrapper">
    <div id="your-target-div-A">Your content A</div>
    <div id="your-target-div-B">Your content B</div>
</div>

The Style

<style>
/* Assumin you're using an image sprite as background. 
In case you don't know what that is, ask google */
.wpse-tabs-icon {
    display: block;
    width: 16px;
    height: 16px;
    background: url('iconsprite.png') no-repeat;
}
.smilie-icon {
    background-position: 0px 0px;
}
.stats-icon {
    background-position: 20px 0px;
}
</style>
share|improve this answer
    
worked great. thanks! –  chris_s May 24 '11 at 23:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.