Friday, July 26, 2013

Yet another day on the options panel - day 8

I'm jumping right into the last tutorial today: http://wp.tutsplus.com/tutorials/the-complete-guide-to-the-wordpress-settings-api-part-8-validation-sanitisation-and-input-ii/

First, the author goes to add a checkbox field into the example section he created yesterday.  I've already created my own checkbox callback but the author goes more into detail explaining it.  Here is my code:
function b4b_checkbox_callback($args){
$options = get_option('b4b_theme_display_options');
$html = '<input type="checkbox" id="' . $args[0] . '" name="b4b_theme_display_options[' . $args[0] . ']" value="1" ' . checked(1, $options[$args[0]], false) . '/>';
$html .= '<label for="' . $args[0] . '"> ' . $args[1] . '</label>';

echo $html;
}

This makes use of the checked func: http://codex.wordpress.org/Function_Reference/checked
To use this I would simply use an if loop to check if the saved options value is 1 or not.

Then the author goes through the callback for a radio button.  It's pretty much the same as a checkbox as it uses the checked function but the $checked parameter increments for each radio button in the set.  Again, to use the label to check the radio button just set the label's "for" attribute equal to the radio button's ID.

Lastly the author shows how to make the callback for the select control, which I've already done again.   Here's the code I've used for it:
function b4b_select_callback($args){
$options = get_option('b4b_theme_display_options');
$html = '<select id="' . $args[Count($args)-2] . '" name="b4b_theme_display_options[' . $args[Count($args)-2] . ']">';
foreach($args as $arg){
if ($args[Count($args)-1] != $arg && $args[Count($args)-2] != $arg){
$html .= '<option value="' . $arg . '"' . selected($options[$args[Count($args)-2]], $arg, false) . '>' . $arg . '</option>';
}
}
$html .= '</select>';
$html .= '<label for="' . $args[Count($args)-2] . '">' . $args[Count($args)-1] . '</label>';

echo $html;
}

This makes use of the selected func: http://codex.wordpress.org/Function_Reference/selected

After reading skimming through some of the tutorials again and browsing through the codex this is what my final header looks like: http://pastebin.com/SRdwSmhe

Now that the header is done I'm going to put a bit of planning for the other options down:
  • To display the favicon I'm just going to implement (to theme-options.php) the display favicon code from this author's tutorial: http://wp.tutsplus.com/tutorials/creative-coding/integrating-the-wp-media-uploader-into-your-theme-with-jquery/?search_index=2
  • To control the number of posts on the home page I first need to edit the validation callback so it will only accept numbers.  Then before the loop (in index.php) I'd want to use query_posts(http://codex.wordpress.org/Function_Reference/query_posts) in combination with retrieving the option (sanitized).  It's important to keep in mind that this option is useless since there are already options for this in Settings->Reading.
  • Code for the enable sharing posts and author bio options will go in the page.php between the get_template_part func and code for the comment loop.
  • The enable social icons (in the footer) option will go in the footer.php and be an if loop to decide whether it will display or not.
  • Text in footer controls the text in the footer that is shown at the very bottom and centered in a very light blue.
  • Facebook & Twitter url inputs first need to be changed so only a valid url can be saved.  Then it will be made (in footer.php) so that if they are blank their button won't appear. 
Okay so here's the favicon options code:
function b4b_add_favicon(){
$b4b_options = get_option('b4b_theme_display_options');
$b4b_favicon = $b4b_options['favicon_image'];
?>
<link rel="icon" type="image/png" href="<?php echo esc_url($b4b_favicon); ?>">
<?php
}
add_action('wp_head', 'b4b_add_favicon');

That's it for today.  More will come tomorrow.

No comments:

Post a Comment