How to change certain image sizes in different parts of the Theme
Image sizes are defined at the start of the file functions.php. Open it and change the size, the example of one line is:
add_image_size( ‘shop’, 280 ,180, true );
After you do that you now need to Regenerate Thumbnails at Tools – > Regenerate thumbnails. If you don’t have the neccessary plugin yet, be sure to download the plugin Regenerate Thumbnails
Revolution Slider Demo Content (Buler Theme)
Revolution Slider Demo Content DOWNLOAD
Demo Content (Buler)
Demo WP content DOWNLOAD.
Image in single product gets cut off. What to do?
There are two options on how to solve this:
1. simply use the images that have the aspect ratio similar to 700:600 (1.4:1), which is the size the Theme uses by default.
2. change the size to the one you want. To do that, open the file called functions.php. At the start of the file you will see this line:
add_image_size( ‘productBig’, 700,600, true );
change the dimensions to the want you want. After you have saved the file go to Tools -> Regenarate thumbnails. You have to install this plugin first also:
How to make the Theme look like live preview?
To make the theme look like our live preview and for it to function properly it should be installed in the following order:
- Install the Buler WordPress Theme
- Install Woocommerce plugin with the WooCommerce pages
- Install Revolution slider and our shortcode/builder plugin (found in the plugins directory in the files for download)
- Import Demo content (found on our support portal)
- Import Demo Settings for the Revolution Slider (found on our support portal)
- Setting up the Home Page
These are the basic steps, which I will explain further below.
For Theme installation please see this video tutorial. It explains how to install a new WordPress Theme from a zip file, just in case of Buler theme, the file you need to install is buler.zip (this is the Theme).
INSTALLATION OF WOOCOMMERCE AND IT’S PAGES
Next step is crucial if you want the demo content to install properly later on. You can search for WooCommerce plugin in the plugins section or you can download it directly from their website:
You can also find and install the plugin via the Add new plugin directly from your wordpress dashboard. Search for the term WooCommerce and you will get the following results:
Install the first plugin (WooCommerce – excelling eCommerce). After you install and activate the package, you will be prompted to install WooCommerce pages also (see the screenshot below):
Install the WooCommerce Pages so importing of demo content and setting up the pages will work properly later on.
REVOLUTION SLIDER INSTALLATION
Revolution slider is the premium plugin that comes with the theme. You can find it in the plugins directory of the package you installed from Themeforest. Install it via the Add new Plugin. After the plugin is installed, you will notice a new tab in the left menu of the WordPress Dashboard (at the bottom of it). We will return to the Slider in step 5 where the settings and demo content will be installed.
IMPORTING OF THE DEMO CONTENT
This is where the exciting stuff happens. For demo content import we first need to install a plugin called WordPress Importer. Go to Tools -> Import and select WordPress. You will be prompted to install a plugin. After the plugin is installed simply select the XML file that you downloaded (unzip it first) from our portal and you are done (with all attachments). If all works smoothly then the Theme is almost ready to look like live preview.
IMPORT OF DEMO SETTINGS FOR REVOLUTION SLIDER
It’s time to import the Settings for the Revolution Slider. Click the Revolution Slider Tab at the bottom of the WordPress Dashboard. Now click the Import Slider button. Now select the TXT file that you downloaded from our support portal (unzip it first) and click OK. The slider will be added with all the Slides and will be ready to use.
SETTING UP THE HOME PAGE
Go to Settings / Reading in your WordPress Dashboard and add the Static Page from the list of Pages (if you imported all the content properly there should be several pages, just like in our live demo).
For more information please check our support portal at:
What are the recommended image sizes for Buler
Theme uses different image placeholders for different parts of the site . Below is a short list of recommended sizes (used in the live preview).
Revolution Slideshow (full width): 1700px X 500px
Revolution Slideshow (boxed): 1180px X 520px
IOS Slideshow: 1180px X 500px
Nivo Slideshow: 1180px X520px
Blog Posts: 800px x 390px
Single Portfolio Post: 700px wide (can be of any height)
Sponsors Images: 235px x 132 px
Product images: 700px x600px
Some of the Blocks did not import, what to do?
In some cases it will happen, that some of the blocks might not import. Go to Page builder and simply add those blocks to the Page you have for Home, or any other Page you want those blocks added to.
Please note that for blocks like recent Portfolio items or Recent Posts to properly appear, you need to have some Posts and Portfolio items on your WordPress.
How to completely remove responsive mode?
open style_options.php in css directory and then delete the responsive css part (from line around 420 onwards to around line 960, you will see the commented header which will tell you where the responsive queries start). Don’t delete the closing php tag:
1. <!--?php } ?-->
After you have saved this file, go to theme’s options and save the settings twice so a new file options.css is written (this is the file that gets the css from theme’s options).
How to add the Mega Menu
To add the big mega menu please follow these steps:
1. First add the Shop Page to be the most upper menu. Under CSS Classes add pmcbig
2. Now add a custom link to be the main menu for the Categories part. URL should be #, CSS class need to be pmcmenutitle.
3. Now add the product categories that you want under the Categories. The menu should now look like the image below:
4. For price range first add the custom link in the same way as for the categories.
5. Now add a custom link for each price list. Use a link like this, only that it points to your domain: http://mercor.premiumcoding.com/product-category/jewelry?min_price=0&max_price=1000
This link will add a price list for products between $0 and $1000. The menu should look like the image below:
6. To add the product with the big image in the menu, again add the custom link where the URL is the link to that product. CSS class needs to be menufeautured. Navigation Label should look like this (with your own link):
<div> <span>Featured</span> <img src=”http://mercor.premiumcoding.com/wp-content/uploads/2012/09/Golden-ring-with-diamond-isolated-on-the-white-1.jpg” alt=”menu image”/> <span>$2,449.99</span> </div>
So the menu for the product should look like the image below:
If you don’t see the CSS Classes you need to turn them on in Screen Options. Check the screen below for a better understanding:
- How to set up the Video Post properly
- How to add images to make a Slideshow in Single Portfolio or Post
How to increase number of posts in blog sorting page from 50 to a higher number
First open the file in admin/theme-options.php and look for following code (around line 100):$number_entries = array("Select a number:","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","25",
replace this line with the following:$number_entries = array("Select a number:","1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","25",
you can add more if you want.
What to do if some characters don’t show up (like Greek, Cyrillic,…)
you will have to add embeding of characters family to google fonts. Open scripts.php in includes directory and look for font embeding (at the end of the file). Replace the two existing lines:wp_register_style('googleFont', 'http://fonts.googleapis.com/css?family='.$data['heading_font']['face'] ,'',NULL);
wp_register_style('googleFontbody', 'http://fonts.googleapis.com/css?family='.$data['body_font']['face'] ,'',NULL);
withwp_register_style('googleFontbody', 'http://fonts.googleapis.com/css?family='.$data['body_font']['face'].'&subset=latin,greek,greek-ex' ,'',NULL);
wp_register_style('googleFont', 'http://fonts.googleapis.com/css?family='.$data['heading_font']['face'].'&subset=latin,greek,greek-ex' ,'',NULL);
Example is for greek fonts. Check out how to properly write the lines for other font sets on Google Web Font Library Quick Usage
Can’t see theme admin panel.
First try reseting theme options. If this don’t work send us mail with your login details.
How to add your own background patterns
The best way to add your own background patterns is to copy them with FTP to the directory /images/bg of your theme’s directory so full path would look something like: wp-content/themes/themeName/images/bg. After you have done so, refresh the page where your admin is (F5). This is a simple refresh of the page and not reset of the theme’s options.
You can now see your newly added background pattern in Theme’s Options -> Styling Options -> Background Pattern. This is the best way of adding the background pattern since you can add more patterns.
How to translate Page Navigation on Blog
If you wish to translate the pagination on the blog page (for instance Page 1 of 2) you have to edit the file called wp-pagenavi.php which can be found in /includes directory. Open the file and go to line 114 and replace the line$pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), $pagenavi_options['pages_text']);
with$pages_text = str_replace("%CURRENT_PAGE%", number_format_i18n($paged), ('Test %CURRENT_PAGE% test %TOTAL_PAGES%'));
Now simply replace the test words with your own.
How to add new Google font
Open /admin/admin-interface.php and find$faces = array('arial'=>'Arial',
(around line 1246) .
Then just add your font so this code look like :$faces = array('arial'=>'Arial',
‘google font name’ => ‘admin display name’,
How to check which element to apply styling to with Google Inspect
Many users will want to change certain aspects of theme (from headings to buttons, logo position, etc.). The hardest part when doing this is finding out which class you have to edit in style.css. This is where Google Inspect comes to the rescue. Other browsers have similar tools but in our opinion Google Inspect is the most convenient one.
Open Google Chrome and position your mouse over the element that you wish to change. Right click on your mouse and then click Inspect. A window will open showing the location of the class in style.css. You can now play a bit and change some parameters on the fly to see how they would look (remember that this is only a virtual change and that you will have to edit and save style.css for changes to take affect). After you are happy with the changes you can now apply them to style.css and since you now know the exact line where the class is it should be a breeze.
For editing style.css we recommend Notepad++, it is lightweight, will color your code and number the lines of the file.
How to translate your Theme
Theme allows you to translate all the main aspects of the Theme (buttons, social icons,…). Go to translation tab of your Theme’s administration and find the word you would like to translate. After that simply enter your translation and save.
Theme options are overriding style.css
This is how it is supposed to be. The theme uses two styling files. General styling is done with style.css but options that are defined through administration are saved to a file called options.css that can be found in CSS directory. To change these settings you have to edit the file called style_options.php. You will find a similar structure there so should be no problem if you already edited style.css.
Edit links in the footer Menu
Go to Appearance -> Menus and click on the Footer menu. You can now add or delete the links in it.
Theme settings are not saving
On some installations you have to save settings twice in order for them to take affect. So simply save twice and check if new settings are applied