Virality

Scrn-responsive-virality
Share this:


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.

107 comments on “Virality
  1. Good afternoon!

    The theme is really intuitive and useful :) Thanks for that! Instead of having widgets in the right side, does it offer a full width page template?

    Cheers!

      • Hi!
        I was also wondering if there was a way to have a wider post page? Like Upworthy, where the post seems extended to the left, leaving space for wide thumbnails on the right side-bar and for 2 or 3 large thumbnails side by side under the post. This makes it possible for the rest of the screen around the post to offer so many “filling the eye” thumbnails wherever you look, keeping people on the page.
        I’m very new to wordpress, and started learning code now. Can I extend the page to the left side myself? How?

        • You need to adjust the width of the containers. By doing this, you can download Simple Custom CSS WordPress plugin and go to Appearance -> Custom CSS then add this code, #container,#inner-header, .inner-nav,.footer-wrap{ max-width: 140.4rem;}.

  2. Hi, great theme! I can’t seem to get the images to show in the right sidebar for recent posts. Also, the FB and Twitter share buttons were not included in the bundle. Can you help?

    Thanks!

    • Hi Jim, when you installed the theme you would have been prompted to install a plugin to power the FB and Twitter share features. Install this and the buttons will appear. The latest posts with images are powered by a custom widget which you must add to the sidebar under Appearance > Widgets. Cheers.

  3. Hello Charles,

    I would like to have the images on the sidebar look like the ones on the blog page. With the same gridbox stype and hover and hyperlink effects.
    Can I do that without creating a childtheme?
    Leon

    • Hi Leon, there is no built in styles for the sidebar posts as you describe, so this would require some template customization. Rgds.

  4. Hi, I am having problems with the Fb Share button..everytime I try to share a post it does not display the image relative to the post. It defaults to a maintenance mode image. The maintenance plugin is deactivated. I have run the url’s through the Fb debugger tool and I am still getting the same results. The debugger tool says the image is too small needs to be over 200px x 200px but these images are well above that. Is it because its on thumbnail in the code of the Fb Share plugin?

    • Hi Denise, are you using the version from WordPress.org or the pre-release version downloaded from our site? I ask because one of the earlier versions didn’t handle the OGP data very well. If you are using any old version I recommend deleting it and installing fresh from http://wordpress.org/themes/virality. You may also need to delint your URLs in the Facebook debugger as they tend to cache old versions of OGP meta data. Running your URLs through this tool once the new version is installed should help. To be clear the social share plugin does add the OGP data to posts, and uses the featured image, but it’s possible you are running other plugins which also add this data so it’s possible there is a clash there.

  5. Hi Charles, No I downloaded the pre release version from your site.. so what i did was uninstalled the plugin and re-installed it, changed url’s..they are sharing now but a lot of them without the relevant image, it’s picking up images from other stories

    • Hi Denise, I suggest you delete the pre-release version of the theme altogether (not just the plugin) and install from WordPress. If you delete the theme via the admin and then add in the theme again from the WordPress repository it will keep your settings. As mentioned you may still need to run your post URLs through the Facebook debugger.

  6. Just found another fault with the social share, when you do share to facebook and try and click the link in the facebook page it doesn’t link out to anything, instead the link just turns white within the facebook page. Very bad plugin

    • Hi Mikael, we’ve submitted a fix for this which has already been approved. Should be available very soon. This was a silly mistake we made and wasn’t caught by the theme review team. Sorry about that.

  7. Hi – just installed this theme. My site name is too long and it wraps, cutting off a letter in the process, making the title not read correctly. Is there a work-a-round to give a more flexible width logo area? I ended up uploading an image for my logo but I never like the outcome – the images tend to get a fuzz to them. I would love the option of a full header area to I could have a large font title with a tag line underneath. Is that possible? If not, is there a way to change the font size of the title so my blog title fits with out cutting off and wrapping?

    • Hi Debbie, the header template is designed to provide room for the a full 728×90 mast head banner. The fuzziness on the logo is a resizing and resolution issue, so it is a matter of getting the image sized right before upload.

  8. Hello Charles !
    I find the theme really cool and easy to read, with all kind of nice customizable things. Thanks a lot.
    I only have an issue with the share buttons provided by the social share bundle : I find them really big, and I don’t find it useful to display the buttons at the beginning AND the end of every post. Is there a way to fix that ?
    Of course, I’d prefer not to have to play too much with the coding…

    • Hi Michael, the plugin doesn’t have any configuration options so the only way to change things is to get your hands dirty in the code. The easier option may be to disable the plugin and find another that suits your needs. There are many out there. Cheers.

  9. Hey Charles..

    I love this theme dude. I’m wondering how I can use the right 3/4 of the header.. I’ve got the logo no the left but can’t find how people are using the right side?

    Cheers for everything :)

    • Hi Boue, we’ve commented the header.php template file so you can see where to put the banner code for the header. You should definitely set up your theme as a child first so that future updates do not overwrite the local customization.

      • I just looked it up!!! If I keep it as is what’s the worst that could happen by just doing updates as they come out? That is a tad advanced for me to do :P

        • If you don’t set your theme up as a child then the banner code will be overwritten when we issue an update (assuming you upgrade your install), so yeah, not that big a deal I guess as long as you are happy to put your banner back in after each update (and they will not be that often).

  10. Hi Charles! Love the theme, just uploaded it to a new wordpress install, all works great, I installed your share plugin also, but when I share a post on Facebook, the description box does not display the post text it displays this:

    You may use these HTML tags and attributes:

    It does display the title and image correctly, just not the post text. Tried to find a fix online but they all didn’t work. I have no other plugins installed, brandnew wordpress install with just this theme and share plugin. Thanks for your help! Best, Marc

  11. Hi Charles, ok, I added the plugin Facebook Open Graph by Enrique Acevedo and it now works fine. But maybe you can still look into why that happened, more people may have the same issue. Since the sharing part is the biggest purpose of this theme right?

    One more question, how do you add the “More stokes…” below the post? How can you show more post by tags or category below the post, just as on the demo site?

    Thanks!

  12. Great theme but I wanted to know how can I place advertisement next to the logo like how you have it in the demo? and how I can I get to ad to show in mobile version if its viewed from a phone?

    • Hi Greg, we’ve commented the header.php template so you can see where to put the banner code. You could try using Google’s responsive ad unit which will adjust the banner to the screen size.

      • Thanks Charles. Also, how come when I use the social share button to share something on facebook. It doesn’t show the feature image I used for the post. It shows another image from another post?

        • Hi Greg, That’s probably because you don’t have any open graph meta data on your site. We purposefully didn’t implement OGP with the plugin because there are already other plugins which do a great job of this. I recommend using WordPress SEO.

          • Thanks, Also do you know how I can hide a certain ad from showing up on the desktop view but still let it show when I view it on mobile?

          • Hi Greg, you could achieve this with some media queries and CSS, but that goes beyond the free support I can provide here. You might find a banner management plugin which could achieve this though I’m not aware of any specifically.

  13. Hi, great theme!! Many thanks!

    I am trying to use it with Arabic (RTL) WP installation.
    All works fine (had to switch the site-heading to float:”right”) except of the order of the cards. They are still lined up LTR. So you see the last post on the top left corner.

    What would be the right CSS element to set to “float:right” to get the cards listed RTL?

    Many thanks again!!

    • Hi @mike,

      Thanks for using our theme

      You can float the items right in css:

      .masonry .item {
      float: right;
      }

      Then change the option isOriginLeft: false in your Javascript, if that sounds techie for you, you can email us at help@wpdevshed.com

      Hope that helps

  14. Hi man, Love your theme! whens the next update? I do have a question about the side bar.. why doesn’t it load completely? not all the widgets show up on the right side bar.. on mobile it works, but on desktop it usually cuts off the widgets.. its really strange.. do you know why its doing that? it seems to be a flaw in the theme.

    • Hi Bill, can you be more specific? I’m not sure what you mean by “not all the widgets show up in the siderbar..on mobile it works, but on desktop it usually cuts off the widgets”. Can you post a screenshot?

  15. There is no sidebar on the homepage for “popular posts” or anything like that…. is there a way to put a sidebar on the homepage? and is there a way to change the format of the recent posts on the homepage?

    • Hi Jez, anything is possible of course, but both those things will require customization of the template and/or CSS. The home page in this case was designed with no sidebar, just the masonry layout of latest posts in the style you see on the demo. You can change the entire color scheme though under Appearance > Customize.

  16. Hey Charles, so I’m using the same facebook and twitter buttons you have on your demo and I’ve installed the wordpress seo by yoast and have the open tags enabled but when I share a post on fb its showing the wrong featured image. Do you know what would be the problem?

    • Hi Greg, did you try sharing the same pages before you set up WordPress SEO and/or set the featured image for your post? FB caches the information for each page so if you’ve subsequently changed it then the old meta data may be cached. You can force FB to refresh their cache by running your URLs through the debugger: https://developers.facebook.com/tools/debug/

  17. Hi Charles,

    Some pages/posts trigger the IOS Reader Icon in the URL bar, others do not.
    If someone enables the Reader Modus the logo, the main menu and the form disapear.

    How can I disable the triggering of the Reader on all or on a specific post/page?

    Can you point me into the direction on how to edit the content and css of the reader layout?

  18. I’m using your theme for a quote website and I wanted to know is it possible to show facebook share and twitter buttons below the post on the front page? So instead of clicking on the post to share, they can just share it from viewing from the home page.

    • Hi Janet, that’s posisble but would require template and CSS customizatyion beyond what we can get into here. If you need professional help you can reach us at help@wpdevshed.com and we can work out an estimate.

      • Thanks I’ll do that later then. One last thing, how can I remove the title for the side bar widget recent posts with thumbnail? I just want it to show the thumbnail.

          • Sorry I meant I want to know how to remove the title of each of the recent posts? So it just shows the post thumbnail on the side bar.

          • Oh I see. That will require some customization of the widget code which goes a bit beyond the level of support I can provide here in the comments. The easiest solution might be to look for another recent posts widget plugin which provides more customization options. I can’t recommend one specifically, but I’d be surprised if there wasn’t one out there that would let you do what you need without any coding required.

  19. Totally new at this — I can’t seem to get the posts to look like the theme, with the photo & text within a box, and 3 columns per page. It’s showing up one post per page w/o the box or grid. I have no idea what I’m doing wrong.

    • Hi Sue, the grid layout is the default blog home page layout. Looks like you have set a static page as your home page.

  20. I use the header menu.

    In mobile the display of the navigation-menu is different. The default is suppressed and a pulldown menu is used by the theme instead.

    I would like to see the custom header menu bar on mobile as well or even preferable a (third) custom menu vor mobile header.

    • Hi Leon, the theme is responsive, so on mobile devices it purposefully collapses into the drop down style. Typically on mobile there is no room for a full nav bar to display. You can alter the responsive styles, but that would required making customizations to the styles.

  21. Thanks for your reply,
    But sometimes the Safari reader is triggered and visitors get stuck in there.

    So a small custom nav in the navigation bar might hopefully prevent that.
    How is it possible to prevent collapsing in the styles?

    • Hi Leon, what do you mean “sometimes the Safari reader is triggered”? To remove the responsive styles you need to edit style.css and remove all the styles set for smaller screen sizes. If you need professional help with this you could try Elto.

  22. Hi, I put a site live using Virality a few weeks ago for a client. it’s on a sub-domain on his main hosting and is at http://blogs.chrisfryconsulting.co.uk

    All has been fine until today, when I wanted to schedule some social media updates for him, pointing people to the site, and I notice the site is down. I get this message “Parse error: syntax error, unexpected ‘}’ in /home/chrisfry/public_html/blogs/wp-content/themes/virality/functions.php on line 183″ and I can’t even log-in to the WordPress dashboard, I just see this message.

    What do you suggest please? Thanks, Neil

    • Hi Neil, If you have customized any of the theme functions I suggest you rollback to the previous version. If you have not customized anything I can only suggest reinstalling the theme via FTP. This will only replace the theme files and any settings you had should still apply. If you have literally changed nothing else and this suddenly happened it isn’t a good sign. I would also be careful to ensure that the site hasn’t been compromised in anyway.

  23. ugh…. This thing is so friggin’ simple I’m perplexed!!! I went looking over on “The Forest” and found a few for a couple of bucks, but…. damn! This thing is too simple not to at least attempt!

    Ever thought about a way for users to upload (w/ moderation or flags) items themselves? That way the posting burden isn’t laid strictly on the site owner?

    • Hi Brad, I’ve never tried anything like this before, but I agree there has to be a fairly simple way. If you enable user registration you can send people to …/wp-signup.php and let them create an account. You can also set the default permission level to contributor and allow them to post that way? Or you could use something like GravityForms (which is a premium plugin) to build a submission form to allow people to post into moderation queue.

    • Hi Miguel,

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

      Rgds

      Charles

  24. 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?

    • 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.

    • 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: https://www.youtube.com/watch?v=3zSUIm1KrPs

  25. 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 :)

    • 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

    • 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.

  26. 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?

  27. 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 ?

    Thanks.

    • 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.

    • 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.

  28. 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 …

  29. 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,
    Vali.

  30. 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!

    • 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.

  31. Hi!
    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?

      • 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: https://drive.google.com/file/d/0BwA1IuXMUSGIcGZkSDlqMjNfMnM/view?usp=sharing

        Thank you for being there.

        • 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>