Binar WordPress Theme Documentation

Binar is a contemporary, minimalistic theme built to let your tech blog content shine. This modern theme will look good on any screen size and is the perfect combination of stylish typeface and a lot of whitespace. Learn how you can get the most out of the theme with the Binar WordPress theme documentation.

Binar WordPress theme documentation, step 1: Theme specifications

• Post featured image recommended width is 770px.
• Page and Post content maximum width is 740px.
• Recommended logo size is 210 x 40px.
• Sidebar content width should be 300px.

Binar WordPress theme documentation, step 2: Theme installation

The theme can be installed through the WordPress Admin panel.

1. Log in to the WordPress Admin panel.
2. Go to Appearance -> Themes.
3. Click on the Add New button, at the top of the screen.
4. In Add Themes screen, click on Upload Theme.
5. Click on Choose theme, and then browse for theme file on your computer.
6. Click on Install Now to start the install process.
7. After the installation is done, click on Activate theme.

A detailed video for theme installation is available here: https://help.themeskingdom.com/how-to-install-and-setup-the-theme.

After activating the theme, you will be prompted to install the required plugins. Required plugins in the Binar WordPress theme documentation are:

1. Jetpack
2. Kirki Customizer Framework

Binar WordPress theme documentation, step 3: Theme demo

To set the theme as presented in our demo, you can import the demo file.

Binar WordPress theme documentation, step 4: Theme setup

To set up the theme, please follow the next steps:

1. Create pages with the default template: Home, About, and Contact. For the Contact page, you will need to insert a contact form into the page.
2. Create content for the About page and insert a contact form into the Contact page.
3. Go to Posts and create several posts. Don’t forget to set the featured image for each post, and to organize the posts into categories.
4. When you are done with the pages, go to Settings -> Reading and set Your homepage displays to A static page. For Homepage set the Home page.
5. In the Appearance -> Customize go to Binar Settings -> Home Page Settings. Enable Home sections, and add the following elements:
   1. Slider section: Choose Slider element type, enter title Top Stories, select category Top Stories (or any other that you like), choose the Horizontal slider style and set the number of slides to 8.
   2. Archive section: Choose Archive element type, enter the title Tech, select the category Tech, choose the List archive style, and set the number of posts to the desired value.
   3. Latest News section: Choose Slider element type, enter the title Latest News, select the category Featured, choose the Classic slider style and set the number of slides to the desired value.
   4. Creative section: Choose Archive element type, enter the title Creative, select the category Creative, choose the Newspaper archive style, and set the number of posts to the desired value.
6. In the Binar Settings -> Archive Settings set to Magazine, and enable the Display Category Post Count and Add rounded corners on buttons.
7. Finally, go to Appearance -> Menus. Create a new menu 一 name it Binarary, and add the desired categories and all your pages to it. Associate the menu with the Binarary position. Create another menu and add social links to it, and associate that menu with Social position.

If you want to customize the theme and a personal touch to it, be sure to follow the next steps.

Binar WordPress theme documentation, step 5: The Customizer

The Customizer in the Binar WordPress theme documentation allows you to modify theme visuals and settings easily. Here are the customization options in the Binar theme:

1. Site Identity
2. Background Image
3. Menus
4. Content Options
5. Widgets
6. Homepage Settings
7. Binar Settings
8. Additional CSS
9. Theme Options

Site Identity

The Site Identity panel is used for setting up basic site identity:

1. Logo: Site logo is an image in a .jpg, .jpeg or .png format. Suggested logo image size is 210 x 40px.
2. Logo Size: Drag the slider to the left or right to decrease or increase logo size.
3. Site Title: The name of your site. Ideal length should not exceed 20 characters. If the site title is longer, it will be displayed in two (or more) lines.
4. Tagline: Tagline is a short description of the site, or simply a punchline of your business.
5. Title and Tagline Visibility: If Display Site Title and Tagline is checked, both Site Title and Tagline will be displayed.
6. Site Icon: Site icon will be displayed in a browser tab, bookmarks or in the WordPress mobile app. The icon should be squarely-shaped, and the recommended icon size is 512 x 512px.

Menus

The Customizer menu option allows the user to manage available menu locations, and add and remove menu items. Binar theme has two menu locations available – the Header menu, which is mostly used as the Primary menu, and the Social menu. Menus can be managed from Appearance -> Menus as well.

Content Options

The Content Options panel in the Binar WordPress theme documentation allows you to control the visibility of posts metadata. By enabling or disabling the options you can show or hide dates, categories, tags, and author for all posts.

Widgets

Widgets are useful extensions for content, which you can add to your sidebar or other widget areas. In the Widgets option in the Customizer, you can see available widgets area in the currently active theme.

Binar theme there is a regular, right side widget area and footer widget area. Widgets can be also managed from Appearance -> Widgets. Widgets appearance can be controlled with the Widget Visibility feature.

Homepage Settings

Homepage Settings in the Binar WordPress theme documentation work the same way Reading settings in Settings -> Reading does. Homepage settings allow you to set the theme to use static homepage, or to display the latest posts.

Binar Settings

Binar Settings is a panel where all theme-related settings are placed. In here, you can tweak how the homepage looks, main menu settings, single post…

1. Home Page Settings
2. Main Menu Settings
3. Single Post Settings
4. Archive Settings
5. Footer Settings
6. Font Settings
7. Color Settings

Home Page Settings

Binar theme has a flexible homepage and allows site admin to create the custom homepage. The homepage can be customized by adding content blocks. A content block can be:

• a slider,
• an archive or
• a call to action.

Theoretically speaking, an unlimited number of content blocks can be added to the homepage, but keep in mind that the more blocks you add, the longer it will take the page to load.

Content blocks can be easily rearranged by using the drag and drop method. The mouse cursor will turn into a four-way arrow, which indicates that the block can be moved.

After clicking on the Add new Element, a new block will be added. For the first step, select which content should be displayed.

Slider block

Slider the Binar WordPress theme documentation is using the featured image, title and metadata from posts.

1. Title: Title for the slider section.
2. Categories: Slider can display content from all categories, or just from the selected category.
3. Slider Style: The slider has three styles available: Film Strip, Classic and Horizontal. The Film Strip displays several smaller images, the Classic is a full-screen slider, while the Horizontal will scroll from top to bottom.
4. Number of posts: How many slides will be displayed in the slider.

Different slider types – Film Strip, Classic and Horizontal.

Archive block

The Archive is a block where the posts are displayed.

1. Title: Title for the archive section.
2. Categories: The Archive will display posts from all categories, or just from the selected category.
3. Archive style: An Archive block can display posts in different styles. Newspaper style will display the featured image on the left and content (title, metadata, and excerpt) on the right; Magazine-style will display the featured image on the top with the content, under the image, and in the List style, posts will be displayed in the grid with small images and just post titles.
4. Number of posts: How many posts will be displayed in the Archive section.

In the image above, you can see three archive styles – Newspaper, Magazine, and List.

Call to Action

Call to Action section is a static section in the Binar WordPress theme documentation. It will always display the same content. It’s usually used to attract site visitors and direct them to specific articles or such. Call to action is always displayed in the full width.

1. Title: Title for the section.
2. Call to Action Image: Selects the image that will be used as a cover image for the call to action section.
3. Call to action text: Short text that will be displayed.
4. Call to action link: Enter URL where the button in the call to action will link to.
5. Call to Action Button Text: Enter the text that will be displayed on the button.

Here is an example of how the finished call to action section looks like.

Main Menu Settings

The Main Menu can be displayed as a standard inline menu in the different positions – on the left, right or center in the header; or hidden behind the hamburger button. If the last option is selected, the menu trigger will appear on the left side in line with the logo, and the menu will slide in from the left.

Single Post Settings

Single Post Settings in the Binar WordPress theme documentation have two options where reading time can be displayed, and next/previous navigation for posts can be turned on or off.

Archive Settings

Archive Settings allow you to customize the appearance of content archive pages.

1. Archive Style: Archive can display posts in different styles. Newspaper style will display the featured image on the left and content (title, metadata, and excerpt) on the right; Magazine style will display the featured image on the top with the content under the image and, in List style, the posts will be displayed in the grid with small images and just post titles.
2. Display Category Post Count: If turned on, the number of posts in the category will be displayed on the category archive page.
3. Add rounded corners on buttons: If turned on, buttons “Read More” will have rounded corners.

Footer Settings

In the Footer Settings of the Binar WordPress theme documentation, you can manage and turn on the newsletter block and Instagram section, and set footer credits.

1. Display newsletter form in the pre-footer area: If turned on, the newsletter will be displayed in the pre-footer area. Settings for the newsletter are located in Settings -> MailChimp Setup.
2. Footer Copyright Text: Text that will be displayed in the footer, as footer credits. You can enter basic HTML elements to create links and stylize footer text.

Font Settings

The Font Settings panel is displayed only if the Kirki Framework plugin is installed and activated. Font Settings are used to set font families and weights for global text elements 一 content, headings, and navigation. Available fonts are from Google Fonts but without the extended variants. If you need assistance on how to integrate additional variants, please submit a support ticket.

Color Settings

Setting up colors and adding a personal touch to the theme is important when building a personal brand. The Color Settings panel allows you to set colors for various elements in the theme.

Available settings:

• Slider Horizontal Background Color: Color used for the elements with the horizontal slider.
• Background Color: Background color for the whole site.
• Accent Color:
• Headline Color: Color for all post titles.
• Paragraph/Text Color: Content text color.
• Link Color: Color used for links in the content and metadata (date, category, author).
• Secondary Background Color: Background color for the minor elements – e.g. slider background.
• Secondary Text Color: Default color for text that is displayed in the slider.

Useful CSS classes in the Binar WordPress theme documentation

Site Logo
To increase site logo:

.custom-logo-link {
max-width: 200px;
}

Main Navigation color and font size

.main-navigation ul.menu li.menu-item a {
font-size: 16px;
color: #fff;
}

.nav-menu li.menu-item a:hover {
color: #fff;
}

Page Title

.page h1.page-title {
font-size: 30px;
color: #fff;
}

Single Post Title

.post h1.entry-title {
font-size: 30px;
color: #fff;
}

Single Post Entry Text

.post .entry-content p {
font-size: 12px;
color: #fff;
}

Hide Search Icon

#big-search-trigger {
display: none;
}