Risotto Wordpress Theme

Documented by WEBNUS

Package Content

Upon downloading the package zip file from Themeforest, you'll have all files you need inside. Zip package contains the following files and folders:

  1. risotto-wp.zip contains Risotto theme
  2. risotto_child_theme.zip contains child theme
  3. DummyContent folder contains Demo Contents such as pages and posts and slider import file.
  4. UserGuide folder


To install this theme you must have a working version of WordPress already installed. For more information regarding installing the WordPress platform, please see the WordPress Codex.

Please note that we do not give support or any questions related on how to install and maintain wordpress. For any faulty installation that may cause your website or our theme malfunction you should refer to wordpress support forum. Alternatively you can get help from your web hosting.

If you’ve downloaded whole theme package, unzip it. There you will find the theme installation file , user manual, dummy content .xml file, license folder, etc.

Alternatively you can simply download the installable WordPress file.

When you are ready to install a theme, you must first upload the theme files and then activate the theme. For this purpose, unzip the file that you downloaded from themeforest and there you would find theme (risotto-wp.zip) file and upload it via wordpress installer. The theme files can be uploaded in two ways

FTP Upload

  1. Unzip the "risotto-wp.zip" file
  2. Upload the extracted "risotto-wp" theme folder into "/wp-content / themes/" in your wordpress installation
  3. For Activate the theme, Go to Appearance > Themes and activate the installed theme



WordPress Upload

  1. Navigate to Appearance > Themes
  2. Click Add New button and finnaly hit the Upload Theme
    Install Theme
  3. Click on Choose File and find the "risotto-wp.zip" file on your computer and click Install Now button
  4. The theme will be uploaded and installed
  5. For Activate the theme, Go to Appearance > Themes and activate the installed theme
Activate Theme

Note: Increasing the WordPress Memory Limit

  • Edit your wp-config.php file and enter something like:
    define('WP_MEMORY_LIMIT', '96M');
    WordPress memory can be different to the server – you need to set this regardless of server memory settings
  • If you have access to your PHP.ini file, change the line in PHP.ini If your line shows 32M try 64M:
    memory_limit = 64M ; Maximum amount of memory a script may consume (64MB)
  • If you don’t have access to PHP.ini try adding this to an .htaccess file:
    php_value memory_limit 64M
  • If none of the above works then talk to your host.
Please be informed that you should not upload the whole item you have downloaded from Themeforest as you will get an error of broken stylesheet file. Instead locate the risotto-wp.zip file inside the main file you have downloaded.
While installing your theme through wordpress admin, you may encounter an error message saying “are sure you want to do this?” This is mainly due to your hosting php settings. In some hosting the default value for max_upload_limit left default which is 2mb. To solve this problem you should either increase your maximum upload size (to 50mb) on your hosting admin panel or ask your host to do it for you if you do not have the privilege to alter your server php settings. This is a very common request and they should be able to help you out. Once the limit is increased you can re-try the install and you’ll be all good to go.

Plug-ins Install

Note: Demo content has created by visual composer. Please install and active the visual composer plug-in before import demo data

After theme activation it is advised to install default theme plugins:

  1. Contact Form 7 (Required)
  2. Visual Composer (Required)
  3. WP PageNavi (Required)
  4. Webnus Shortcodes (Required)
  5. Wordpress Importer (Required)
  6. Essential Grid
  7. Envato Wordpress Toolkit
  8. Slider Revolution
  9. Social Count Plus
  10. Social MetricsTracker
  11. The Event Calender
  12. Woocmmerce

Install Plug-ins 1

Click on Begin installing plugins and Simply select all plugins and install them. Then activate the plugins with help of Bulk action:

Install Plug-ins 2

Install Plug-ins Manually

If you like to install plug-ins manually, Find these plug-ins in risotto-wp\inc\plugins folder

Setting Up as Demo Site (Demo Data Install)

Note1: Demo content has created by plug-ins. Please active all required plugins before importing demo data.

Note2: The best way to learn more about how pages are built in our demo is to install theme in a clean panel (fresh WordPress and latest version of the theme) and import all demos via "Webnus Importer". This will import posts, pages, widgets, menus, theme options and so on.

Read below instructions:

  1. Go to appearance > Webnus Importer.
  2. Choose your desired template.
  3. Click on Import Demo data
  • Setup Demo Slider
    1. Go to Appearance > Install Plugins and active revolution slider
    2. Go to Revolution sliders -> click on “Import Slider” -> click on “Choose File”
    3. Go to DummyContent folder which is inside the theme package and select risotto-revslider-2.zip ( or risotto-rev1.zip ) and then click on “Import Slider”
    4. Enter to the imported slider
    5. go to slider settings -> post category
    6. Select your category

  • Setting up the Sliders

    Risotto includes one slider, the Revolution Slider. This slider includes a plug-in that is fully integrated into the Risotto. Please install Revolution Slider; we have an individual section below for Revolution Slider that shows how to use it.

    For add a slider, you must use visual composer. Follow these steps below to add a slider in your pages.
    1. Click Add row in Visual Composer and then click on pencil Icon. Edit Row window will be open,
    2. For show full width slider, select FullWidth Row in Select Row Type list.
    3. Click on Plus sign in row
    4. Click on Add Element and select one of the slider that you want(for example: Revolution Slider)
    5. Select a slider from Revolution Slider ID list.

    Visual Page Builder

    Visual Composer Video Tutorials

    Risotto comes with Visual Page Builder. This software allows you to forget about shortcodes and create most complex layouts within minutes without writing a single line of code!

    Our Visual Page Builder is based on widely popular Visual Composer by mixey. It has very simple and intuitive interface, but before getting started with building layouts, you may find it useful to get accustomed with Visual Composer documentation:
     Visual Composer Video Tutorials

    In the editor mode you'll have "Add element" button, which you should click or drag to the working canvas, to add content block or row to your page. Clicking the "Add element" button will show the content element selection menu. Content blocks are divided into categories so you can filter. Alternatively you can type the shortcode name to filter down the items instead of search them visually.

    To  start creating new layout click “Visual Composer” button on the top right of WYSIWYG (text editor):

    WYSIWYG editor change to Visual Composer canvas. You can work with it as you do with regular Visual Composer.

    After clicking “Add element” button, you’ll notice vast set of interface elements (shortcodes) developed exclusively for your theme . Their interface is build on same principles as standard Visual Composer shortcodes. Therefore if you’re already familiar with Visual Composer, working with our shortcodes will be very simple for you!

    Elements Blocks :

    Below image shows the list of all shortcodes that you can use in Risotto. You can use category filter and search element name field to find your shortcode much quickly.


    Rows are used to divide your page into the logic blocks with columns, columns later will hold your content blocks. Rows can be divided into the layouts (eg. 1/2 + 1/2, 1/3 + 1/3 + 1/3, and so on). Your page can have unlimited number of rows. To change row's position, click and drag row's drag handler (top left row's corner) and drag row around (vertical axis). Please note that you can edit a row property to enable full width option.

    Introducing Row based on below screenshot :
    1. Delete button to delete the row and the all elements inside it.
    2. Clone Button to dublicate the row and all its columns and elements
    3. Edit button to give it custom class name and enable fullwidth mode.
    4. Dragger button to move vertical wise.
    5. Layout section to divide the row into differnt column width combinations.
    6. Column Edit button inside this row
    7. Plus button will bring up all elements pop up in order for you to choose which element to drop into this column.

    Columns are part of the row and they hold your content elements inside them. Columns can be reordered. Click and drag column around (horizontal axis). That way you can group elements in logical groups and then drag them around with your mouse (to re-position).

    Content Elements

    This is a list of available content elements that can be placed inside of the columns. Think of them as bricks. With those bricks you are building your layout. Most of the content elements have options, to set them click pencil icon. To save changes click save button.

    1. Delete Button to delete the shortcode
    2. Clone button
    3. Edit button to view all of this shortcode options
    4. Shortcode Name
    Row Types in Visual Composer
    1. Click on Add element Button and select Row, then click on pencil icon.
    2. In Edit Row window, you can select a row type depends on you needs.
    3. FullWidth Row : This type is suitable for Insert Revolution Slider on it
    4. Blox : This type is suitable for rows that you need to set Background Image or Background Color, specific Height or set a custom class
    5. Parallax : This type is suitable for rows with Parallax functionality. In this case you can set Background Image and Parallax scroll speed for better result
    6. ProccesBox : This type is necessary for insert Webnus Process Item on it. In this case you can set icon, Title and Process Count
    7. Video Background : This type is necessary for Video Background. In this case you can set Background Video, Video Type and Foreground Pattern.
    8. MaxSlider : In this row type, you can create Full Width Slider at the top of the page.

    Setting up Pages

    Page Options

    Transparent header: By choosing this option, Background will be removed and content will be visible behind the header.

    Hide header at start: By choosing this option, Header will be hidden and will be visible by scroll.

    Page title bar: By creating any page in wordpress, you need it to name it. it's your page title name. by default it will be shown in pages. if you like no to show it simply choose "Hide" from this section.

    Sidebar Position: Sidebar is basically a vertical column provided by a theme for displaying information other than the main content of the web page. Themes usually provide at least one sidebar at the left or right of the content. Sidebars usually contain widgets that an administrator of the site can customize.You can set sidebar position in Page Options > Sidebar Position

    Setting up Home Page

    Once you have created your home page, you need to select it to show up as the home page. To do this, follow the steps below.

    1. Navigate to Settings > Reading
    2. Select A Static Page for Front Page Displays
    3. Select your new home page for the Front Page

    Setting up Blog Page

    To setup your blog page, create a new page and name it anything that you want. Make sure the page Template is set to Default Template in the Template section of Page Attributes Box on the right hand side of the page editor.

    Set Blog Options

    To select a specific blog page layout design, simply follow the steps below

    • Navigate to Theme Options and click on the Blog Options Tab
    • In this tab you can configure anything about blog an finally hit save changes
    • Finally Navigate to Settings > Reading and select your blog page name for the Posts Page
    Create posts

    After your Blog page is made, you have to create posts to show up on the blog page. Follow the steps below to create a blog post.

    • All of your blog posts are made in the Posts section of your wordpress admin. Click on Posts to open the section.
    • At the top of the posts page, click on Add New to make a new post. Create a title and insert your post content in the editing field
    • On the right hand side of the post page is the Categories box. To make a new Category, click + Add New Category and give it a name. You can have as many as you want. To apply a Category to a post, simply check the box next to the Category name.
    • You can also apply Tags to a post. The Tag box is below the Category box. Simply insert your tags, separate multiple tags with commas
    • To set a Featured Image. Click the Featured Image box and select an image from the media window and click Use As Featured Image
    • To set a Video. Enter video embedded code in Video post section and Click Save
    • To add a sidebar you must first create the sidebar under Appearance > Sidebars. And then select the sidebar you would like to display on this page.
    • Once you have everything you want selected, click Publish and your post will show up on your blog page

    Theme Options

    Risotto has an advanced Theme Options panel that is loaded with options. There are numerous options to go over in these docs but please take some time and navigate through each tab. Go to Appearance > Theme Options and take a look. We've organized them into logical sets and have given  descriptions for items that need it, most things are self explanatory. Be sure to hit Save Changes to save your settings once you are done.

    You can also backup your theme options, click on the Import/Export tab and copy the data inside the Transfer Theme Options Data field.

    In general section you will see Layout with two options: wide and boxed. Wide is good for full screen mode and boxed will not stretch pages.

    Tips: if you like to use background image, you need to use boxed mode. Choosing wide mode will cover the selected image as background and you won’t be able to see any BG image.

    After that, you will see custom favicon, a favicon also known as a Web site icon, tab icon or bookmark icon for your website. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab. simply click on browse and select your own.
    if you keep surfing the General Tab, you will find more options like slogan and contact information.

    Tips: if you are going to use your own logo, the written slogan will be disappeared. So make your logo image by slogan included in it if you need one for your business. The contact information in this tab will be shown later in Contact us page.

    If you like to put your logo in your pages, this is the right place. Simply browse and select you logo as image, a window will appear that will let you browse from computer or library. Then you may want to add some info like "title", "description" and so on, finally click on "insert into post" button.

    Tip: for Retina issue choose a logo by double size (height and width) of what you like to see in browsers, and then make it smaller by changing the “Logo Width”. In other words, upload 2x size of your logo for Retina purpose and it will be big for your website, to make it in your desirable size make it as small as you like by changing the Logo Width.


    To access typography settings please go to Theme Options> Typography
    Here you have access to whatever in relation with font such as font type, font size and font color.

    How to purchase and use Typekit fonts :

    1. Go to this address https://typekit.com/fonts
    2. click on "creat new kit"
    3. A window will open, insert your name and domain(s)*
    4. You must copy only "Typekit Kid ID" as shown in green field
    5. Go to “Theme Options > Typography” in your WordPress admin panel and then copy the id in "Typekit Kit Id" field
    6. Copy your desired font names from www.typekit.com/fonts/ and paste them in "Typekit Font Family"
    7. And finally go to “Select Font” and select your fonts.



    One of great features of Risotto is that you can make an online shop with it.

    Risotto is fully compatible with latest version of Woocommerce Plugin. We added required stylings to fit the design, Checkout section in header toolbar, and all required confiq codes to make it seamless with Risotto. If you dont need Woocommerce simply dont install it and all the features, codes and anything required for woocommerce will not be loaded and interfered. Vice versa, if you need to set up woocommerce just install woocommerce like you do for other plugins and thats all about it. you dont need to do anything else. There are couple of options in Theme Options > Woocommerce

    Woocommerce Documentation

    Setting up Widgets

    WordPress Widgets add content and features to your Sidebars and Footer. Examples are the default widgets that come with WordPress; for example post categories, tag clouds, navigation, search, etc. Widgets require no code experience or expertise. They can be added, removed, and rearranged on the WordPress Administration Appearance > Widgets panel.
    WordPress Widgets add content and features to your Sidebars. Examples are the default widgets that come with WordPress; for post categories, tag clouds, navigation, search, etc. Plugins will often add their own widgets.

    How to use widgets:
    1. Go to Appearance > Widgets.
    2. Choose a Widget and drag it to the sidebar where you wish it to appear. The widget areas designated
    3. Once you dropped the widget to widget areas, WordPress automatically updates the Theme and it will appear in its area.
    4. Preview the site. and look for the specified area you dropped your sidebar. for example if you used "archive widget area" you should look for it in archive loop.
    5. Return to the Widgets Panel to continue adding Widgets. Risotto has 6 custom widgets as designated below
    6. To arrange the Widgets within the sidebar or Widget area, click and drag it into place.
    7. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget's interface.
    8. To save the Widget's customization, click Save.
    9. To remove the Widget, click Remove or Delete.

    Webnus Widgets

    Flickr Photo Stream

    Please insert below code in flickr widget then change flickr id:
    Change current attrubition of user to your's ID (user=00000000@N00).

    Please visit below link for capture your ID:

    Flickr Photo Stream

    Theme Extras

    How to update the Theme

    There are two ways to update:

    • Using Envato WordPress Toolkit Plugin:
      1. If you have not installed it yet go to Appearance > Install Plugins and install and activate this plugin
      2. It will need Envato Market API which can be found in API Keys from themeforest.net > Settings > Api API Keys and Generate an API key
      3. From left sidebar click on Envato Toolkit
      4. Type your username and fill the API key that you just retrieved from themeforest.net and save settings.
      5. Once the page refreshed, you should see the list of themes you have purchased.
      6. Once clicked, theme will be updated to the most recent version.
      How To Automatically Update Your Themeforest WordPress Theme
    • Via host (if you are experienced in working with host, this method is recommended):
      1. Please login to your Themeforest account and from "download tab", download the latest version of the theme.
      2. If you have made changes in theme main files such as php, js, css then save them in another place to apply them after uploading new version of the theme.
      3. If you have not changed anything as mentioned above, it's OK and nothing will be gone.
      4. To update, please go to wp-content/themes and remove old theme then copy new downloaded file (do not replace).
      5. It's always a good idea to get a backup of your theme folder in case you need to come back to previous version.


    1. After updating, please delete installed plug-ins and re-install them via Appearance> Install Plug-ins and it is strongly recommended to delete plug-ins one by one to avoid conflict in plug-in uninstaller
    2. If you have made changes in theme main files such as php, js, css then save them in another place to apply them after uploading new version of the theme.
    3. if your site is live and users are visiting your pages please make your site in “coming soon mode” by using maintenance mode plugins such as "WP Maintenance Mode" then go to Appearance> Themes and deactivate the theme and activate one of WordPress default themes.

    How to Translate

    We provide translation files for you to translate the theme into your language. The translation files default.mo and default.po are located in the languages folder inside your package. To translate the theme into your language, follow the steps below

    • Edit the .po file using POEdit (you can also use qTranslate Plus or WPML plugin)
    • Use the translation field to make replacements
    • From the file menu, save file with your language name it, for example: es_ES.po It will generate both a .po and .mo file for your translation.
    • Next edit wp-config.php located in the root folder of wordpress and define the WPLANG prefix with your language name which should be similar to the translation file name.
    • Then go to your server via FTP, navigate to the theme folder and find the languages folder, its located at wp-content > themes > blogstar-wp > languages
    • Upload the language files in the languages folder, and then you're done!

    Please Note: If you are interested to help us to translate the theme to your native language please let us know by sending an email to webnus.net@gmail.com

    Theme Modifications

    The theme comes with a backend that allows for heavy style customization (colors, fonts, etc).
    However often times this is not enough, and you users want to add their own CSS Rules to the theme. We heavily recommend to use a so called Child Theme for that. Using a Child theme allows you to update the theme and at the same time you also make sure that you will never lose any of your modifications to a theme update.

    Using a child theme is simple: Just install it, as well as the original "Risotto" Theme on your server. Instead of activating the Original Theme you activate the Child theme. Now if you want to add any custom css to your theme use the child themes style.css. If you want to add any custom php functions use the child themes functions.php.

    Now if you update the original Theme with the latest Version, your child theme will stay in place with all your customizations.

    Inspect element

    If you want to make changes to design then you can use Inspect Tool to see the source code of your website and the CSS rules applied to it.  
    To enable it right click and from the pop-up menu select Inspect Element

    For more details please visit Chrome inspect element or Firefox inspect element. Meanwhile searching in google about it will be helpful.

    For example we try to change bottom gray border color in footer. please watch the below video tutorial:

    Theme Supplement

    Plug-ins Documentation

    You can find related documentations for each plugins here:


    We have used the following images, icons and fonts as listed: