The News Pro theme by StudioPress includes 6 custom footer widgets which you may want to change to 3.
Here’s what the 6 default widgets look like on the demo:
And here’s what you get after following this tutorial:
Kara-Leah asked this question:
I want to reduce the number of Footer Widgets in News Pro down to three. I tried to modify the CSS, but don’t know enough and it all got out of whack.
There’s 2 simple steps you need to follow:
- Change the PHP code which adds support for 6 footer widgets in your child themes functions.php file to 3 on line 53
- Change the CSS under the Footer Widgets section on line 1537 of your child themes style.css file to the CSS code in the Gist below.
New Code
Note: The CSS for Media Queries needs to be integrated with your existing CSS.
Here’s the entire News Pro style sheet from a fresh download which includes all the CSS:
It works fine. Thanks Brad.
Hi, I followed these instructions exactly, and it still displays the 6 widget areas. What did I do wrong? Does it have something to do with the @media section? If so, what do I add or remove from there? Thanks.
Looks like you figured it out Nicholas
Thanks. Saved me some time. Had to remove a little more from the @media at the bottom of the css file but worked great.
No worries Rob
Hello,
Thank you so much for this footer change. Your tutorial are just amazing.
Have a nice Christmas and a gorgeous 2014!
Regards,
Guga
You’re welcome.
Merry Xmas Guga.
Thanks very much for the tutorial – It took less than 5 minutes to get going and worked perfectly.
This worked out pretty well for me, but the three-col arrangement looks pretty rough on the tablet and cell phone. On the cell phone it looks like the 6 col was retained, almost. On the iPad, just squishy.
How would I apply adjustments there but retain the 3-col look as it turned out on the full-size site? Couldn’t find a happy medium.
Thanks for posting this.
Hello Glenn
You can modify the Media Queries at the end of your child themes style.css file to suit the way you want your footer widgets to look like on different sized screens.
Hey Brad, what perfect timing. I don’t teach my clients a lot about code changes, but always watch you blog for stuff I’m doing for other clients. Was in a meeting yesterday and the client really wanted to use the News Pro theme, had a fairly specific layout in mind, and as I looked at all the SP child themes, I was thinking how could we do what they wanted without having to bring in a dev to do a custom theme.
Well, only one piece they wouldn’t budge on, and I thought, damn, didn’t I see Brad to a tutorial recently that would solve this problem
BAM! Perfect solution for their needs. Cheers my friend, again, perfect timing.
Hi Bob
Really like the new News Pro theme. Demo looks great and i think it will do well.
Also like the 6 column widgets however have been asked on the SP forums how to make them 3 and knew it would come in handy for other people so whipped up a tutorial.
Thanks for stopping by.
Useful one this Brad.
I would be pushed to come up with six items for the footer but I can manage 3… or whatever I change it to.
Got this question on the forum so i think it will be useful yes.
I thought i could just change the widget number from 6 to 3 and remove the CSS but that didn’t work so had to modify the CSS.
Like the new News theme as well and thinking about building a site on it.
How about yourself Keith. What do you think of the new version?
I love it Brad but I’m happy with Sixteen Nine at the moment.
I’m not a great one for jumping from theme to theme.
The tabs on the homepage are pretty good and the typography is nice and big if a tad faint.