Adding drop-downs to Options

This isn’t so much a support question as it is a WordPress how to but I’ll help anyway. ??

Rather than edit the right column lets just add a new dropdown option.

We are working in the theme-options.php file. If you are going to go this far you might re-brand the whole theme for yourself so that any future updates I make don’t wipe out this for you.

Step 1) add the new option to the $dm_options array and give it a default value.

$dm_options = array(
    'author_credits' => true,
    'right_sidebar' => true,
    'right_sidebar_width' => 3,
    'left_sidebar' => true,
    'left_sidebar_width' => 3,
    'show_header' => true,
    'show_postmeta' => true,
    'new_dropdown' => 'select'
);

Step 2) define some values for this new drop down

$dm_new_dropdown_options = array(
    '1' => array (
        'value' => 'select',
        'label' => 'select'
    ),
    '2' => array (
        'value' => 'option1value',
        'label' => 'option 1 label'
    ),
    '3' => array (
        'value' => 'option2value',
        'label' => 'option 2 label'
    ),
    '4' => array (
        'value' => 'option3value',
        'label' => 'option 3 label'
    ),
    '5' => array (
        'value' => 'option4value',
        'label' => 'option 4 label'
    )
);

Step 3) We are going to add some code inside the devdm_theme_options function now.

First add the variable we created above of possible drop down options to the global line at the top of the function.

//get our global options
    global $dm_options, $dm_sidebar_sizes,$dm_new_dropdown_options, $developer_uri;

Second we are going to add the code that generates the html and sets the selected value.

I put this inside the <form and inside the first table tag. It makes a new table row with cells and sets up the html of our select box.

<tr valign="top"><th scope="row"><?php _e('New Drop Down Options','devdmbootstrap3') ;?></th>
                    <td>
                        <select id="new_options" name="dm_options[new_dropdown]">
                            <?php foreach( $dm_new_dropdown_options as $new_options ) :
                                $label = $new_options['label'];
                                $selected = '';
                                if ( $new_options['value'] == $settings['new_dropdown'] )
                                    $selected = 'selected="selected"';
                                echo '<option style="padding-right: 10px;" value="' . esc_attr( $new_options['value'] ) . '" ' . $selected . '>' . $label . '</option>';
                            endforeach; ?>
                        </select>

                    </td>
                </tr>

At this point it should probably be fine and working if you go to the DevDm Theme Options page but there is no security here. So lets do that now because we care about our users and it is our responsibility to save them from the evil of the internet.

With great power… etc. and so forth… responsibility.

Step 4) We are going to move up into the dm_validate_options function now.

Add your $dm_new_dropdown_options to the global line like we did with the devdm_theme_options function.

Insert the code below anywhere after the $settings variable is set and before the return $input at the bottom

The code below first sets a $prev variable to the OLD value before you changed it.

Now we set a holder variable that already says your input is bad.

It has to pass our test before we give it free passage to the database.

Next we loop through the available options checking for an exact match to your change the options page has passed through. If we find one we set the holder variable to true and it saves itself. If the holder variable is still false by the time it gets to our last if statement we override the $input and set it to the old value as it could have been something bad.

$prev = $settings['new_dropdown'];
    $new_dropdown_valid = false;

    foreach ($dm_new_dropdown_options as $key => $new_dropdown_option) {
        if ($input['new_dropdown'] === $new_dropdown_option['value']) {
            $new_dropdown_valid = true;
        }
    }

    if ( $new_dropdown_valid == false ) {
        $input['new_dropdown'] = $prev;
    }

That should be it! Now you can control the “new_dropdown” value inside the $dm_options.

If you still can’t figure it out email me and I’ll send you a copy of an edited theme-options.php.

[email protected]

Thanks. I’ll try that out. When researching this yesterday, I came across the Customizer and started to think about converting all of the settings over to the Customizer, rather than having a settings page at all. Since it’s built into WP Core and being expanded, it seems like the way of the future — real time previews!

If I go that route, I’ll be sure to share code I write. Thanks again.