First time poster here... I'm creating a new site on the hosted Wordpress site with a friend. It's going to have each blog post divided into 4 'sections' (we're titling them: bramble, thorns, paths, fruit). We would like to have a background image for each section (separated by an image and heading title).

So my question is two fold - first, are there some themes out there that support this? Or is this something I can do in the admin console? (If so I don't think I have seen it, so if someone can point me to it, let me know.) And bonus points if the theme has a sitemap and sliding side menu.

For reference, I looked at this post, but this seemed more about developing/desigining a theme. changing Specific section background image in wordpress

I am more interested in selecting and configuring a theme to do this. I'm not interested in doing development.

Thanks in advance! Paul

First time poster here... I'm creating a new site on the hosted Wordpress site with a friend. It's going to have each blog post divided into 4 'sections' (we're titling them: bramble, thorns, paths, fruit). We would like to have a background image for each section (separated by an image and heading title).

So my question is two fold - first, are there some themes out there that support this? Or is this something I can do in the admin console? (If so I don't think I have seen it, so if someone can point me to it, let me know.) And bonus points if the theme has a sitemap and sliding side menu.

For reference, I looked at this post, but this seemed more about developing/desigining a theme. changing Specific section background image in wordpress

I am more interested in selecting and configuring a theme to do this. I'm not interested in doing development.

Thanks in advance! Paul

• themes
• custom-background

• Learning the Customizer to style posts and pages is the way to go. – klewis Commented Nov 5, 2016 at 18:48

1 Answer 1

You need to modify your theme pages to support this change. If you already have a background in place you can modify it on a per post basis using the technics describe in that post.

This plugin Custom CSS per post in WordPress is a good example at setting custom css per page.

The pro to this is you can copy/paste your desired CSS markup to all the pages you want to adjust. Assuming a background image is in place then level of effort on your end is minimal.

The con is that keeping up with changes means adjusting CSS on individual pages in the future.

Another method is creating a custom metabox that give you a selector of the type of section you want.

<?php

// Register your Meta Box

function add_theme_section_meta_box() {
    add_meta_box(
            'theme_section_meta_box',          // $id
            'Theme Section',                   // $title
            'show_theme_section_meta_box',     // $callback
            'post',                            // $page
            'normal',                          // $context
            'high' );
}

add_action( "add_meta_boxes", "add_theme_section_meta_box" );

// Render the meta box on the edit page

function show_theme_section_meta_box( $post ) {
    $meta = get_post_meta( $post->ID, 'theme_section', true );
    if ( ! $meta || $meta === 0 ) {
        $meta = false;
    }
    wp_nonce_field( basename( __FILE__ ), "theme-section-meta-box-nonce" );
    $sections = array (
            0         => 'None',
            'bramble' => 'Bramble',
            'thorns'  => 'Thorns',
            'paths'   => 'Paths',
            'fruit'   => 'Fruit',
    );
    ?>
    <table class="form-table">
        <tr>
            <th><label for="theme_section">Section</label></th>
            <td>
                <select name="theme_section" id="theme_section">
                    <?php foreach ( $sections as $section => $sectionTitle ) {
                        $selected = $meta === $section;
                        printf( "<option %s value='%s'>%s</option>", $selected ? 'selected' : '', $section, $sectionTitle );
                    }
                    ?>
                </select>
            </td>

        </tr>
    </table>
    <?php
}

// Save the meta when saving a post

function save_theme_section( $post_id, $post, $update ) {
    if ( ! isset( $_POST[ "theme-section-meta-box-nonce" ] ) || ! wp_verify_nonce( $_POST[ "theme-section-meta-box-nonce" ], basename( __FILE__ ) ) ) {
        return $post_id;
    }

    if ( ! current_user_can( "edit_post", $post_id ) ) {
        return $post_id;
    }

    if ( defined( "DOING_AUTOSAVE" ) && DOING_AUTOSAVE ) {
        return $post_id;
    }

    $slug = "post";
    if ( $slug != $post->post_type ) {
        return $post_id;
    }

    $theme_section = '';
    if ( isset( $_POST[ "theme_section" ] ) ) {
        $theme_section = $_POST[ "theme_section" ];
    }
    update_post_meta( $post_id, "theme_section", $theme_section );
}

add_action( "save_post", "save_theme_section", 10, 3 );

Then when you want to display a background, you would simply need to check if the page you're looking at has that setting and decide what to do about it.

$theme_section = get_post_meta( get_queried_object_id(), 'theme_section', true );

if ( $theme_section && $theme_section !== 0 ) {

    switch ($theme_section){

        case 'bramble':
            // ...
            break;
        case 'thorns':
            // ...
            break;
        case 'paths':
            // ...
            break;
        case 'fruit':
            // ...
            break;
    }
}

A third method is to use Term Meta which is like custom fields for categories. Then you could specify details for your custom taxonomy there -- like the image to use.

Looks like there might be a plugin for it - WP Term Images