Headline News

A) Installation - top

In order to begin installing Headline News theme, you need a working copy of WordPress installed on your own server (not on wordpress.com).

Extract the zipped package downloaded from ThemeForest to your desktop. In the extracted package you will find "headline-news" folder which is the WordPress theme.

Upload the headline-news folder to your wp-content/themes folder. Login to your WordPress admin panel and go to Appearance > Themes. Activate the theme.

If you want sample data (posts, pages, categories, etc) you can import XML sample data in the "sample-data" folder. Go to Tools => Import menu and choose WordPress, in upload field choose the xml file and upload it.

B) Theme Structure - top

This is the structure of the theme (homepage):

The top of the theme consists of news ticker, date/time info, search form, logo, top menu and main menu.

To manage News Ticker, go to admin » Appearance » Customize » News Ticker (more info)

To manage Header, go to admin » Appearance » Customize » Header (more info)

To manage Main Menu and Top Menu, go to admin » Appearance » Menus (more info)

Below the main menu, there is a section for featured posts/the main slider. To manage Featured Posts, go to admin » Appearance » Customize » Featured Posts & Slider (more info)

The section from Content Blocks to Recent Posts in the picture is the page section. This page is built with the content builder template. To create the page like in the picture, please follow the steps here: How To Create Homepage

To manage All Sidebars and Footer widget area, go to admin » Appearance » Widgets (more info)

To add more custom sidebars, go to admin » Appearance » Theme Options » Sidebar Manager (more info)

To manage Footer text, go to admin » Appearance » Customize » Footer (more info)

C) How To Create Homepage - top

IMPORTANT: if you use WordPress 5.0 or newer, please install and activate Classic Editor plugin to make the content builder work.

To create the homepage with content builder, go to Pages » Add New. The page screen will be like this:

1. Enter your page title.
2. Choose "Content Builder" in template dropdown.
3. Layout Options: In this meta box, you can choose page layout and sidebars:
   • Page layout: right sidebar, left sidebar, full width, dual sidebar or default. If you choose default, it will use the default layout setting in Theme Customizer » General
   • Left sidebar: choose Default Sidebar 1 (default) or other sidebar.
   • Right sidebar: choose Default Sidebar 2 (default) or other sidebar
   You can add more custom sidebars from Theme Options » Sidebar Manager
4. Below Layout Options, you will find Content Builder meta box. In this meta box, you can add content blocks, slider, recent posts and additional sidebars. To add a content block, click on the "Add" button. You can add multiple content blocks and each block can be configured differently:
   
   
   • Title: set the title of the content block. If you leave this empty, it will automatically set to the category name when you select a category from the dropdown.
   • Filter by category: select All Categories or filter posts by a category.
   • Style: select a style by clicking on one of the style images.
   • Number of posts to show: set the maximum number of posts you want to show.
5. To enable slider (full width slider at the bottom of content blocks), check "Show slider", choose the category and the maximum number of posts for the slider.
6. To enable recent posts, check "Enable Recent Posts" and set the number of posts.
7. Choose additional sidebars (left bottom and right bottom sidebar).
8. When you are done, click "Publish" or "Update" button to save the page.

After you save the page, you need to set that page as the front page:

1. Go to Settings » Reading
2. On Front page displays, choose A static page and select the page from the front page dropdown.
3. Click Save button.

If you don't choose a static page as front page, your homepage will only show latest posts.

D) How To Create Blog Page - top

To create a blog page with blog template, go to Pages » Add New:

1. Enter your page title.
2. Choose "Blog" in template dropdown.
3. Layout Options: In this meta box, you can choose page layout and sidebars:
   • Page layout: right sidebar, left sidebar, full width, dual sidebar or default. If you choose default, it will use the default layout setting in Theme Customizer » General
   • Left sidebar: choose Default Sidebar 1 (default) or other sidebar.
   • Right sidebar: choose Default Sidebar 2 (default) or other sidebar
   You can add more custom sidebars from Theme Options » Sidebar Manager
4. Page Options: by default, Page title and content will be disabled in Blog template, but you can enable them from here.
5. Blog Options:
   • Blog style: choose Small Image, Large Image or Grid.
   • Filter by category: select All Categories or filter posts by a category.
   • Number of posts per page: enter the number of posts, you can leave this empty to use the setting from Reading Settings.
   • Post Options: check/uncheck to show/hide post elements (post format icon, rating, featured image, category, date, comments number, and author).
   • Show post content: show excerpt, full content or or don't show at all.
   • Excerpt length: set the number of words for excerpt.
6. When you are done, click "Publish" or "Update" button to save the page.

E) How To Create Posts - top

Review Post - top

To add a review post, create a standard post and click on the "Enable review on this post". You can add as many rating as you want. Overall rating will be calculated automatically.

The review detail will be shown at the top or bottom in single post. Here is an example of review with percent style:

F) Menus - top

This theme supports a multi-level dropdown menu that can be set from Appearance » Menus.

This theme supports two locations for WordPress menus: Main Menu and Top Menu. The Main Menu supports multi-level dropdown. The Top Menu doesn't support multi-level, and because of the limited space, only 4 menu items will be displayed in the Top Menu.

To setup the menus, go to Appearance » Menus. Enter a name for your menu and add links to the menu by using the options on the left sidebar. You can add your menu items using the drag and drop functionality. After setting up your menu, go to Manage Locations and select the menu you just created from the theme location dropdown box and click Save Changes.

You can create more custom menus for use within the custom menu widget. Once you have built your menu, save it, and use it from a custom menu widget in Appearance » Widgets

For more details of addings, deleting, and maintaining menus, please visit WordPress Menu User Guide.

G) Widgets - top

This theme has 4 widget areas for footer and 2 for sidebar. More sidebars can be added from Theme Options » Sidebar Manager.

You can insert any widgets into each area. To setup widgets, go to Appearance » Widgets and use the drag and drop interface to insert widgets into the desired widget areas.

As an addition to the built-in WordPress widgets, this theme also has custom widgets: Banner (Single), Banner (Multiple), Comments, Contact Form, Contact Info, Facebook, Flickr, Posts, Reviews, Social, Subpages, Twitter, Video.

H) Theme Customizer - top

Most of frontend settings for this theme can be set from the Theme Customizer. To access the Theme Customizer, go to Appearance » Customize. Theme Customizer allows you to tweak theme's settings and see a preview of those changes in real time.

WordPress already has some settings in the customizer and this theme added more sections: General, Header, Featured Posts, Slider, Blog, Single Post, Footer, Main Color and Category Colors.

When you are done making your changes, press the "Save & Publish" button in the top of the theme customizer.

General - top

• Enable boxed layout: check this if you want to use boxed layout. You can use background color/image only if you activate boxed layout.
• Default sidebar alignment: choose a layout for sidebar alignment. Right sidebar, left sidebar or full width (no sidebar). This will be the default layout, you can change the layout individually on each page/post settings.
• Enable retina display support: check this of you want to enable support for retina display. All images will be twice as large if you view the site from a retina device. Please make sure that you uploaded a large enough images for your posts.
• Main logo: upload an image here to set it as the site's logo. If no image set, your Site Title and Tagline will be used.
• Main logo height (in pixels): set the height of the main logo. The width will be adjusted automatically.
• Login logo: if you want to change your login page logo (http://www.yourdomain.com/wp-admin), you can upload your image here.
• Favicon: if you want to set the favicon, you can upload your image here. A favicon is a 16 pixel x 16 pixel image that appears next the URL in most web browsers.
• Enable prettyPhoto for gallery: check this option to force the WordPress gallery to link to images directly and open images with lightbox effect.

News Ticker - top

• Enable news ticker: check this if you want to show news ticker. News ticker will be shown in all pages.
• Title: enter the title of the news ticker
• Tag(s): enter tags you want to use. All posts with this tag will be shown in the news ticker. You can enter more than one tag, separated by commas.
• Number of items displayed: set maximum number of posts.

Header - top

• Header date format: enter the date format, or leave empty to disable date.
• Header time format: enter the time format, or leave empty to disable time.
• Show header search form: check this to show search form.
• Show top menu: check this to show top menu.
• Enable sticky menu: check this to make the main menu stick to the top and remain visible when scrolled.

Featured Posts - top

This section is for Featured Posts customization. If enabled, the Featured Posts will appear on the homepage. Featured Posts come from posts with a user defined tags (default tag is "featured") or sticky posts.

Please note, the post must have a featured image. If the featured image is not found, the post will not show up in the Featured Posts.

• Enable featured posts: check this to enable the Featured Posts
• Tag(s): enter tags you want to use. Featured Posts will look for posts with that tag and show them. You can enter more than one tag here, separated by commas. To enable sticky posts, please set this option to empty.
• Number of featured posts: set maximum number of posts displayed.
• Show post format icon: check this to enable post format icon in the caption.
• Show date: check this to enable date info in the caption.
• Enable full width slider: check this to enable full width slider. Please note, if your featured posts number is 4 or lower, the full width slider is always active.

Slider - top

This section is for slider setting (the main slider (featured posts) and content builder slider).

• Animation: choose a transition effect: slide or fade.
• Slideshow Speed: enter a number to set the speed of the slideshow cycling, in milliseconds
• Animation Speed: enter a number to set the speed of animations, in milliseconds
• Pause on Hover: check this if you want to pause the slideshow when hovering over slider

Blog - top

This section is for pages that shows a list of posts, like blog, search result, archives (category archives, tag archives, author archives, etc).

You can show/hide these post elements:

• Post format icon
• Rating
• Featured image
• Category
• Date
• Comments number
• Author

And you can also choose to show/hide the post content (excerpt/full) and set the number of words for excerpt.

Please note: for blog templates, please use the settings on page edit screen (meta box).

Single Post - top

This section is for single post view. You can choose to show/hide these elements:

• Category
• Date
• Author name
• Featured Image
• Tags
• Author Info
• Related Posts

Footer - top

• Show footer widget area: check this option to enable footer widget area.
• Footer text: enter a text like copyright information or any text you want.

Color Scheme - top

Main color is the primary color for this theme, used for links, main menu background, buttons, etc.

You can use the color picker to choose colors.

I) Theme Options - top

Beside the Theme Customizer, this theme also comes with Theme Options to customize some more features.

To use Theme Options, go to Appearance » Theme Options.

General - top

• Theme Update Notifier: check this option to get notified when a new theme update is available.
• Enable Review: you must enable this option to be able to add rating to a post. This option will enable Review Settings in post meta box.

Social - top

You can use this option to set maximum number of items in social widgets (default is 6 items).

Sidebar Manager - top

In this section you can add custom sidebars to be used in posts/pages.

Contact Form - top

In this section you can set email address, subject and success message for contact page template and contact form widget.

Scripts - top

You can enter your custom scripts (such as Google Analytics or other statistics code) here. It will be inserted before the closing body tag.

When you are done making your changes, press the "Save All Settings" button in the bottom-left of the options panel.

J) Translation - top

To translate this theme, you can use an application called "PoEdit" and you can download it for FREE here: http://www.poedit.net/. Once you installed it:

• Open the lang directory and copy the default.po into a new file, for example id_ID.po for Indonesian language.
• Edit id_ID.po with Poedit and add translations in this file. After this file saved, id_ID.mo file will be generated. Upload the .mo and .po files into your headline-news/lang folder on your live site.
• Open wp-config.php and edit the WPLANG definition into:

  define('WPLANG', 'id_ID');

Replace id_ID with your language code. Languages list can be found here: http://codex.wordpress.org/WordPress_in_Your_Language

K) Using Child Themes - top

If you want to make modifications on this theme, it is recommended to use a child theme. This theme comes with a blank child theme that you can use. In the theme package you can find "headline-news-child" folder. Upload this folder to your wp-content/themes folder, and activate it from the Appearance » Themes page.

Once activated, you can start editing inside this "headline-news-child" folder. This child theme includes 2 files that you can use to override parent theme's style (style.css) and function (functions.php). By using a child theme, you will leave the parent theme unmodified, so when a theme update is available, you can simply replace the parent theme without worry about your modified code. For more info about using child themes, please visit this link: http://codex.wordpress.org/Child_Themes

L) Sources and Credits - top

I've used the following images, icons or other files as listed.

• jQuery - http://jquery.com/
• Twitter Bootstrap - http://getbootstrap.com/
• Font Awesome - http://fontawesome.io/
• Flex Slider - http://www.woothemes.com/flexslider/
• jQuery liScroll - http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html
• jQuery Mobile Menu - http://github.com/mambows/mobilemenu
• prettyPhoto - http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
• Sticky - http://labs.anthonygarand.com/sticky
• Aqua Resizer - http://aquagraphite.com/2012/05/aqua-resizer/
• TGM Plugin Activation - http://tgmpluginactivation.com/
• WordPress Theme Update Notifier - http://github.com/unisphere/unisphere_notifier
• FitVids.js - https://github.com/davatron5000/FitVids.js
• retina.js - https://github.com/imulus/retinajs
• Unsplash - http://unsplash.com/
• Picjumbo - http://picjumbo.com/