Follow along with the video below to see how to install our site as a web app on your home screen.
Note: This feature may not be available in some browsers.
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> Facebook</a>
<a target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=YourTwitterHandle"> Twitter</a>
<a target="_blank" rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"> Google+</a>
Somewhere I wrote about this but I can't seem to find them. I code my own with the social network's old sharing API's:
Code:<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> Facebook</a> <a target="_blank" rel="nofollow" href="http://twitter.com/intent/tweet?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=YourTwitterHandle"> Twitter</a> <a target="_blank" rel="nofollow" href="https://plus.google.com/share?url=<?php the_permalink(); ?>"> Google+</a>
You can wrap the anchors in <span>'s and design responsive buttons entirely out of CSS, including the logos. This will have zero speed impact versus using the buttons they provide that make a million HTTP requests.
I use this in the footer and sidebar. You can do it above the post content too. If you do it in the sidebar don't forget to reset your loop if you have a loop for related or popular posts after the content.
.social_button {
border: none;
color: #fffff ;
padding: 15px 32px;
text-decoration: none;
font-size: 16px;
margin: 4px 2px ;
cursor: pointer;
}
.fb-button {background-color: #3B5998;}
.tw-button {background-color: #00aced;}
.gp-button{background-color: #dd4b39;}
.pin-button{background-color: #cb2027;}
<a target="_blank" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>"> <button class="social_button fb-button" style="width:49%">Facebook</button></a>
Are you re-minifying and placing these changes in the style.min.css as well?
function example_enqueue_styles() {
wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
}
add_action('wp_enqueue_scripts', 'example_enqueue_styles');
Try a bit more specificity in the CSS like:
button.social_button {}If that doesn't work, feel free to PM me the site or you can do what I would do, which is use the browser's dev tools to see which CSS files are loading first (or if at all) and figure out why the problem is occurring.
Finally got it to work, fml I hate styling. Good idea to throw the buttons into post template right above the footer? Not well-versed about best practices. I can't really see why I wouldn't want to have social buttons at the end of every post. And if I decide I want a post w/o I can just make that one post use another template.
That's how I do it. If you want a post to not have it you can wrap a conditional around the buttons that says:
IF {
Don't show for these Post ID's} ELSE {
Show the buttons}
Versus another template.
By the way, what was the problem with the styling? What made it work?
button.sharebutton{}
.fb-button{}
.tw-button{}
<!-- FONT -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
<!-- FONT -->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700' rel='stylesheet' type='text/css'>
Did you try this?So I'm seeing some issues with this theme - maybe I'm off base here.
1. Theme logo would stretch to max. Even after implementing changes to .logo-strip-text img Width. It still stretched. I got mine to work by setting a style tag on the img property itself in the Header.
2. Images in post are stretched to width of container. If i set it to be 150x150 it will just streatch the image to the width of text box.
3. mixed media error - fixed in above post.
Are the above two errors common for anyone else. I'll continue looking through the CSS till I get it fixed.
.logo-strip-text img{
max-width: 400px;
display: block;
margin: 0 auto;
padding-bottom: 5px;
}
img.smallsize{
width: auto;
height: auto;
padding-bottom: 10px;
padding-top: 10px;
max-width: 150px;
}
Quick noob question here; is there a way to have the style.min.css generated from the changes made in style.css? Or is the easiest thing to do switch the link in the header to pull from the style.css (even though it will be slower, though not dramatically I would assume).
Quick noob question here; is there a way to have the style.min.css generated from the changes made in style.css? Or is the easiest thing to do switch the link in the header to pull from the style.css (even though it will be slower, though not dramatically I would assume).
/*Responsive YouTube Container CSS*/
.responsive-container {
position: relative;
padding-bottom: 50.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 1em;
}
.responsive-container iframe {
position: absolute;
top: 0;
left: 0;
width: 95%;
height: 100%;
}
//Change Video Embed (functions.php)
add_filter('embed_oembed_html', 'wrap_embed_with_div', 10, 3);
function wrap_embed_with_div($html, $url, $attr) {
return "<div class=\"responsive-container\">".$html."</div>";
}
Where did you put the meta_date function? Looking to remove the posted by blah and posted on date's for all the posts/pages?
<p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?>
<p>Posted on <?php the_time( get_option( 'date_format' ) ); ?></p>
Hey @Ryuzaki, can you help me out?
What if I wanted to have the featured image above the headline and in full width of the container?
How would I go around doing it?
<div class="main-wrap">
<div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
<?php the_tags(); ?></p>
<?php if (get_option('buso_show_post_image') == 1) { ?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
<?php } ?>
<p><?php the_content(); ?></p>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
<?php endif; ?>
</div>
<?php wp_link_pages(); ?>
<?php comments_template(); ?>
</div> <!-- main wrap -->
<div class="main-wrap">
<div class="post-wrap" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if (get_option('buso_show_post_image') == 1) { ?>
<?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?>
<?php } ?>
<h1><?php the_title(); ?></h1>
<p>Posted in <?php the_category( ', ' ); ?> on <?php the_time( get_option( 'date_format' ) ); ?><br />
<?php the_tags(); ?></p>
<p><?php the_content(); ?></p>
<?php endwhile; else : ?>
<p><?php _e( 'Sorry, no posts matched your criteria.', 'buso-lightning' ); ?></p>
<?php endif; ?>
</div>
<?php wp_link_pages(); ?>
<?php comments_template(); ?>
</div> <!-- main wrap -->