Scrn responsive virality

Have you ever noticed how super popular sites like Upworthy and Viralnova really strip down the navigation options and focus reader’s attention just on the content and the social sharing features?

Virality is a straight up blogging theme inspired by sites like these, offering plenty of customization options and features to make it easy to build your own site in this style:

  • Customize the entire color scheme with no coding required
  • Ability to enable/disable the main nav bar
  • Ability to enabled/disable post meta data and the author bio
  • Bundled Facebook and Twitter share button plugin
  • Upload your own logo and/or background image via the customize menu

When you install and activate the theme you will be prompted to install the Social Share plugin which powers the Facebook and Twitter buttons. Install and activate this for buttons just like the demo.

If you are just starting out online please read our beginners guide to creating a blog.

For theme support please visit the help desk.

121 thoughts on “Virality

  1. Ji says:


    Thank you for the great theme. I have two questions

    1) How do I include my featured image in my post page? It does not show up.

    2)How do I make the images in my post page retain the same size they have as when I upload them? They are being auto-scaled to a smaller size.


    1. charles Charles says:

      Hi Ji, in answer to your questions:

      1. The template doesn’t automatically include the featured image. We do this on purpose so that publishers have more flexibility over how the content on posts is displayed. The featured image is used for the grid on the home page, but you do need to add images to posts manually.
      2. When you insert an image you have a choice of what size is inserted. I suspect that yours are defaulting to a smaller size so you’ll need to manually change that when you insert an image. Keep in mind that if you upload an image that is wider than the content column of a post or page it will reduce the size of the image to fit.

      Hope that helps.

  2. rodrigo says:

    The “required” mark in the comment box in my site is over the word “marked”. And as I report this here, I’m noticing it is also in your “Leave a Reply” box. I don’t understand what is overriding the css of the “required” with “margin-left: -1.4rem”. Is it there or is it my browsers rendering it differently?

    Here’s a screenshot of my site. I guess I’ll just change -1.4rem to 1.4rem in the child-theme, for now?

    1. Kris says:

      You can just make it margin-left:0; on your child theme.

  3. Gunasekhar says:

    Kris, thank you. I will reachout to the links you mentioned.

  4. Gunasekhar says:

    Hi Charles,
    I made the sidebar disappear on smaller screens with @media css changes. Yes I did a littlebit of modification to the theme. Is it possible to make the sidebar sticky? I mean based on it’s height it should scroll till it reaches the footer and then stay there while the content part scrolls. That change will make it very very helpful indeed.


    1. Kris says:

      Hello, you can achieve this with some jQuery and CSS but thatโ€™s a level of customization beyond what we can get into here in the comments. If you need professional help with this we recommend Elto or Codeable.

  5. Gunasekhar says:


    I really love this theme and thank you for sharing this freely. I would like to ask you, how to reduce the height of header and footer in this theme without altering the responsiveness of the theme? Also How to make the side bar responsive, to make it wider when viewed on mobile devices as it goes below the post content?

    Thank You.

    1. charles Charles says:

      Hi Gunasekhar, the sidebar is responsive and should scale to fit your mobile screen. I notice that you have customized the theme already, and I think that may be the cause for the sidebar scaling issue.

  6. rodrigo says:

    Hi! I’m trying to customize the footer without removing the “powered by wordpress and wp dev shed” and the link to the home page (footer-menu). So I created a row with 3 divs in it, right before the footer-wfix, but I wasn’t able to display them inline so that the footer-menu + the site-generator could show right below without extending the footer way down.
    Here is what I’m trying to add in my child-theme:

    *\\ code added to footer.php from here…\\*

    *\\will add mailchimp subscription here\\*

    *\\end of added code\\*

    And the added CSS:
    footer[role=contentinfo] .col-1{
    display: inline;
    float: left;
    footer[role=contentinfo] .col-2{
    display: inline;
    float: left;

    Still on my localhost, for now, so no link I can provide yet. Hope you can give me a clue of what I need to focus to be able to do this on my own and keep the site-generator below it.

    1. Kris says:

      You need to specify the width for the .col-1 and .col-2. For example, footer[role=contentinfo] .col-1,footer[role=contentinfo] .col-2{width:50%;}

  7. Ivonia says:

    Thanks for providing this wonderful theme.
    I’ll use it for my next blog. ๐Ÿ™‚

  8. rodrigo says:

    First of all, I simply love the theme! thank you : )

    I would like to make the post page wider, so that it could fit 3 big thumbnails under each post and also leave more space for the sidebar thumbnails to be wider. Kind of like Upworthy’s.
    Can you guide me to which parameter(s) I need to change so it affects the other components the least possible?

    I guess I need to create a child-theme for this also, so I’ve put y butt to learn CSS already. Please some guidance so I don’t mess up?

    1. Kris says:


      You can adjust the size of the container. Try this, #container,#inner-header, .inner-nav,.footer-wrap{max-width: 140.4rem;}
      For creating child theme, you can follow this tutorial, How to Create a Child Theme in WordPress

      1. rodrigo says:

        It worked great Kris! Thank you so much! : ) I’m loving the learning process here also; thanks for that push ; )

        I have 2 more questions that you may be able to help with:

        1) Trying to increase the thumbnails of the ‘recent posts extended’ widget on the sidebar, I am limited by a margin that I don’t know where to change. I would like the thumbnails to be as wide as the sidebar. Can you point me to it?

        2) I used a plugin Collapse-O-Matic to collapse and expand text. The post content area increases and leaves a lot of empty space at the bottom when the text is collapsed; I guess not responding along with the plugin. Any ideas why and how to fix it?
        IN case it helps, here’s a screenshot:

        Thank you for being there.

        1. Kris says:

          For question number 1, to be able to do this, you need to remove the padding of the sidebar. .widget{padding:0;}
          For question number 2, I think the plugin you used is conflicting with other jQuery effects that the theme is using.

          1. rodrigo says:

            Thanks for all the support! I love the great job you fellows did with this theme!

  9. Jenny says:

    Hi. I’ve activated / deactivated different comment plugins but each is blocked by Virality. When I activate other themes, the plugins work fine. What is the solution to unblock? Thanks!

    1. Kris says:

      what comment plugins did you use?

    2. charles Charles says:

      Hi Jenny, the theme doesn’t block comments in any way. Are you sure you havn’t disabled comments under Settings > Discussion? If they are enabled there, then you should also check that they are not disabled at the post level. And note that if you have previously had all comments disabled globally, and then subsequently enabled them, all older posts will still have the disabled setting at the post level as changes to global settings will only have an impact on new posts going forward and doesn’t change the setting for existing posts.

  10. Nsrobertson says:

    Thanks Charles. Any suggestions for a suitable plugin? Or a pointer to which file(s) In the virality theme would need to be edited? There are lots of posts which explain how to fix this by editing the single.php file but I don’t think this applies for virality. Many thanks, Scott

    1. charles Charles says:

      HI, I’d give this plugin a go: – I havn’t used it myself, but it pretty well rated and seems to be well featured.

  11. Google webmaster tools is reporting missing structured data fields “Author” and “Updated”. There is more info here;
    How can I fix this problem when using the Virality theme?

    1. charles Charles says:

      Hi, the theme doesn’t support all structured data. You can try looking for a plugin which will allow you to handle this.

  12. Dave says:

    Just a suggestion … If you can customize your plugin like this :

    It will be better. Maybe paid version of your plugin.

    After the end of the video, there’s a pop up asking the visitor to share and like the site.

  13. Vali says:

    Hi there,

    I like this theme and i’m goin’ to use it on my website.

    Can you tell me (i’m 0 on css areas) how can I do only 2 columns on index, instead of 3 – and bigger.
    I also want a fixed image thumb.

    Thanks in advance,

    1. charles Charles says:

      Hi Vali, that’s a level of customization beyond what we can get into here in the comments. If you need professional help with this I recommend Elto or Codeable.

  14. Dave says:

    Hi Charles, it works now. BTW, by default, it has “before content” option checked. It still didn’t show up. After I checked after content, both showing up.

    Thanks …

    1. charles Charles says:

      Thanks for the feedback Dave.

  15. Dave says:

    After upgraded the plugin – Social Share by WP Dev Shed to the latest one, the social button disappear.

    1. charles Charles says:

      Hi Dave, go to Appearance > Customize and you will find the settings where you can now chose whether the buttons show at the top, bottom or both.

  16. Dave says:

    I love the theme… the only issue I have is the name of my website being “chopped off” due to the length and I can’t upload my website banner / header next to the name.

    Any idea whether I can put a banner next to the site name ?


    1. charles Charles says:

      Hi Dave, we’ve added a div in the header.php template into which you can drop your banner code. Look for div id=”banner-header” and you’ll see the comments on where to put your code.

  17. Ivelin says:

    Can I edit the theme width? I’d like to make it wider so that I can post bigger size videos. Thanks. Great theme btw.

    1. Kris says:

      Yes you can, Download Simple Custom CSS wordpress plugin and place the css code inside..

  18. Horst says:

    Hi Charles, Is there any way to reduce the social share buttons to only one appearance through customization of the plugin?
    Ie to only display social sharing options before, OR after the content?

    1. charles Charles says:

      Hi Horst, we’re looking at an update which will provide a setting to control if the buttons appear at the top, bottom or both.

      1. Horst says:

        Thanks Charles, looking forward to it! Great plugin already btw.

  19. tri says:

    a couple of questions: when using the social share function how come it prepends the blog name ? : ( blog name pipe blog title ). How can i remove the blog name and pipe? also, how can i make the thumbnail full width on facebook instead of just taking the left side like this:

    otherwise – great theme ๐Ÿ™‚

    1. charles Charles says:

      Tri, neither of these things are controlled by the plugin. The blog name is coming from the meta title of the page you are sharing. You can control the meta titles using something like the WordPress SEO plugin. Indeed this plugin will let you control Open Graph meta data which is even better for Facebook. I believe Facebook automatically decides whether to make the image full width in the news feed based on the size of the featured image. Use a larger format image and it should go full width.

  20. RemoteFix says:

    Is there a way to add the jetpack subscribe in the center of the screen right below the post. So far I haven’t been able to find a way to do the above. I only see the option of adding the subscribe to the sidebar. Please help ๐Ÿ™‚

    1. Kris says:

      To make this dynamic, you can create a widget area for the jetpack subscribe. By doing this, add this code in functions.php,

      register_sidebar( array(
          'name' => 'JetPack',
          'id' => 'jetpack-in-post',
          'before_widget' => '<div id="jetpack">',
          'after_widget' => '</div>',
          'before_title' => '<h3>',
          'after_title' => '</h3>'
      ) );

      Then add this code

      <?php dynamic_sidebar( 'jetpack-in-post' ); ?>

      on a theme file where you want the jetpack to appear. If you want to add the jetpack subscription form below the post, then locate single.php.

      For more info in creating dynamic sidebar, follow this link Function Reference/register sidebar

  21. Stephanie says:

    Hi Roger, how do I change the font style of the homepage title posts?

    1. charles Charles says:

      Hi Stephanie, this will require you getting into the style sheet, which you should only do after setting up the theme as a child theme first to avoid losing any local changes with subsequent theme updates. We made a video a little while back which will help you quickly identify those parts of the style sheet you will need to edit to make such changes:

  22. Roger says:

    Great theme!
    Is there a way to reverse the order of the images on the home page? i.e. I’d like them to be oldest post FIRST (orderby date, order ASC)
    Is this possible?

    1. Kris says:

      Hello Roger,

      Go to virality theme folder, locate and open index.php then look for the code while ( have_posts() ) : the_post();. Before that code, add this $args= array('order' => 'ASC','paged' => $paged); query_posts($args); . Be sure this code is inside php tag.

  23. Miguel says:


    I installed the Video Thumbnails plugin but the image does not appear to share to facebook ..

    Can someone help me?

    Kind Regards

    1. charles Charles says:

      Hi Miguel,

      Go to Settings > Video Thumbnails and make sure that the option to “Automatically Set Featured Image” is selected. That should work.



Comments are closed.