Continuing yesterdays efforts - day 11

Continuing off of yesterday I figured out how to get the twitter dialog working correctly thanks to this dude: http://gpiot.com/elegant-twitter-share-button-and-dialog-with-jquery/

Here's the working code:

$content .= '<li><a href="#" onclick="window.open(\'https://twitter.com/share?url=' . esc_url('http:\\' . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '&text=Check this out!: ' . esc_url($_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '&\', \'facebook-share-dialog\', \'width=626,height=436\'); return false;">tw</a></li>';

To get it to work I just had to had the &text attribute.

Now for the google plus button.  I ran into the same issue as the twitter button leaving me to believe that I need to find out why I can't use $_SERVER commands or get_permalink for the url.  I revised the entire function so it looks like this now:

function b4b_sharing_enabled($content){

$b4b_options = get_option('b4b_theme_display_options');

$b4b_share_post_enable = $b4b_options['share_post_enable'];

if ($b4b_share_post_enable && is_single() || is_page()){

$url = get_permalink();

$content .= '<nav class="sharethis"><ul>';

$content .= '<li><a href="https://www.facebook.com/sharer/sharer.php?u=' . esc_url($url) . '" onclick="window.open(this.href, \'facebook-share-dialog\', \'resizable=yes,width=626,height=436\'); return false;">facebook</a></li>';

$content .= '<li><a href="https://twitter.com/share?url=' . esc_url($url) . '" onclick="window.open(this.href, \'twitter-share-dialog\', \'resizable=yes,width=626,height=436\'); return false;">twitter</a></li>';

$content .= '<li><a href="https://plus.google.com/share?url=' . esc_url($url) . '" onclick="window.open(this.href, \'googleplus-share-dialog\', \'resizable=yes,width=626,height=436\'); return false;">googleplus</a></li>';

$content .= '</ul></nav>';

return $content;

} else {

return $content;

}

}

add_filter('the_content', 'b4b_sharing_enabled');

I couldn't figure this out on my own so I've asked a question on it here: http://wordpress.stackexchange.com/questions/108241/sharing-buttons-url-doesnt-show-up-in-dialog-box
While waiting for people to answer I'm going to work on the footer settings because I'm going to include the implication of the author bio in the same b4b_sharing_enabled function (except I'll rename it).

This is what I wrote for applying all of the footer options:
function b4b_footer_options(){
$b4b_options = get_option('b4b_theme_display_options');
$b4b_social_icons_enable = $b4b_options['social_icons_enable'];
$b4b_facebook_url = $b4b_options['facebook_url'];
$b4b_twitter_url = $b4b_options['twitter_url'];
$b4b_footer_text = $b4b_options['footer_text'];

if($b4b_social_icons_enable){
?>
<nav class="socialicons">
<ul>
<?php
if($b4b_facebook_url != ''){
echo '<li><a href="' . $b4b_facebook_url . '">facebook</a></li>';
}
if($b4b_twitter_url != ''){
echo '<li><a href="' . $b4b_twitter_url . '">twitter</a></li>';
}
?>
</ul>
</nav>
<?php
}

if($b4b_footer_text != ''){
echo '<p>' . $b4b_footer_text . '</p>';
}
}
add_action('wp_footer', 'b4b_footer_options');
This is what the footer.php looks like now after a few modifications to it: http://pastebin.com/Vb7sFU9f
One issue I've noticed though is that you can enter in non-urls into the facebook and twitter url inputs and the text in footer input is too small.  This means I need to make some adjustments to the validation function and input callback.
I've split up the textarea callback into an input and textarea callback.  Here's what I'm left with after making these changes:
function b4b_input_callback($args){
$options = get_option('b4b_theme_display_options');
if($args[0]=="number_of_posts"){
$html = '<input type="number"';
$html .= ' pattern="\d*"';
} elseif ($args[0]=="facebook_url" || $args[0]=="twitter_url"){
$html = '<input type="url"';
} else {
$html = '<input type="text"';
}
$html .= ' id="' . $args[0] . '" name="b4b_theme_display_options[' . $args[0] . ']" value="' . $options[$args[0]] . '" />';

echo $html;
}

function b4b_textarea_callback($args){
$options = get_option('b4b_theme_display_options');
$html = '<textarea id="' . $args[0] . '" name="b4b_theme_display_options[' . $args[0] . ']" rows="' . $args[1] . '" cols="' . $args[2] . '">' . $options[$args[0]] . '</textarea>';

echo $html;
}
The footer_text field is the only option utilizing the textarea callback.  Upon completing this I've also come to realize that I left all the applied options in the header.php and never took them out to put in the theme-options.php; so I'll make these changes now.  First I changed the header to this:
Then I added the following hook function: http://pastebin.com/cqsmRnrT
function b4b_header_options(){
$b4b_options = get_option('b4b_theme_display_options');
$b4b_header_type = $b4b_options['header_type'];
$b4b_header_image = $b4b_options['header_image'];
$b4b_header_title = $b4b_options['header_title'];
$b4b_header_slogan = $b4b_options['header_slogan'];

if ($b4b_header_type == 'image'){ ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php echo $b4b_header_image; ?>" alt="logo" />
</a>

<?php } elseif($b4b_header_type && $b4b_header_title == '' && $b4b_header_slogan == '') { ?>

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>

<?php } elseif($b4b_header_type && $b4b_header_title != '' && $b4b_header_slogan != '') { ?>

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( $b4b_header_title ); ?>" rel="home"><?php echo esc_attr( $b4b_header_title ); ?></a></h1>
<h2 class="site-description"><?php echo $b4b_header_slogan ?></h2>

<?php }
}
add_action('site-branding', 'b4b_header_options');
Please note: The site-branding hook is the custom hook that I added into the header.php.

After all the changes I've wrote about so far this is what the theme-options.php currently looks like: http://pastebin.com/LvXcsGPr

I still haven't received any help on the sharing buttons problem so I have the rare opportunity to work on something different.  I'm going to browse through the tutorials on wp.tutsplus.com cause I can always find something new on there.  This tutorial series about coding standards seems useful and interesting so I'm going to summarize whatever I get through: http://wp.tutsplus.com/series/the-wordpress-coding-standards/

Well, I got distracted and went out instead.  I'm going to sleep now, so if there isn't any type of assistance tomorrow I'll come back to it.

New plans for coding the options panel - day 10

I've decided that it would be a could idea to keep all (or as much as possible) of the settings usage in the theme-options.php.  Why?  I just like the idea of making it a lot more portable so I can bring it to other themes I work on.  This being said, with the help of the query_posts wp documentation I removed the usage of query_posts from the index.php and used the pre_get_posts hook in the theme-options.php instead:
function b4b_number_of_posts($query){
$b4b_options = get_option('b4b_theme_display_options');
$b4b_number_of_posts = $b4b_options['number_of_posts'];
if($b4b_number_of_posts != '' && $query->is_home() && $query->is_main_query()){
$query->set('posts_per_page', $b4b_number_of_posts);
}
}
add_action('pre_get_posts', 'b4b_number_of_posts');

Now I can go back to the share this buttons.  First I need to find the hook that I can use for the usage function which I'm looking for in here: http://codex.wordpress.org/Plugin_API/Action_Reference
I thought pre_get_commments would be what I was looking for but upon running the following code it only puts "TESTING" before the recent comments widget:
function b4b_sharing_enabled(){
echo '<h1><b>TESTING</b></h1';
}
add_action('pre_get_comments', 'b4b_sharing_enabled');

After reading through this article, http://wp.tutsplus.com/tutorials/the-beginners-guide-to-wordpress-actions-and-filters/, I've realized I need to look for a filter instead in here: http://codex.wordpress.org/Plugin_API/Filter_Reference

So to add something to the end of your content I've found you only have to do this:
function b4b_sharing_enabled($content){
$content .= '<h1><b>TESTING</b></h1>';
return $content;
}
add_filter('the_content', 'b4b_sharing_enabled');

Leaving you with:

I've been working on the social buttons for a couple hours now only to get stuck on the damn twitter button.  Here's the current code:
function b4b_sharing_enabled($content){
$content .= '<nav class="sharethis"><ul>';
$content .= '<li><a href="#" onclick="window.open(\'https://www.facebook.com/sharer/sharer.php?u=' . esc_url('http:\/\/'.$_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]) . '\', \'facebook-share-dialog\', \'width=626,height=436\'); return false;">fb</a></li>';
$content .= '<li><a href="#" onclick="window.open(\'https://twitter.com/share?url=' . esc_url('http:\\' . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '\', \'facebook-share-dialog\', \'width=626,height=436\'); return false;">tw</a></li>';
$content .= '</ul></nav>';
return $content;
}
add_filter('the_content', 'b4b_sharing_enabled');

The popup for the twitter button works but the problem is the url doesn't show up in the tweet like it should.  If I replace $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"] with a simple url like google.com it works.  Why is this the issue?  I guess I'll just have to take a look at it tomorrow.  I'm done today.