Getting Started

First of all, thank you for purchasing beNews WordPress theme. We would also like to congratulate you on your purchase and we hope that this will boost up your business!

This documentation covers the installation, usage and customization of theme in detail. The main aim of this documentation is to walk you through the various salient features of the theme and how to install and use them. We have covered everything in as much detail as possible. However, if you still need assistance with something that is not covered here, do not hesitate to contact us, we will be happy to help you.

Theme Requirements

To use this theme, you need the latest version of WordPress. If you are running older version of WordPress, we recommend you to update it to latest version to avoid any issues. If you don't already have WordPress, you can download it from official WordPress website.

Recommended Image Size

Image size depends on type of layout and featured sections you are using throughout your WordPress website. Post images are required not only for showing on posts but also on slider and other featured sections and widgets.

Minimum 1170x630 If you are using full width layout or slider as featured section
Minimum 771x380 If you are using standard layout without slider
Note: If you are going to use this theme on an old blog or website with existing content, then the first thing you need to do is, install the Force Regenerate Thumbnails WordPress plugin. Then go to Tools -> Force Regenerate Thumbnails.

Theme Installation

A WordPress theme is easy to install. Installation includes two steps - Uploading the theme and theme activation. You can either upload the theme ZIP file using WordPress dashboard (Recommended) or you can upload the unzipped theme folder using FTP. Once the theme is uploaded, you can easily activate it from WordPress dashboard.

Install Theme

Download your purchased theme ZIP file and extract it. In the extracted folder, you will find another ZIP file called benews.zip. The is the file that you need to upload using any of the following 2 methods.

Method 1: Using WordPress Dashboard

This is the recommended and easy way to install the theme. Here are the steps you need to follow.

  1. Login to your WordPress admin panel.
  2. Now navigate to Appearance -> Themes.
  3. Click on Add New button at the top.
  4. Click on Upload Theme button.
  5. Click on Browse and select the benews.zip file from within the extracted folder
  6. Click on Install Now button.
  7. Wait for the upload process to finish and then click on Activate.

Method 2: Using FTP

If, for any reason, you like to install the theme using FTP, here are the steps you need to follow.

  1. Extract the benews.zip file into a folder.
  2. Sign in to your web server using FTP client.
  3. Now upload the extracted folder to /wp-content/themes/ directory.
  4. Once the upload process is complete, navigate to Appearance -> Themes.
  5. Now look for beNews and click on Activate.

Install Plugins

The theme requires and recommends few plugins to install.

Required plugins are:

  • Kirki: For adding options in customizer
  • Meta Box: For adding custom post options
  • Envato Market: For updating the theme

Recommended plugins are:

  • Page Builder by SiteOrigin: For building custom homepage
  • One Click Demo Import: For importing one of the theme demos

Here are the steps to follow to install these plugins:

  1. Immediately after activating the theme, you will be given a notification to install the plugins. Click on Begin installing plugins to start the installation process.

  2. Select all the plugins you wish to install. Now from the Bulk Actions dropdown menu, choose Install and click on Apply button.

  3. All your selected plugins will be installed. Now again select the plugins and from Bulk Actions dropdown menu, choose Activate.

Updating the Theme

Theme can be either updated automatically (Recommended) from WordPress dashboard or manually.

Method 1: Automatic Updates with Envato Market plugin

The Envato Market plugin is required to update the themes and plugins purchased from ThemeForest and CodeCanyon using your WordPress dashboard. Once installed and details are added, it becomes easier to update the themes and plugins.

  • Download and install the Envato Market plugin.
  • Activate the plugin and you will see Envato Market link in your WordPress dashboard.
  • Navigate to Envato Market page and follow the instructions there to generate your Global OAuth Personal Token.
  • Once Global OAuth Personal Token is generated, copy and paste it in your WordPress dashboard.
  • Now you can see all items purchased from Envato Marketplace on Envato Market page.

Method 2: Manually Update the Theme from Dashboard

We don't recommend this method but if you wisth to manually update the theme, you can follow the following steps.

  • Deactivate and delete the current version of theme.
  • Download latest version of theme from your ThemeForest account.
  • Upload the latest version in the same way as you installed the theme for first time and then activate it. Now you have the latest version of the theme.

Method 3: Manually update the Theme using FTP/SFTP

This method is also not recommended but it is possible to update the theme using FTP/SFTP. This method is preferred if you wish to replace only a few files in theme's folder.

  • Download the latest version of theme from ThemeForest
  • Now connect to your server using FTP/SFTP.
  • Browse the wp-content/themes/ directory and replace the theme files there.

Setup Demo Data

Installing the theme demo is really easy. With just one click, you can make your website look similar to the demo.

Your website may not look exactly like the demo if you are importing the demo content on an old website with content. Therefore, it is recommended to install the demo content on a clean installation.

This theme uses One Click Demo Import plugin to import the theme demo content. This plugin is already installed on your server if you had installed all the required and recommended plugins.

Before proceeding with demo import process, it is recommended to create a backup of your site. So if anything goes wrong during the process, you can easily restore your website.

To install the demo content, follow the steps given below:

  1. Once you have installed and activated the theme and all the required plugins, go to Appearance -> Import Demo Data.

  2. Select your preferred demo and click on Import button.

  3. Click on Yes, import! button for confirmation.

  4. Wait for some time and demo data will be imported.

  5. You will see the message when demo data is imported.

Theme Customization

All the options to customize this theme are found in theme customizer. To access the theme customizer, go to Appearance -> Customize and start customizing your theme. You can make style changes, change typography settings, control ads and do many more things and see the changes live.

After making changes, do not forget to click on Save & Publish button at the top right corner, else your changes will not be saved.

Site Identity

In this section, you can basically change settings related to site's identity and these settings are:

1. Logo

Upload your own custom logo.

2. Site Title

You can change your site title here.

3. Tagline

Change your site tagline here.

4. Site Icon (Favicon)

Change your site icon here. It is also known as favicon and it appears in the page title bar.

Menus

In the menus section, you can create menus, add items to menus, add menus to different locations but we recommend you to do all these from Menus page. Everything about menus is explained in further section in this documentation.

For detailed instructions on how to add, edit, remove or rearrange menu items, go to Menus Section.

Widgets

In this section, you can add widgets to widgets areas, change options of already added widgets, remove the widgets or reorder the postion of widgets.

To add a widget, go to Widgets section and select any widget area where you want to add the widgets. Now click on Add a Widget and select the widget from widget list.

For detailed instructions on how to add, edit, remove or rearrange widgets, go to Widgets Section.

Static Front Page

When you activate the theme, by default it shows most recent posts. You may want to use a static page as your front page (homepage).

Navigate to Static Front Page section and select the A Static page option. Now select the page from dropdown that you want to set as front page.

Use the Posts page dropdown to change the blog page of your website.

You can find detailed information about creating static front page on WordPress codex.

General Settings

In this section, you can change the following settings.

Pagination Type

Posts on blog page or archives pages are divided into pages. Pagination is used to access other pages. You can select the numbered or next/previous style pagination.

Numbered pagination looks like:

Next/prev style pagination looks like:

Scroll to Top Button

Use this option to show or hide the scroll to top button in header.

Lightbox

Enable this option to open lightbox for post images.

Layout Settings

In this section you can change the layout of theme.

Responsive Layout

Using this option, you can enable or disable the responsive layout. Responsive layout is enabled by default. When this option is disabled, your website will look like its desktop version on mobile devices.

Layout Type

Choose between boxed or wide layout. By default wide layout is enabled. In boxed layout, site content including header and footer is shown in fixed width and is aligned to center. In wide layout, header and footer are spread over full width of screen.

Site Width

This option controls the width of website. Default width is set to 1170px. You can increase or decrease it as per your preference.

Blog Layout

Blog layout option is applied to blog of website. 12 blog styles are available to choose from in this theme. With just a click, you will get different style for your blog.

Homepage Layout

Homepage layout option is applied to custom homepage of your website or blog. You can choose right sidebar, left sidebar or no sidebar layout for custom homepage.

Read in detail about custom homepage in Setup Homepage section.
Category Page Layout

Using this option you can change layout of category pages. A category page is one that lists all posts from that particular category.

Author Page Layout

Using this option you can change layout of author pages. An author page is one that lists all posts from an author.

Tag Page Layout

Using this option you can change layout of tags pages. A tag page is one that lists all posts from that particular tag.

Archives Layout

Using this option you can change layout of archives pages. Month, date, year are all examples of archives pages.

Search Results Page Layout

Using this option you can change layout of search results page. A search result page is one that shows search results when a user make a search for something on your website or blog.

Single Posts Layout

This option is applied to detail posts of your website or blog. You can choose right sidebar, left sidebar or no sidebar layout for detail posts.

Single Page Layout

This option is applied to pages of your website or blog. You can choose right sidebar, left sidebar or no sidebar layout for pages.

Styling Options

In this section, you can make all the changes related to style like text color, background color, border color. All styling options are divided into sections for easy navigation.

Body Background

In this section you can change body background color and image.

Background Color Change background color of body
Background Image Change background image of body
General Styling Options

In this section you can change general styling options.

Primary Color Change primary color scheme of theme
Body Text Color Change text color of body
Widget Title Background Color

Change background color of widget title

This option is applied only to widget style 2
Widget Title Text Color

Change text color of widget title

This option is applied only to widget style 2
Primary Navigation Menu

In this section you can change color and background properites of primary navigation menu.

Primary Menu Background Color Change background color of primary navigation menu
Primary Menu Links Color Change color of links of primary navigation menu
Primary Menu Link Hover Color Change hover color of links of primary navigation menu
Secondary Navigation Menu

In this section you can change color and background properites of secondary navigation menu.

Secondary Menu Background Color Change background color of secondary navigation menu
Secondary Menu Links Color Change color of links of secondary navigation menu
Secondary Menu Link Hover Color Change hover color of links of secondary navigation menu
Mobile Menu

In this section you can change color and background properites of mobile menu.

To see the changes live of mobile menu, you can use the responsiveness preview buttons of customizer.

Mobile Menu Button Color A button is shown in header when on mobile phones to access the mobile menu. Using this option, you can change the color of this button.
Mobile Menu Links Color Change color of links of mobile menu
Mobile Menu Background Color Change background color of mobile menu
Header Styling Options

In this section you can change color and background properites of site header.

Current Header Change background image of site header
Header Background Color Change background color of site header
Logo Margin Change top and bottom margin of logo
Text Logo Color Change color of text logo
Header Tagline Color Change color of tagline
Posts Styling Options

In this section you can change color and background properites of posts.

Post Title Color Change color of post title
Post Content Text Color Change text color of post content
Posts Meta Links Color Change links color of post meta (post author, post category, post comments)
Posts Meta Text Color Change text color of post meta (post author, post category, post comments)
Posts Border Color Change border color of posts. It also applies to author box, post navigation, user comments area and comment form.
Sidebar Styling Options

In this section you can change color and background properites of sidebar.

Sidebar Widgets Title Color Change color of widgets titles
Sidebar Widgets Text Color Change text color of sidebar widgets
Sidebar Widgets Link Color Change links color of sidebar widgets
Sidebar Widgets Link Hover Color Change hover color of links of sidebar widgets
Sidebar Border Color Change border color of sidebar widgets
Footer Styling Options

In this section you can change color and background properites of side footer.

Footer Background Color Change background color of site footer
Footer Text Color Change text color of site footer
Footer Links Color Change links color of site footer
Footer Links Hover Color Change hover color of links of site footer
Footer Widgets Title Color Change title color of footer widgets
Footer Widgets Link Color Change links color of footer widgets
Footer Widgets Link Hover Color Change hover color of links of footer widgets
Custom CSS

If you couldn't find an option to style particular element, you can add custom CSS in this section to make any custom style changes.

Note: It is not suggested to edit theme files. If you edit the files, your changes will be lost once you update the theme. Always make any CSS changes using Custom CSS option. If you need to make any PHP changes, you can do this with child themes.

Typography

This section controls the typography options of theme. You can change font family, font size, font weight and other settings related to typography.

Body Font

This option applies to body of the website.

Main Navigation Font

This option applies to main navigation menu.

Secondary Navigation Font

This option applies to secondary navigation menu.

Headings Font

This option applies to all the headings of theme.

Post Title Font

This option applies to post title.

Blog Post Content Font

This option applies to content of posts appearing on blog pages.

Single Post Content Font

This option applies to content of detail post.

Post Meta Font

This option applies to post meta (post author, post comments etc).

Post Category Font

This option applies to post category.

Widget Title Font

This option applies to widget titles.

Widget Text Font

This option applies to widget text.

Logo Font

This option applies to text logo in header.

Footer Menu Font

This option applies to footer menu.

Home

This section controls the custom homepage of your website if you have set one using Static Front Page option.

In this section you can change the widget styling of custom homepage. This setting applies to homepage built using both widgetized and page builder methods.

Blog

This section controls the blog page that shows most recent posts and also the archives pages. Blog page is the front page by default but it can be set to a different page from settings. Archives pages are category, tag, author pages.

Following options are avaiable for blog page:

Blog Content

By default post excerpt is shown on main blog page but you can use this option to show full post content. You can choose None option to hide the content.

Excerpt Length

Excerpt Length option controls the length of post excerpt shown on main blog page. This option shows only when post excerpt is chosen as option.

Read More Button

You can use this option to show or hide read more button on main blog page.

Post Meta

Use this option to show or hide all post meta items or selected post meta items.

Social Media Share Buttons

Use this option to show social share buttons on posts. Press the eye button to show or hide the button and press the button on right side to rearrange the position of button.

Single Post Options

In this section you can change the following options.

Single post is the page that opens up when you click on the post title or thumbnail on blog page or in widgets.
Single Posts Layout

Using this option, you can show or hide post elements and also rearrange their positions. The post elements that you can control are: Post Content, Post Navigation, Author Box, Related Posts.

Single Post Header Style

beNews comes with 3 different post header styles. Post header is the area with post title, post meta and featured image.

Breadcrumbs

Use this option to show or hide breadcrumbs on pages.

Post Meta

Use this option to show or hide the post meta on detail posts. Post meta includes poat author, post date, post category, post tags, post comments count.

Filter Related Posts By

You can show related posts by tags or categories.

Related Posts Count

Control the number of posts to be shown as related posts.

Border Around Images

By default, this theme shows a border around images added to posts. Using this option, you can turn off the border.

Social Media Share Buttons

Show or hide social media share buttons on your posts to let users easily share your content.

Share Buttons Position

You can choose to show share buttons above or below the post content.

Select Share Buttons

Easily select which share buttons you want to show by clicking on eye button in front of button name. You can also drag and drop the button on right side to rearrange the button position.

Single Page Options

In this section, you can control settings of pages.

Breadcrumbs

Use this option to show or hide breadcrumbs on pages.

Comments Section

Use this option to show or hide comments section on pages.

Ad Management

This section controls different ad positions and ad blocker feature available in this theme.

For all ad slots, you can either show banner ads or any other ads by code like Google Adsense.
Ad Block Detector

When you enable this option, your content will remain hidden to users with ad blockers in their browsers. You can change the title and description of warning shown to the users.

Header Ad

This ad is shown in site header.

Note: Header ad is shown only in header style 4.
Below Header Ad

This ad is shown immediately below site header.

Before Post Content Ad

This ad is shown before post content on detail post pages.

Below Post Content Ad

This ad is shown below post content on detail post pages.

Above Footer Ad

This ad is shown above site footer.

Social Profiles

In this section, you can add links to your social profiles. Social icons can be shown in header and footer area of the theme. You can show social links in site header from Header options and to show them in site footer, go to Footer options.

Image Sizes

In this section, you can manage the size of entry and widget images.

Crop Featured Images

This option is turned on by default. When this option is turned off, full size images will be shown as featured images instead of cropped images.

It is recommended to keep this option turned on because full size images may not fit well in posts.
Entry Image Width

Using this option, you can resize the width of featured images of posts shown in blog and archives pages.

Entry Image Height

Using this option, you can resize the height of featured images of posts shown in blog and archives pages.

Widgets Thumbnail Width

Using this option, you can resize the width of featured images of posts shown in widgets. Only small size images are affected with this change.

Widgets Thumbnail Height

Using this option, you can resize the height of featured images of posts shown in widgets. Only small size images are affected with this change.

Widgets

beNews comes with 5 widget areas and it offers 21 custom widgets to add different features and functionalities to theme without using any plugins or editing the code of theme. All the widgets have little description to make you understand the usage of widget.

You can change the column count of footer widgets using WordPress customizer.

WordPress makes it really easy to add, remove or reorder the widgets with just drag and drop. Procedure is given in the following sections.

Adding Widgets

To add a widget, go to Appearance -> Widgets and click on any widget that you want to add. Now select the desired widget area where you want the selected widget to appear and then click on Add Widget. You can also simply drag and drop the widget to desired widget area.

Now refresh your website and you will see your added widget.

Removing Widgets

To remove a widget, go to widget area and click the down arrow on right side of widget name. Now you will see Delete text written in red color at the bottom of widget options. Just click on it and it will be removed.

Reorder Widgets

To reorder a widget, simply click and drag it to new position or widget area.

Setup Homepage

If you are willing to create and use magazine layout as homepage for your website then you can easily build your own custom homepage. There are two ways to do it.

  • Method 1: Using Widgets
  • Method 2: Using Page Builder (Recommended)

You can choose any of the above methods. However method 2 gives more flexibilty and more options to build pages. Both of these methods are explained in detail below.

It is possible to build a homepage with left sidebar, right sidebar or no sidebar at all. Layout options for pages and homepage are defined in global layout options. It can also be changed from individual page settings which is explained in Page Management section.

Build Homepage using Widgets

This method doesn't require any plugins to build your own homepage but it has less options as compared to the other method.

You need to follow the following steps in order to build your custom homepage using widgets:

  1. Go to Pages -> Add New.

  2. Now look for Page Attributes on right side and select Widgetized Homepage from Template dropdown.

  3. Publish the page.
  4. Now go to Appearance -> Widgets.

  5. Drag and drop the widgets to Custom Homepage widget area.

    Widgets shown in the following screenshot are specially created for homepage

  6. Once you are done with adding widgets, go to Settings -> Reading and set the page that you created in step 1 as front page.

    Read more about front page in Static Front Page section.
  7. Now press the Save Changes button

Build Homepage using Page Builder

beNews uses Page Builder by SiteOrigin plugin to build custom homepage. This page builder plugin is already installed on your server, if you have installed all the plugins while installing the theme. If you haven't installed it yet, you can do it now before reading this section further.

  1. Go to Pages -> Add New.

  2. Click on Page Builder on top right corner of text editor.

  3. Now start creating your page using available widgets.

  4. Once you are done with creating your page, go to Settings -> Reading and set this page as front page.

    For more information about front page, navigate to Static Front Page section.

Post Management

To create your first post, navigate to Posts -> Add New and start writing it.

Categories and Tags

It is possible to divide posts into categories and tags and you can add categories and tags to posts here. It can be found at right side of post editor.

This theme uses Featured Image option of WordPress to add featured images to posts. To add a featured image to a post, go to Posts -> Add New and you will see a box with title Featured Image at the bottom right corner of the screen. Click on Set featured image to upload an image there.

Post Formats

beNews supports 9 post formats and each post format has its own set of options. You can choose any of these post formats while creating your posts. These post formats are listed below:

Options for each post format appears at the end of post editor.

You can choose Gallery Post Format when you want to show some images in gallery format on top of post. Gallery images can be shown in slider or tiled format.

Click on Gallery radio button and the options as shown in following screenshot will appear at bottom of post editor. Upload your images and choose gallery type.

Check the Hide Gallery option if you want to hide it from single posts.

Link post format is used when you want to add link to another website or to webpage on your own website and you also want to highlight it.

Click on Link radio button and the options as shown in following screenshot will appear at bottom of post editor. Add your link in URL field. You can also change its background color.

Check the Hide Link Box option if you want to hide it from single posts.

Quote Post Format

Quote post format is for publishing quotes. To add a quote, click on Blockquote button in post editor and start writing the quote.

When you click on Quote radio button, the options as shown in following screenshot will appear at bottom of post editor.

Video Post Format

Video post format shows video at the top of post. When you click on Video radio button, the options as shown in following screenshot will appear at bottom of post editor.

To add a video, choose your video host from the dropdown and then add the video ID. For example: In this URL https://www.youtube.com/watch?v=RTNMLtDHqmI, the text in bold (RTNMLtDHqmI) is video ID. You can also upload your own video.

Check the Hide Video option if you want to hide it from single posts.

Image Post Format

Image post format is just like standard post format but its featured image can be opened in lightbox when a user clicks on it. You can check the Hide Featured Image option if you want to hide it from single posts.

Status Post Format

Status post format is used to show Twitter or Facebook status at the top of post. Select Twitter or Facebook from Status Type dropdown and add link to your status in Status Link field.

Check the Hide Status option if you want to hide it from single posts.

Audio Post Format

Audio post format can be used to show audio file from Soundcloud or Mixcloud on top of your post. It is also possible to upload your own audio file.

Choose audio file source from Audio File Source dropdown. Then add link to your audio file.

Check the Hide Audio option if you want to hide it from single posts.

Layout Options

You can change sidebar position of each post that can be different from one set in global layout options. Layout options for posts can be found at the bottom of post editor.

Page Management

To create your first page, navigate to Pages -> Add New and start writing it.

Page Options

One the top right corder of page editor screen, you will find a box with title "Page Options". You can hide page title and breadcrumbs on the page you are creating using these options.

Layout Options

You can change sidebar position of each page that can be different from one set in global layout options. Layout options for pages can be found at the bottom of page editor.

Translating the Theme

This theme is translation ready and you can translate it to any language supported by WordPress. There are many ways for translating WordPress themes and plugins but we recommend the following method for the translation.

  1. First download POEdit and install it.
  2. Now, open the benews.pot file that you can find in languages folder of your theme.
  3. You can now translate each string in your desired language.
  4. Once you have translated all the strings, save the file. POEdit creates two files. You need to save the files using following naming convention: 
    languagecode_countrycode
    If you are translating your strings to french language, your file names will look like: 
    fr_FR.po
    fr_FR.mo

  5. There may be multiple language files in theme’s languages folder. You need to tell WordPress which file to use for your blog. To chose your translated file, go to Settings -> General and then chose the language from Site language dropdown list.

  6. Click the Save Changes button
You can read more about translating WordPress here.

Child Theme

A child theme is required when you want to make changes to the code of the theme. It is mostly used by developers. A child theme inherits the functionality and styling of its parent theme.

It is recommended to use child themes if you want to modify theme files as the changes may be lost when you update the theme.

A child theme is provided with your purchased theme. You will find the child theme file with the name of benews-child.zip in the theme package. In case you need to make changes to code of theme, you can start using this child theme. To install it, follow the same instructions as defined in Install Theme section.

You can find detailed information about creating, editing and using child themes on WordPress codex.

Sources and Credits

Images
jQuery
Fonts

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 beNews, please contact us from our ThemeForest profile contact form.