The News Pro Child Theme is shown as the perfect theme for a news or magazine style site, with the homepage focusing on content. But with a totally widgetized homepage, the choices you have for pulling in and displaying content is very flexible and this could easily work for any topical blog or even a business website. This tutorial will help you understand more about this theme—what it can do and not do— and help you confidently use it without any unexpected surprises.
In this tutorial you will learn about all the features this theme has to offer and what you can and cannot do easily that is usually hard to do by just looking at the demo. I will help you set up the homepage and your site to look just like the demo but also share with you other options you have with this theme to customize it for a different look (without knowing code), by using its built-in features, some widgets and a few specific plugins
Here is a step by step guide to set up the News Pro theme homepage as seen in the demo. If you want to see the flexibility of this theme, and what other customizations you may be able to do without knowing code, make sure and watch this video.
Note: if you are updated to the latest version of WordPress, you will find that uploading your custom header and background is now located in the theme customizer. This video does not reflect that change, but the text and screenshot highlight below do.
The top widget area will be using the plugin Genesis Tabs. This tutorial will show you how to set up this plugin for this theme.
If you want to have the social media icons in the footer as shown in the demo, you can use Simple Social Icons.
Now the Genesis Theme Settings
In your dashboard, go to Genesis > Theme Settings. Just follow these screenshots:
Note: any changes you make to the theme settings, always remember to click SAVE.
Here you can choose the color styles for this theme. As you will note, the colors only affect certain parts of the site. If you want to get further into customizing the theme’s colors, you will need to know and understand CSS.
This theme gives you six layout options. 1. Content left, primary sidebar right. 2. Content right, primary sidebar left. 3. Content left, primary and secondary sidebar right. 4. Content right, primary and secondary sidebar left. 5. Content middle, secondary sidebar left, primary sidebar right. 6. Full page content, no sidebars.
The global default layout of your theme for the homepage and inside pages is the one selected below. Simply click that thumbnail and save to set it. But keep in mind, you don’t have to use that layout for every page. In fact, you will find these same options below each single post and page. So for example, if you want no sidebars on a selected page, you can choose full layout.
This setting controls how your actual blog page will look. As in the demo, they show full posts. But I recommend these settings to show limited content there. I explain about this more in the video.
Adding Your Logo to the Header
You may choose to just use the Site Name and Tagline instead of a logo.
WordPress version 4.1
If you are using version 4.1 (or more in the future) you will now find that adding the custom header to this theme is located in your theme customizer. Simply upload the image here. You will also see that color scheme, breadcrumbs and other settings are here as well as under the Genesis settings.
WordPress version 4.0 and older
If you rather have a logo, this theme allows you a smaller one in the upper left corner. You will first need to size your logo to 260 x 90 pixels, otherwise it will be cropped after you upload it. Now go Appearance > Header menu. You will have the option to either Choose File from your computer, or use an existing image you added to your media library previously.
The Background Image or Color
WordPress version 4.1
If you are using version 4.1 (or more in the future) you will now find that adding the custom background and the background color to this theme is located in your theme customizer.
WordPress version 4.0 and older
You can either use an image or a color for the background behind the this themes content. Also, as noted in the screen shot, under “Repeat” we have used this for a smaller image that was uploaded. Depending on your image size and the image itself, you may want to play around with this setting and the image uploaded to get exactly what you want. In any case, the image does not have to be a specific size as the theme is responsive and it will crop, shrink and grow the image as needed. So test!
To add your background image to Appearance > Background.
This theme has a primary and secondary navigation menus. The primary menu appears below the header and the secondary menu above the header.
As of Genesis 2.1, the Primary Navigation Extras options have been removed for new installs. (upgrades of current installs to 2.1 will not lose the Primary Navigation Extras settings). If you are running a new install and want to add a the date or a search form to a navigation menu, you can find this post to add the necessary code.
This theme may come with options to show some extra goodies in the right side of the primary navigation bar. If you choose Today’s date or the search form, it will automatically appear.
If you choose the Twitter link you will need to fill in the info that appears.
And if you choose the RSS feed links, you will need to scroll to the top part of Genesis > Theme Settings and put in your feeds address.
Setting Your Homepage Up
A lot of Genesis themes have a homepage that is controlled completely by widgets. This screenshot shows you what widget controls what area. Also, keep in mind, if you do not put a widget area in most of these, that area just does not show.
Setting Up The Homepage
As I mentioned before, with a lot of Genesis child themes, the homepage is a collection of widgets pulling in specific content. It’s not an actual page as might think. The following is a description of how to set it up like the demo. But remember these three things that allow you some flexibility on the homepage, as I have shown you in the video:
1. You don’t have to set it up using the widgets suggested in the demo. For example, you could put a video in the Home Top widget or two images in the Home Middle Left and Home Middle Right. Think of this page as several boxes that give you options to use whatever widget you want.
2. If you have widget areas next to each other, eg. Home Middle Left and Home Middle Right, if you use the left one, you must use the right one, or it will be blank. Same goes for the Footer 1-6 widget areas.
3. If you choose not to put any widgets in an area, like Home Bottom, this area will be hidden until you actually put a widget in it.
4. Most of the widgets used to pull in featured posts, featured pages, etc require that you set a featured image in your post or page.
5. When using the Featured Posts widget, for demonstration only I have chosen some categories from one of my site. You, of course, will choose your own categories to use.
As shown in the demo there is an ad space. To do this use the Image Widget, drag it into your Header Right widget, and upload and link your 728 x 90 pixel ad and add the link. Totally optional, other widgets like the Simple Social Icons works well there or just leave it blank.
To get the tabbed feature in the Home Top, install the plugin/widget Genesis Tabs, activate and add the Featured Tabs to Home Top widget area. Choose the categories you want to highlight and fill in the rest.
Home Middle Left
To set this up like the demo, add the featured post widget to the Home Middle Left widget. Of course you have several options on how you want this to look with just this widget alone, but again, for the purpose of the demo these are the settings.
Home Middle Right
To set this up like the demo, add the featured post widget to the Home Middle Right widget. As you will notice this is the exact same widget as Home Middle Left, but with the settings a bit different.
Again, to set this up like the demo, add the featured post widget to the Home Bottom widget. And we are using the same widget, different settings.
Primary and Secondary Sidebar
These will show up depending if you are using one or both. Since every site need is different, you will ad the widgets you feel are good for your site and for your readers.
The demo shows mostly menus that have been set up using categories. These foot widget areas are totally optional and you will want to make sure that if you use them, you are putting content in that adds to the functionality of your site. Not just to fill them. Since there are 6, if you don’t use one or more, those spaces will be blank.
This is again totally optional. What it does is allow to to add something after every post. This is global, so just remember it will be after each and every post. Examples of this might be blog subscription sign, an affiliate ad or a newsletter signup.
Theme Customizations without Code
For those times when you might be looking for specific customizations, but you don’t know code, a plugin might just do the trick. Here are some of them that I currently have tutorials on and are specially made for Genesis.
Genesis Simple Sidebars – If you want to have custom content in your primary and/or secondary sidebars on specific posts and pages, this plugin allows you to easily do this, as well as by category.
Genesis Simple Edits – An easy way to edit your blog post info and meta, such as author name, post categories, etc. It also lets you create custom footer text such as a copyright, or any content in the footer area can be changed using HTML.
Genesis Simple Comments – Easily edit any of the content that is built into your theme around the comment area.
Genesis Simple Menus – If you are using a child theme that has a secondary navigation menu, you can now customize which menu you want to show on specific pages, posts or categories.
Genesis Title Toggle – Ever want to hide the post or page title? This plugin lets you do it by simple ticking a box on that specific page or post, or you can do it globally.
Genesis Simple Breadcrumbs – If you have chosen to show breadcrumbs, edit them easily with this plugin.
Genesis 404 Page – Have you ever wanted to customize the page someone gets with a 404 Error Not Found? If so, this plugin makes it as easy as creating a new page on your site.
Customize This Child Theme Even Further
Genesis Design Palette Pro – Change fonts, colors, padding and more without knowing code.
This plugin gives you a ton of options that work with some specific Genesis child themes. For example, you can change font, font style, color and size, navigation menu styles, and just about any other part of your site you would have to normally know CSS to change.
Conductor Plugin – Create Your Own Homepage Layout Without Knowing Code
This plugin is not specifically for Genesis, but works with just about any theme. What does it do? If you have ever wanted to change the layout of any page or post, whether it be number of columns, larger images, or a mix of all, this is the plugin for you. I don’t have a tutorial on this plugin, but I do recommend that you check it out.