Make a difficult page editable

I think a combination of two techniques will get you all the way there.

1. Shortcodes

It’s really easy to use shortcodes to wrap various content in a <div>/<span>/<section>. Take a look at the Shortcode API. Then you could take something like this:

[tabs]
    [tab title="Tab 1"]The tab #1 content[/tab]
    [tab title="Another Tab"]The tab #2 content[/tab]
[tabs]

And output it as:

<article class="tabs">
    <section class="tab">
        <h3>Tab 1</h3>
        <div class="tab-content">The tab #1 content.</div>
    </section>
    <section class="tab">
        <h3>Another Tab</h3>
        <div class="tab-content">The tab #2 content.</div>
    </section>
</article>

There are a lot of plugins that do this like shortcodes ultimate, but I think they tend to be rather bloated. I’d code tihs myself if it were me.

2. Custom Post Type & Taxonomy

Using shortcodes, you could extend the above patterns one step further and also have a [slide] shortcode, but I think that might start getting too convoluted.

At this point, I think it makes sense to have a “slide” custom post type and then use a “slideshow” custom taxonomy to sort each slide into one or more slideshows. You could enable the menu order field to control the slide order to set that up as a custom meta box.

I see that you’re using AnythingSlider which has a WordPress plugin that works similarly. It’s possible even that you could combine that and shortcodes ultimate to get this working with now extra work, but I can’t promise that will work.

The result

In the end, your solution’s workflow would go like this:

1. Create a “Slide” post.
2. Use the shortcodes to define the tabs in each slide.
3. Assign the slide to a slideshow taxonomy term.
4. Repeat steps 1-3 for all the remaining slides.

Then, it’s up to you to put together a template that queries the slideshow and outputs all the code you need. Alternately, maybe you make a final shortcode that places it for you like this: [slideshow cat="My first slideshow" /]