[Support request] *Urgent* Create Comments At Bottom Of Inside Article On Blog Page

[Sam]

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!

[David]

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;
}

[Sam]

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!

[David]

Hi there,

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

[Sam]

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!

[David]

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;
}

[Sam]

Thanks David i’ll try it out and report back. 🙂

[David]

Cool 🙂

[Sam]

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!

[David]

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;
}

[Sam]

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&#8221; 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&#8221; 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&#8221; 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&#8221; 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&#8221; 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&#8221; 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&#8221; 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!

[David]

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

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

[Sam]

Thanks David,

but the code that you gave me I think is abit incorrect.

Now the icons remain on the right:

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

But on the archive page, the Comments number has shifted right too.

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

Any idea how to fix this?

Thanks!

[David]

Updated code above 🙂

[Sam]

Hi David,

Almost there now.

It looks like this now:

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

1. Need to know how to wrap the border around it from the “Thoughts on” text, like the reference site above.

2. Also, the Gravatar from the comments is shifting up – don’t want it to do that?

Thank you!

[Author]

Posts