Site logo

Archived topic

*Urgent* Create Comments At Bottom Of Inside Article On Blog Page

20 replies · Started by Sam on August 21, 2018

Viewing posts 1–15 of 21

Hi Tom,

I'm trying to create a comments function in the blog page as so:

https://backlinko.com/blog

I would also love to have that simple line that separates the comments from the rest of the blog post.

The problem is that I don't know the specific function to use.

Please help!

Hi there,

you can activate Comment Count in the Customiser > Layout > Blog

To add a border below the entry summary you can use this CSS:

.entry-summary {
    border-bottom: 1px solid #000;
}

Hi David,

First of all,

Thanks for the quick reply!

Secondly, I got the border sorted.

But I would like the following too (maybe i wasn't clear enough)

1. Edit the Leave a comment text to %Comments
2. Be able to style Number and Text separately 15 (number) Comments (text)
3. If you could teach me how to edit the entry meta to suit the reference site too, that would really be a godsend.

Thank you for the great work!

Hi there,

can you share a link to your site? you can edit the original Topic and use the Site URL for privacy

Hi David, once again, thank you for the quick reply. I am not using a host right now, so can't share.

However, this is a child theme install i'm working with, so do advise based on the assumption that nothing has changed. :)

Thank you!

It will require a PHP function:

add_filter( 'generate_show_comments', '__return_false' );
add_action( 'generate_after_content' , 'db_comment_count');
function db_comment_count() {
  if ( is_home() || is_archive() ) {
	?><span class="comments-count"><?php comments_number( '0', '1', '%' ); ?><span class="comments-title"> Comments </span></span><?php
  }
}

And some CSS:

.comments-count {
	font-size: 32px;
	font-weight: 600;
}
.comments-count .comments-title {
	font-size: 16px;
	vertical-align: middle;
}

Thanks David i'll try it out and report back. :)

Cool :)

Hi David,

I managed to get it fixed with your suggestions - thank you very much!

Another question that requires your expertise, if you don't mind is:

How can I insert some social sharing icons (without use of a plugin) on the right hand side of this comment title?

Please see this example to understand better.

https://drive.google.com/file/d/1AqQmoIXM3x1AXFOxQDGBF1qknERVXkGY/view?usp=sharing

Thank you so much!

I would recommend a lightweight plugin for social shares, something like this which was built for GP:

https://wordpress.org/plugins/gp-social-share-svg/

Then you can echo the short code inside the after the comment count span in the above code like so:

echo do_shortcode( '[gp-social]' );

Then some CSS to float them right:

#gp-social-share {
float: right;
}

Hi David!

I've done the float:right function and it looks currently like this:

https://drive.google.com/file/d/1FSD9a9HlSjzieCS9G-ygfVa2JFLfmmmx/view?usp=sharing

Since my site is on localhost it's hard to share with you the code, but i've copied a bit of the code here so that you can better understand:

<h3 class="comments-title">
3 thoughts on “<span>Blog Sampel #5</span>” </h3>
<ul id="gp-social-share"><li class="gp-social-facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z"></path></svg>

<li class="gp-social-twitter"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z"></path></svg>

<li class="gp-social-linkedin"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z"></path></svg>

<li class="gp-social-google"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.917 16.083c-2.258 0-4.083-1.825-4.083-4.083s1.825-4.083 4.083-4.083c1.103 0 2.024.402 2.735 1.067l-1.107 1.068c-.304-.292-.834-.63-1.628-.63-1.394 0-2.531 1.155-2.531 2.579 0 1.424 1.138 2.579 2.531 2.579 1.616 0 2.224-1.162 2.316-1.762h-2.316v-1.4h3.855c.036.204.064.408.064.677.001 2.332-1.563 3.988-3.919 3.988zm9.917-3.5h-1.75v1.75h-1.167v-1.75h-1.75v-1.166h1.75v-1.75h1.167v1.75h1.75v1.166z"></path></svg>

<li class="gp-social-pinterest"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm0 19c-.721 0-1.418-.109-2.073-.312.286-.465.713-1.227.87-1.835l.437-1.664c.229.436.895.804 1.604.804 2.111 0 3.633-1.941 3.633-4.354 0-2.312-1.888-4.042-4.316-4.042-3.021 0-4.625 2.027-4.625 4.235 0 1.027.547 2.305 1.422 2.712.132.062.203.034.234-.094l.193-.793c.017-.071.009-.132-.049-.202-.288-.35-.521-.995-.521-1.597 0-1.544 1.169-3.038 3.161-3.038 1.72 0 2.924 1.172 2.924 2.848 0 1.894-.957 3.205-2.201 3.205-.687 0-1.201-.568-1.036-1.265.197-.833.58-1.73.58-2.331 0-.537-.288-.986-.886-.986-.702 0-1.268.727-1.268 1.7 0 .621.211 1.04.211 1.04s-.694 2.934-.821 3.479c-.142.605-.086 1.454-.025 2.008-2.603-1.02-4.448-3.553-4.448-6.518 0-3.866 3.135-7 7-7s7 3.134 7 7-3.135 7-7 7z"></path></svg>

<li class="gp-social-whatsapp"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.1.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z"></path></svg>

<li class="gp-social-email"><a href="mailto:?Subject=Blog Sampel #5&Body=
http%3A%2F%2Flocalhost%2F%2F2018%2F08%2F21%2Fblog-sampel-5%2F" target="_top" class="em-share" title="Email this post!"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 .02c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.99 6.98l-6.99 5.666-6.991-5.666h13.981zm.01 10h-14v-8.505l7 5.673 7-5.672v8.504z"></path></svg>

    Thank you so much!

Ok, so you should be able to now Float the Comments title left:

.single .comments-title {
    float: left;
}

Updated code above :)

This archived topic is closed to new replies.