WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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
up vote 2 down vote accepted


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">
        <a href="#your-target-div-A" title="Your target description A">
            <span class="wpse-tabs-icon smilie-icon"></span>
            A: Some descriptive text
        <a href="#your-target-div-B" title="Your target description B">
            <span class="wpse-tabs-icon stats-icon"></span>
            B: Some descriptive text

<!-- 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>

The 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;
share|improve this answer
worked great. thanks! – chris_s May 24 '11 at 23:05

Your Answer


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.