Buler – Responsive Ecommerce WordPress Theme

September 9, 2013 by PremiumCoding - 6 Comments

Buler is a rugged and bold Ecommerce Theme for WordPress. It is very flexible, with a clean & crisp design and is suitable for any kind of store. It features a premium Page Builder which will make your life a lot easier when creating new Pages for your Site.

It is one of the most advanced WooCommerce Stores out there.

Theme comes with a Revolution Slider which is the best selling Premium WordPress Plugin for creation of Slideshows. It is one of the most advanced and highly customizable slideshows ever created. See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs. This is an extra $15 of value (price of the plugin)

Theme utilizes a unique and premium drag & drop IOS Slideshow which can be seen on the front page. It will give your store a fresh and unique look.

Buler has a convenient Administration panel which provides tons of options to manage and modify any aspect of the theme – it is well suited for both beginners with no coding knowledge and developers.

The Theme comes with a plethora of options so you can modify layout, styling, colors and fonts directly from within the backend of your WordPress Theme. You can choose any color you want to be the Theme’s leading color (you can see 8 examples in our preview).

The theme allows you to change all the main colors of the Theme (background color for titles, color of title fonts, color of hover elements, color of shadow used on text) along with the background. This means that you can change all the colors and looks of the theme with just a few clicks.

Four different blog pages will give you the opportunity to choose the style that you prefer. You can choose from a standard blog, a minimalistic blog and a blog designed to look like portfolio.

Unlimited home pages will allow you to present your site in a way suited for your company. Simply create any kind of Home Page with the Aqua Page Builder.


Buler Business WordPress Theme Features

  • 3 built in sliders (Revolution Slider, IOS Slider, Full width Slideshow and Nivo Slideshow)
  • 5 custom Widgets
  • Google Web Fonts
  • WPML Plugin support for extra languages
  • Video, Gallery, Audio, Standard and Link Posts Templates
  • Revolution Slider
  • Clean & Crisp Design
  • CSS3 Features and Animations
  • Detailed written help file
  • Full Width Google Maps Contact Page
  • +70 shorcodes with easy shortcode generator.
  • Use your custom logo and favicon icon.
  • 3 blog templates (standard, minimalistic and portfolio like)
  • 3 home page layouts (fullwidth slideshow, nivo slideshow, category home page and portfolio home page).
  • 3 portfolio page layouts (2,3,4 columns)
  • Unlimited Home Page Templates
  • 5 Post Templates (Standard, video, link, gallery, audio)
  • Filterable portfolio items.
  • Team Page


Aqua Page Builder is a powerful WordPress plugin that allows you to create an unlimited number of template variations for use in your WordPress themes. It follows the same user interface used by the Menus & Widgets admin pages – making you feel right at home with the UI.

Similar to the Widgets &amps Menus, Aqua Page Builder features the drag and drop interaction to build its templates.

Since its official release over 3 months ago, Aqua Page Builder plugin has received over 10000 downloads across the globe. If you don’t know what Aqua Page Builder (henceforth AQPB) is, then I’d recommend you to watch this short video which demonstrates some of its awesome features. http://www.screenr.com/iI87

Screenshot taken directly from our Theme is below:


Create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization (all content always readable for search engines). See the heaps of custom transitions/animations for each object on the page! Customize this slider with our convenient drag&drop backend to your very needs.

This plugin features tons of unique transition effects, an image preloader, video embedding, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

Some video Tutorials to help you get started with the Slideshow. Also please note that you will get the demo txt file to recreate the same Slideshow as in Live preview in seconds:



Buler is using an advanced AJAX loading of the Projects and Posts on the front page. If you click on one of the Projects it will open live on the Front Page. From there you can choose to either close it or read it in full details (user will then be taken to the single static page of the recent Project or Post). With this functionality a user can easily check all the Projects and recent Posts without leaving the Home Page.


Support is handled via our Envato support forum. It is designed in a way so only Envato users that have bought some of our plugins or Themes can register. You have to use the purchase code in the process. This has been causing some problems so please check the screenshots below to see where to get the purchase code.

Click on the image for a larger preview!

After you click on the License Certificate you will then be able to see the code in the file which will look like in the screenshot below:


There are two ways of installing the Theme for your WordPress installation.


Extract the themeforest package you recieved to any folder on your harddrive. The archive contains several folders. You will need to copy the “Buler” folder which contains the theme data to your wordpress installations theme folder on your server. Example of a destination folder: http://yourserver/wordpress/wp-content/themes/. The resulting file structure will look like this: http://yourserver/wordpress/wp-content/themes/Buler/. Next go to your WordPress installation admin panel to appearence/themes. You will see theBuler theme listed along with other themes. Press Activate and the theme will be active in a moment.


Go to Appearance/Themes and click on the tab Install Themes. Now click on the upload button and choose the zip called Buler.zip. After the Theme uploads to the server simply click on Activate and your brand new theme will be ready to use.

To make the theme look like our live preview and for it to function properly it should be installed in the following order:


1. Install the Buler WordPress Theme
2. Import Demo WordPress demo content (can be found on http://themesupport.premiumcoding.com)
3. Import Demo Content for the Revolution Slideshow


To make the theme look like our live preview and for it to function properly it should be installed in the following order:

  1. Install the Buler WordPress Theme
  2. Install Woocommerce plugin with the WooCommerce pages
  3. Install Revolution slider and our shortcode/builder plugin (found in the plugins directory in the files for download)
  4. Import Demo content (found on our support portal)
  5. Import Demo Settings for the Revolution Slider (found on our support portal)
  6. 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).


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 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.


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.


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.


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:


INSTALLATION OF WPML PLUGIN (for extra languages)

In case you also need WPML plugin (for translations into extra languages). Please note that you need this only if you want more then 1 language at once.
If you just need translations into another language (like German) and you will only have this language you can translate it from Theme’s admin.
1. Install WPML (sitepress-multilingual-cms), which can be found here http://wpml.org/
3. Install String translation plugin (wpml-string-translation), which can be found on the site http://wpml.org/
Now you are ready to start translating into extra languages.
How installation of languages is done can be read and learned at


We have prepared a XML file with demo content to help you get started with the Theme. Pay a visit to our support forum and look for the topic called Buler – Responsive Business WordPress Theme. Now download the appropriate zip file. Please note that we have put the demo content on our support forums with the sole purpose of preventing the pirates to get the demo content also.


First you will have to select which page is the front page. Go to Settings / Reading and check the Static Page Tab. Then select the home page you wish to have ( Home, Home nivo, etc.), this will be one of the Pages that you created with the Aqua Page Builder. So the procedure should be:

  1. 1. First add a page  (Pages / Add New) and choose the appropriate Template
  2. 2. Go to Settings / Reading and add the Static Page Tab that you just created

When going to Appearance / Menus you will see the structure of the templates navigation. You can easily edit menu labels, and move them using drag and drop. On the left column you have the possibility to add menu items using “custom links”, “pages” or “categories”. The newly added item will appear at the bottom of the menu structure and can be moved to its desired location. Make sure to always save the menu after making changes.

There are 4 menus that you have to set. Main menu, Top Navigation Menu, Footer menu, Scroll Menu and Responsive menu. Responsive menu will only be visible on small resolutions (like on mobile devices).


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


Buler supports the latest feature of WordPress that allows you to add specific posts that contain video, links or gallery. Videos and Gallery will appear on the front of the Blog page so visitors can run the video or look at the gallery without clicking on the post itself. Below are instructions of how to set it up:

Video Post – you have to add at the top of the post the following shortcode . The rest of the content is added in a standard way. Choose Video from the Format list on the right.

Link Post –  you have to add at the top of the post the following shortcode  [pmc_link]http://premiumcoding.com[/pmc_link]. The rest of the content is added in a standard way. Choose Link from the Format list on the right.

Audio Post – This post will enable you to have a small audio player in the blog and post. Simply select Audio post and input the link to the audio file and set the Title of the song.

Gallery Post – Gallery is added via WordPress native media upload form. Simply add the images and then insert the gallery into the post. Choose Gallery from the Format list on the right.

Standard Post – Choose Standard from the Format list on the right and add the content.


Pages are created with the Page Builder. Simply create the page you wish to have and then copy the page shortcode to the new Page you will create. Now simply add that Page to the menu and you are done. Follow the video tutorials above for more detailed instructions.



Here you can set which elements should be displayed. You can choose between quote text, featured items, recent products, featured products,  recent portfolios, recent posts and your major brands / advertisers. Also select how many recent posts and portfolio items you wish to display on the front page. You will notice that you can set this for either just posts, just portfolio items or both at the same time. Settings will be valid automatically for each setting accordingly, based on which template for the front page you select.


Here you can set the upper menu (mobile number, mail,…) . All other blocks are set in the Page Builder.


There are only two elements that can be set in main settings. Upload your Logo and favicon. You can use the upload form or simply enter the URL to the image. Here is also the place to enter the Google Analytics code to track your traffic. When you create a Google Analytics account you will get a code that you need to add to your website. Copy and paste it here under the Google Analytics text field.


Styling options will allow you to add and edit your background and select the Theme’s leading color.

The most important setting in the styling area is the Theme’s leading color. This is the color that will consistently repeat throughout the whole Theme. Simply enter the color in hexadecimal format or select it with the color picker.

Shadow Color is the color of the shadow used on fonts. If you have dark font on a light background color then a white shadow will look good. If you have white font on darker background then a black shadow will look good.

Shadow opacity defines how transparent the shadow is.


It can be a simple color (be sure to uncheck the Enable Background Image parameter if you wish to use only color).

Check Enable Background Image if you wish to use a custom background pattern instead of a plain color. After you have checked this settings simply click on the background pattern that you wish to use.

If none of the background patterns is suitable you can also upload your own. Simply upload your own pattern and the Theme will override the settings above and use your custom background pattern.


Slideshows are now set in the Page builder, but you can also create some here and then pull them There. Settings for IOS, Nivo and Full width Slideshows are described below. Settings for Revolution Slider which is the Premium Slider of the Theme are described in a section above.

Images for the main slideshow (ios slideshow, full width and nivo) are added and edited in this section. Recommended size of the images is 1650px width for Full width slideshow, height can be of any size since the slider is dynamic and will adjust the height accordingly (can be seen in live preview). Optimal images are those that are transparent which will also make the main color look great. Recommended size for Nivo Slideshow is 1180px x 400px and for IOS Slideshow it is 1180px X 420px.

Click on Add New Slide to start adding images to the Slideshow. Now set the title, content text and URL. Image can be uploaded via upload form or simply enter the URL to the image. After you have finished adding the images you can sort them with a convenient drag and drop feature. Simply click on the image tab and drag it to the desired position.

Images are now added and sorted and it is time to set the size and color of the fonts. Simply set the size and color with the color picker.

Background color defines the color of the text holder. Simply pick the desired color with the color picker.

Background transparency is a parameter that defines how transparent is the text holder (0 – invisible, 1 – fully visible).

Border color of text  holder defines the color of the thin border around the text holder. If you wish the border to be invisible simply set it to the same color as the text holder.

Transition Time defines how long the animation between images takes on transition. Time is set in miliseconds (default is 1000ms).

Time of Appearance defines how long each image is shown. Time is set in miliseconds (normal value is something between 5000ms and 10000 ms).

As learning is best from examples, we prepared HTML code for all our three examples for full width Slideshow on our support portal. You will find examples for the 4 CD’s that animates down and the 3 computer devices. Check out:


for all examples.


IOS Slideshow is a premium slideshow with drag and drop feature. Setting it up is simple. First go to theme’s options and choose Slider options. Add new slide and set up the title and upload the image to it. Recommended size of the images is 1180px X 420px. If you wish to add the description also (like in the first slide in our live preview) where it moves up on hover, you need to also add the Description. You can use HTML code so styling is up to you. Our example uses the following code:

Lorem ipsum dolor sit amet, consecte<br>
adipiscing elit. Fusce at justo eget lorem <br>
port titor tincidunt.<br>
<span style = “color:#98B827;font-weight:bold;”>Check the Product</span>


You can set all main typography settings in this section. First define the font family, size, color and style of the body font. All body font (content text, links, paragraphs,…) will now use this settings unless specified otherwise in style.css file.

Now define the font family and color for the headings. Sizes are defined for each heading seperately (H1, H2, H3 and H4, H5, H6).


Social options section allows you to add and edit your social icons. Currently there is support for Facebook, Twitter, Pinterest, Dribble and email. First you need to check which ones you want on your Theme. After that simply enter the links to your social profiles.


This is the page which will show everytime your visitor writes a wrong URL or if simply the page that should be on your website doesn’t exist. Enter the title and description text and you are ready to go.


Footer settings section allows you to enter a short sentence about copyright or some other notice.


Theme allows you to translate all the main aspects of the Theme (buttons, social icons,…). Simply enter your translation and save.


Buler comes with over 70 premade shortcodes. To add them while writing a post or a page simply click on the yellow folder icon that says Theme Shortcodes. To see all available shortcodes please check our live preview.


I’ve used the following images, icons or other resources as listed.


For support please visit our support portal and register as described above.