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.
Hello,
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.
Thanks!
Hi Ji, in answer to your questions:
Hope that helps.
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?
https://drive.google.com/file/d/0BwA1IuXMUSGIdVhCQm5KS19rb0U/view?usp=sharing
You can just make it
margin-left:0;
on your child theme.Kris, thank you. I will reachout to the links you mentioned.
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.
Thanks.
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.
Hi,
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.
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.
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.
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%;}
Thanks for providing this wonderful theme.
I’ll use it for my next blog. 🙂
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?
Hello,
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
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.
Thanks for all the support! I love the great job you fellows did with this theme!
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!
what comment plugins did you use?
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.
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
HI, I’d give this plugin a go: https://wordpress.org/plugins/schema-creator/ – I havn’t used it myself, but it pretty well rated and seems to be well featured.
Google webmaster tools is reporting missing structured data fields “Author” and “Updated”. There is more info here;
https://wordpress.org/support/topic/google-structured-data-missing-required-field-authorship-thumbnails-gone
How can I fix this problem when using the Virality theme?
Hi, the theme doesn’t support all structured data. You can try looking for a plugin which will allow you to handle this.
Just a suggestion … If you can customize your plugin like this :
http://sfglobe.com/?id=14265&src=share_fb_new_14265
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.
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.
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.
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 …
Thanks for the feedback Dave.
After upgraded the plugin – Social Share by WP Dev Shed to the latest one, the social button disappear.
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.
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.
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.
Yes you can, Download Simple Custom CSS wordpress plugin and place the css code inside..
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?
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.
Thanks Charles, looking forward to it! Great plugin already btw.
a couple of questions: when using the social share function how come it prepends the blog name ? : http://cl.ly/image/3F202e1f1B3P ( 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: http://cl.ly/image/3N2Y0e082F2V
otherwise – great theme 🙂
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.
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,
Then add this code
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
Hi Roger, how do I change the font style of the homepage title posts?
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
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
I installed the Video Thumbnails plugin but the image does not appear to share to facebook ..
http://s27.postimg.org/opflxtq43/Captura_de_ecr_2014_07_14_s_19_41_38.png
http://s27.postimg.org/9s74wtcvn/Captura_de_ecr_2014_07_14_s_19_42_17.png
Can someone help me?
Kind Regards
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