Design, Programming

Add Disqus comments to WordPress and edit CSS

For those of you who have struggled using the Disqus WP Plugin, this guide is for you. I tried using the plugin, but no matter which stylesheets I edited, I couldn't edit the Disqus CSS since the stylesheets are located within an iframe tag. Anyways here's what I did to fix that annoying box/margin error.

Using this guide, I added this JavaScript code to the end of my functions.php file.

function disqus_embed($disqus_shortname) {
    global $post;
    echo '<div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname = "'.$disqus_shortname.'";
        var disqus_title = "'.$post->post_title.'";
        var disqus_url = "'.get_permalink($post->ID).'";
        var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";

Next, I replaced comments_template(); in my single.php and page.php files with this code:

echo '<div class="disqus-div">';
echo '</div>';

Replace YY with your Disqus short name (typically Finally, I added this CSS to my custom.css file. Replace XX with the margins of your liking.

.disqus-div {
  margin-top: XXpx;
  margin-right: XXpx;
  margin-left: XXpx;

You can also add any other CSS you want to this class. Cheers, hope this helps someone.