Monday, July 29, 2013

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.

No comments:

Post a Comment