Got lots of news-style content and need a stylish frame? The Modern News theme is a great choice for sites that have a lot to say. Choose from many color schemes, and widgets that support everything from video to in-depth articles to great photography. Modern News is sleek, up-to-date, and always cutting-edge… just like your content.
The Modern News theme has multiple layouts and menus, breadcrumbs, and archive control. You can even add a customized Header image or custom background.
The Modern News theme includes the following features: 7 color styles – blue, green, orange, pink, purple red and teal.
The Modern News theme is a great fit if you publish magazine or news style content. You can showcase multiple categories on the homepage and use featured images to make your site look stunning.
You can choose from 6 different layout configurations for Modern News. You can have your content on the left with a sidebar on the right, flip that around, have two sidebars or even remove the sidebar altogether.
Plenty of Options
Part of Modern News’ charm is the option for customizing the look of your site. This includes sidebar widget area, two menu areas, and control over what content is displayed in your blog archive pages.
Custom Header Image and Background
You can further customize Modern News thanks to the Custom Header and Background options found in Appearance → Header and Appearance → Background.
Quick Specs (all measurements in pixels):
- Content and One Sidebar: The main column width is
580 with one sidebar of
300 and an alternative sidebar of
- Full-width layout: The main column is
Modern News theme documentation
Uploading a Custom Header
Inside your dashboard, go to Appearance → Header and upload your header. The default size for the Modern News theme is 960 x 110 pixels.
Using a Custom Background
Inside your dashboard, go to Appearance → Background and either upload the background image you wish to use or include a 6-digit hexcode that will be used for the background color.
This theme relies on Custom Menus for functionality. Inside your dashboard, go to Appearance → Menus and set up your navigation menus. Be sure to select the Primary/Secondary custom menu you wish to display in the Theme Locations option box on the Custom Menus screen. You also have the option to enable/disable the Primary/Secondary menus from displaying by going to the Appearance → Theme Options page in your WordPress dashboard.
Changing Color Schemes
Inside your dashboard, go to Appearance → Theme Options → Modern News Color Style and select the color scheme you wish to use.
Changing Site Layout
Inside your dashboard, go to Appearance → Theme Options → General Settings and select the site layout you wish to use. Modern News offers these layout options:
- Content / Sidebar
- Sidebar / Content
- Content / Sidebar / Sidebar
- Sidebar / Sidebar / Content
- Sidebar / Content / Sidebar
- Full Width Content
Inside your dashboard, go to Appearance → Theme Options → Breadcrumbs and select the types of pages you want breadcrumbs to appear on. Modern News offers these types:
- Front Page
- 404 Page
Configuring the Homepage
When you activate the Modern News theme, the standard loop will load on the homepage. In order to utilize the Featured Post widget sections that you see on the demo site, you'll need to go to the Appearance → Widgets screen in your dashboard.
There you will see Home Top, Home Middle Left, Home Middle Right and Home Bottom as available widget areas on the right hand side of your screen. You can use the Featured Tabs widget to display a tabbed section at the top of your homepage or you can populate the content for your homepage via the Genesis - Featured Posts widget. With that widget, you can select how many posts to show, from what categories, whether or not to display a featured image (and the size) as well as some other options.
Configuring the social icons
If you would like to display the social icons in your navigation, simply follow these steps:
Create a Custom Menu
Inside your WordPress dashboard, go to Appearance > Menus and create a custom menu. On our demo site, we added these icons to our existing Primary menu. Go to the Screen Options tab in the upper right hand corner of your screen and make sure you have the "CSS classes" option enabled.
Enter a CSS Class for the Link
You will need to create Custom Links for the Facebook, Twitter and RSS icons. In the input box for CSS Classes, use social-facebook, social-rss and social-twitter for your Facebook, RSS and Twitter icon links respectively. Here's how that looks: