Table of content
1. Theme Installation
1.1. Installation via the WordPress admin panel
After logging in to the WordPress panel, enter Appearance > Themes > Add New and enter the name of the theme you are looking for, namely Boyo.
By installing the theme directly from the WordPress.org website, you can be sure that you are downloading the latest version of the template.
Then click Install and after a moment Activate. A list of recommended plugins will appear at the top of the screen, click Begin installing Plugins.
Select all by clicking on the square at the top, and then select Install from the drop down list and Apply . Now you have to activate the installed plugins – select all and select Activate from the list and then click Apply.
If you’re just starting out with blogging and do not know where to start, we’ve added ‘One click demo import’ button to make it easier. Thanks to this, you can import the entire demo along with the all settings.
2. Demo import
To import the Boyo’s demo, go to Appearance > Import Demo Data. Then select one of the two available demos and click Import, confirm your selection again and you’re done.
WordPress adds test data during the first installation.
If you have not added your posts in the WordPress panel yet and you have not changed WordPress settings, the test plugins will be added to the Top widget (ie at the very top of the page).
But do not worry, you can easily remove them by entering Appearance > Widgets > Top.
To do this, left-click on a specific plugin (all in turn), hold down the button and drop the plugin on the left.
2.1. Menu settings after importing a demo
When you import demo data, the demo menu will remain invisible. To view the menu, go to Appearance > Menus, select Menu from the drop-down list and click Select.
At the bottom of the page, select Primary, indicating that it is the main menu. Finally, save the changes by clicking on the Save Menu button.
By importing the demo you also import the menu settings, do not forget to adjust the menu to your needs.
In Boyo theme you have the option to add a custom menu at the bottom of the page.
If you do not know how to add a menu at the bottom of the page, read Custom menu settings here.
3. Setting up the Front Page
3.1. Blog & Archive Page Settings
In the Boyo theme on the home page (blog page), you can display posts in one or three columns.
Enter Appearance > Customize > Blog & Archive Pages and select the layout that suits you best from the drop down list.
Finally, click Publish button to publish the changes.
On the blog page, you can display post titles with a short description or only the title – if uncheck ‘Show excerpt on blog archive pages’.
3.2. Custom Logo
Please go to Appearance > Customize > Site Identity > Select logo
The best image height is 30px, then the logo will display correctly.
In the Site Identity section, you can also set a site icon, which is a small icon that is displayed at the top of the browser tab.
Here you can also set Site Title and Tagline.
By entering Appearance > Customize > Colors you can change the background color, main content background color and colors for each post type.
3.4. Highlighted posts
Highlighting Posts in Boyo theme is nothing but marking them like sticky in the WordPress panel. How to do it?
3.4.1. Display Sticky Posts
You can make a sticky post from the Quick Edit option under the post.
Please go to WordPress Dashboard > Posts > All Posts. Find post, go to Quick Edit option and Make this post sticky by checking the tick box > Update
or you can also open up the post page go to Visibility (the ‘Publish’ section in the Post editor on the right) click Edit and check Stick this post to the front page, click OK and Publish.
Of course, remember that if you want the image to be displayed, you must set it first. The image that is displayed on the page is nothing but the featured image.
3.4.2. Set up Featured Image
Featured Image represent the contents, mood or theme of a post. Featured Image is used in a number of areas like on the homepage, post page, etc.
Open the editor of the post (please go to > Posts > All Posts) then Open the post in which you want to display a unique custom header image (featured image).
Locate the Featured Image module on the right. Click Set Featured Image. Now You can upload your image or choose one from your Media Library.
Be sure to update your post when you’re finished.
4. Custom menu
The Boyo theme has 1 top menu.
To add a custom menu in the Boyo theme go to Appearance > Customize > Menus (or Appearance> Menus).
Click Create New Menu, give it a name and check Primary, if you want it to be the main top menu, click Next < Add Items < Publish.
In the demo you will also find the auxiliary menu placed in the Footer Widget. To add such a menu, enter Appearance > Customize > Menus (or Appearance> Menus).
Click Create New menu, give it a name and click Next < Add Items < Publish as you did before.
When your Menu is ready, you just have to put it in the bottom area of the site (exactly in the Footer Widget). To do this enter Appearance > Customize > Widgets > Footer < Add a Widget and select Navigation Menu from the list and select the appropriate Menu from the Select Menu field.
Here you can also go, if you want to edit the menu to make changes in it or finish by pressing the Publish button
4. Widgets Areas
The Boyo has 3 different widgets areas: Top, Bottom and Footer. You can add additional content to your website in 3 different, specially prepared areas.
To configure individual widgets areas please enter Appearance > Customize > Widgets (or Appearance > Widgets)
If you want to change the place of displaying a given plugin within the same area, right click on it, hold and move it.
In turn, if you want to move a given plugin to another widgets area, go to Appearance > Widgets and drag it to the place you want.
The Top Widget area has been specially prepared to display ads that you may need on your blog.
You can do this by adding Image widget or Custom HTML widget. Please go to Appearance > Customize > Widgets (or Appearance > Widgets) > Top > Add a Widget > Image or Custom HTML.
When you select Custom HTML in the Content field, enter:
<a href="link, where the image redirect after clicking"><img src="image URL" alt="alternate text" class="aligncenter"></a>
and enjoy your advertisement.
By adding class = “aligncenter” your image will be centered.
If you do not know where to find the image url, read further on point 4.1.1
4.1.1. Adding Banner / Image / Advertising
To add an advertisement or banner, first you must prepare an image. Be sure to read the article: Optimization of images in WordPress. How you should do it and why it is so important.
Then add the image to the Media Library in WordPress. Please go to Media > Library > Add New and Drop your image in the designated place or click Select File to select the image from your computer.
In order for the photo to appear on your website you need to know its url. You will find it by clicking Edit on the right side of the loaded photo
or go to Media > Library click on the photo you like – url address is on the right.
Copy the URL, then please go to Appearance > Customize > Widgets > Left Menu > Add a Widget > Custom HTML and enter the following in the body area:
<a href="link, where the image redirect after clicking"><img src="image URL" alt="alternate text"></a>
4.2. Bottom Widget
Bottom is an area where you can put different plugins. The first three are displayed side by side in three columns. Another plugins are displayed one below the other.
In our demo you will find here Custom HTML widget (About), Recent Posts and Tags.
4.3. Footer Widget
Footer widget area displays plugins in three columns. Here you will find the Navigation Menu widget with a specially prepared menus, as well as Custom HTML where you will find copyright info.
To add or change Text please go to Appearance > Customize > Widgets > Left Menu > Add a Widget > Custom HTML and write your text in the content area.
5. Displaying a capital letter in a post or page
To add a capital letter to your content, you need to open a post or page and go to Text tab editor. Text tab is used to writing in HTML code.
Then in the place where you want a large letter to appear, paste the following code:
<span class="first-letter">YOUR LETTER</span>
6. Supported plugins
The Boyo theme is ready for use with the following WordPress plugins:
- Jetpack by WordPress.com – tiled gallery display in the post.
- Contact Form 7 to display contact forms.
- One Click Demo Import – to import a demo.