WordPress Theme Documentation


Headline News

Created: 11/05/2014
By: gawibowo
Contact Form

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Installation
  2. Theme Structure
  3. How To Create Homepage
  4. How To Create Blog Page
  5. Posts
  6. Menus
  7. Widgets
  8. Theme Customizer
  9. Theme Options
  10. Translation
  11. Using Child Themes
  12. Sources and Credits

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

Standard Post - top

To create a new post:

  1. Go to Posts » Add New.
  2. Enter your post title.
  3. Enter your post content.
  4. Choose categories or add a new category.
  5. Add tags, separated by commas.
  6. When you are done, click "Publish" button to save the post.

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:



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.

Banner (Single)

This widget allows you to show a single banner. You can customize the widget title, banner image url and banner link.

Banner Multiple

This widget allows you to show banners (up to 4). You can customize the widget title, banner image url and banner link.

Comments

This widget allows you to show recent comments with an option to show avatar.

Contact Form

This widget allows you to show an ajax contact form. To set email address, subject and success message for the contact form, go to Theme Options » Contact.

Contact Info

This widget allows you to show address, phone, fax and email.

Facebook

This widget allows you to show a facebook likebox.

Flickr

This widget allows you to add recent images uploaded to your flickr account. You can customize your Flickr ID, number of photos to show and the display order (latest/random) from the widget settings. To find your Flickr ID, use http://idgettr.com

Posts

This widget allows you to show posts with these options:

  • Post order: Recent, Popular or Random order.
  • Filter by Category: select All Categories or filter posts by a category.
  • Number of posts to show
  • Show thumbnail: check this option to show thumbnail.
  • Thumbnail size: Small, Large, or Mixed (large thumbnail only on first item)
  • Show category: check this option to show category.
  • Show rating: check this option to show rating (if review enabled).
  • Show date: check this option to show date.
  • Show comments number: check this option to show comments number.
  • Show author: check this option to show author.
  • Show excerpt: show on first item, show on all items, or don't show at all.

Reviews

This widgets allows you to show a list of latest review posts.

Social

This widget allows you to show social links with icons, with options:

  • Icon size: Small or Large.
  • Icon frame: Square, Rounded Square or Circle.
  • Style: Horizontal or Vertical.

You can choose from 17 available icons and set the link and text for each icon.

Subpages

This widget allows you to show child pages of current page or any page. You can customize parent page (Enter a Page ID, or leave empty for current page), sort by and exclude page IDs from the widget settings.

Twitter

This widget allows you to add recent tweets from your twitter account. You can customize your Twitter username, number of updates and the follow text from the widget settings.

To use twitter widget, you need to register your app and insert some API keys into the widget settings.

  • Go to https://dev.twitter.com/apps and login with your Twitter account
  • Click "Create a new application" and enter the application details (Name, Description, and Website), enter captcha code and click Create.
  • On the next screen, click "Create my access token".
  • Copy Consumer key, Consumer secret, Access token and Access token secret into the Twitter widget settings.

Video

This widget allows you to show a video and a description. Video can be added from youtube, vimeo or other video sharing sites that provide embed codes. You can customize your video embed code and the description from the widget settings.


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.

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

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:

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.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

gawibowo

Go To Table of Contents