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.
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, 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.
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.
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.
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.
How do I change the the background color for the posts and pages?
Go to Appearance > Customize and there you can set all the theme colors.
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 [email protected] 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.
Go to Appearance > Widgets and remove the title of that widget.
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.
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?
Hi @leon,
Thanks for using our theme
It’s part of the Safari functionality and there’s nothing we can do about it, thanks
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/
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.
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?
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 [email protected]Hope that helps
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.
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!
Hi @marc,
Thanks for using our theme
It’s a plugin called WordPress Related Posts or https://wordpress.org/plugins/wordpress-23-related-posts-plugin/
Hope that helps
Thank you Ryan! I appreciate it 🙂
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
Awesome!!!!!!!! If the banner ever screws up I’ll just take it out!!! Cheers Charles. You’re a champion.
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 😛
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).
Great theme! Really love it. But I also can’t find the header.php file, or do I need to use the FTP to edit it?
Hi Thomas, you can edit this under Appearance > Edit, or indeed via FTP.
Infinite scroll plug in doesn’t seem to work. Is there something I’m doing wrong?
Hi Bill, I don’t know, I’ve never used the infinite scroll plugin. Have you asked the plugin author?
They provided me this link:
http://jetpack.me/support/infinite-scroll/
But its too complicated for me..
Got it. So the theme doesn’t support infinite scroll out of the box. If you need professional help with this we can help implement. Just email me at [email protected] for an estimate.
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.
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.
I can’t get the category and archive pages to work. Nothing shows up on the pages.
Thanks Mikael, investigating now.
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.
Hi @denise,
Please contact us at [email protected], we love to discuss your issue in there instead, thanks
Check it out here…only the top link functioning correctly https://www.facebook.com/pages/Viral-Ireland/1424314934480152
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
You can submit or ask ticket in plugin link, also just make sure you’re setting the problem correctly.
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.
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.
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.
OK, I have installed the plugin
Social Share by WP Dev Shed
and it seems to work!
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.
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, there is a full width page template, but the posts pages do have the sidebar.
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;}
.