Feb. 21, 2019
1. Install Your Cafe WordPress Theme
In the first 3. steps of your Cafe WordPress Theme documentation, you will see how to get it started properly. When you purchase our Cafe WordPress theme you will receive an e-mail with a link for download, once you made the download you will have a big folder in.ZIP format (This is the case you have purchased our themes on the following marketplaces; Mojo-Marketplace / Creative-Market / Visualmodo Store) with something like 9 MB of size on the marketplaces with all the theme content called ‘ThemeMaster.zip’, on this folder you will see the following files; Demo content, Theme files, License and Documentation. Please don’t try to install this ThemeMaster.zip file on your WordPress, if you try you will see an error message because it’s the row-folder.
To install your theme you need to open this big folder ThemeMaster.zip with 9mb of size, found and open a file called ‘Theme-Files” and in this file you will see 2 files, theme.zip with something like 7.4.mb of size in .zip format and theme-child .zip, you need to extract/remove / unzip the theme.zip with 7.4. All you need to do is click on this file and drag it and drop this file on your desktop area, it will unzip the theme and you will get the ready-to-install file. Please have a look at this video tutorial.
After this, you need to login on your WordPress admin area and go to ‘Appearance’ Themes, Add new, Upload Theme, Select file, select the theme.zip file that you have unzipped before and have something like 7.4 MB of size, click on the upload theme and active the theme. Another way to install your theme is using the FTP for it.
This guide can help you with your cafe WordPress theme installation process in the case you have some issue https://visualmodo.com/knowledgebase/theme-missing-style-css-stylesheet/
In the case your purchase our theme on Mojo-Marketplace you will receive different files. The 4 following files (Demo Data / Main Files / Help File / Child Theme) already separated and unzipped (You will not receive the ThemeMaster.zip with all content together on mojo-marketplace) and all you will need to do is download the ‘Main Files’ This is the ready to upload on WordPress file and all you need to do after download this ‘Main Files’ folder is go to your WordPress Dashboard > Appearance > Themes > Add New > Upload Theme > Select the ‘ThemeName.zip’ downloaded folder and upload it on your site and active your theme. For MOJO download and install follow this video.
In the case you don’t want to install your Cafe WordPress theme or have any difficulty you are FREE to contact our support on https://visualmodo.com/account/login/ or e-mail us on email@example.com and ask one of our support crew to enter on your site and install your cafe WordPress theme for you, it’s easy, fast and free for all the Visualmodo clients. Just make sure you send us on this contact the right info, we will need your login information/site URL and a print-screen / screenshot from your theme purchase with the date.
2. Install Your WordPress Plugins
All the Visualmodo clients gain third-party developers WordPress plugins on the theme. As soon as you active your theme on your WordPress site you will see a message in the top of your back-end screen asking to you start to install your plugins, To install if all you need to do is click on the button for it, In the case you don’t want to use some plugin you just can disable the message because all our theme work without any plugin however you are free to use it in the case you want to. Another way to upload your plugins is going on: WP DASHBOARD > VISUALMODO > INSTALL PLUGINS as is shown on the images below.
Again, in the case you don’t want to install your plugins and have any difficulty You area FREE to contact our support on https://visualmodo.com/account/login/ or e-mail us on firstname.lastname@example.org and ask one of our support crew to enter on your site and install it for you, it’s easy, fast and free For all the Visualmodo clients. Just make sure you send us on this contact the right info, we will need your login information/site URL and a print-screen / screenshot from your theme purchase with the date.
One Click Demo Import – One of the most useful features that a WordPress theme can have. You will love to start the website development process at the same starting point as the wonderful theme demo pages, so you can quickly design the website of your dreams. You can fully use our carefully created demo content to start with a ready-to-go site with 1-click only! NOTE: To this function properly work please make sure you install the ‘1-click import’ plugin and in addition, have your parent theme active (Only activate the child-theme after demo importing process).
All you need to do after install the plugin (The required plugins installer will appear as a top WordPress site dashboard message to easily install process with 1-click also as soon as you active your Visualmodo WordPress theme) navigate to the WP dashboard > Appearance > Visualmodo Demo < and click on it to import the entire demo contact and have a fully equipped site from the beginning. Important notes: After you click on the ‘Import Demo’ button the process can take a couple of minutes according to the host performance.
Important notes: After you click on the ‘Import Demo’ button the process can take a couple of minutes according to the host performance. The one click demo content import feature can’t import icons or the slider build in revolution slider once this is plugins features. To import both of these contents simply follow this other tutorial on our site help center area:
3. Theme Options ( Visualmodo Panel)
In this area of your Cafe WordPress theme, you will be able to add your logos, change the fonts, place some custom codes, change your site global layout and change your footer text header options and all your site layout using our cafe wordpress theme. This area works in the same way as ‘Customize’ under ‘Appearance’ tab normally used on free WordPress themes however the theme options have much more tools.
3.1 Header Options
In this area of your theme option, you will completely edit your header. In this are you will be able to upload your company logo place icons on your menu like cart icon for login info and size/layout options settings.
Vertical / Horizontal Menu Navigation Style
To change your site menu navigation style from horizontal to vertical you just need to go to your WordPress dashboard > Theme Options > Header > select ‘Vertical’ and save your changes. your menu set as ‘primary menu’ under wp – appearance – menus – will be placed as vertical as is showed on http://theme.visualmodo.com/cafe or you can choose a horizontal navigation style just like this video tutorial shows.
In this area of your theme options, you will be able to enable another area that will b showed over of your header navigation menu area and choose columns, in this columns you will be able to apply widgets, a top menu widget, texts or social icons for example. To do it set the option as ON and choose your columns layout, after that save your changes and go to your wp Appearance > Widgets > and apply widgets in the tabs called ‘Top Header’.
You also can edit your navigation position, align your menu and logo in the way you like and better fits for your design project. Please see the attached image below.
In this area of your theme options panel, you will be able to edit your WordPress Site navigation header container style, container size/height, and width. You also can add responsive menu collapse options to make your menu to close for responsive menu style (hamburger) in the size you want. Another feature of this section is the possibility to make your menu container to be set as full-width under ‘Boxed or Stretched Style*’.
3.1.3 Brand (Logo)
In this area of your theme options panel you will be able to upload your website header logo and all the logo variations, a light logo version, a dark logo version, a default logo, and a mobile logo, we recommend you to upload logo always in .png format and our Visualmodo logo have 225 x 48px and the mobile logo has 48 x 24px. So, your logo upload sets need to follow your menu design color style and you are free to upload any color you want. You also can upload a retina logo and in addition, combine a logo image with text (You can type the text like in the image above or leave the text field black, and in this case, the text will be the site title set on WP > Dashboard > Settings > General).
3.1.4 Alert Message
In this area of your theme options panel, you will be able to upload your website header a top header alert message that can be used to show to your users and views some message like promotion calls or some important notice. You can enable or disable this area if you want to use you can add a background color or image, the spacing, and the text content. You can see an example of this usage of the following attached.
3.1.5 Side Navigation
To enable a side navigation icon on your header main menu you need to go on WP dashboard > Visualmodo > Theme options > Header > Side Navigation < and select the style you want for the side menu while the icon is clicked; Overlay/push or full-screen. The image below uses an overlay side menu style. Please see more here.
3.2 Footer Options
In this area of your site, you will be able to select your footer text, columns, add a background image or color and layouts. In the case, you want to remove the Visualmodo default text form your footer ‘Powered by WordPress’ simply set/type your own signature text on ‘Footer Copyright Section Text’ following the attachment image.
3.3 Post Types
In this area of your theme options, you can disable/enable some parts of your theme that you don’t want to use. On your theme you have some custom posts styles as; Portfolio – Team – Knowledge Base and you are free to create your own post type if you will not use this posts you can disable this part of your theme framework to reduce the loading requirements. To create a post type you just need to select the numbers of post types and add a name, plural name, slug and an icon (This posts types works just like blog posts and are normally used for Portfolio / Team Members) After you create this post types refresh your page, go to the post type you’ve built and created your posts just like on blog, after you have all your post build you can call it on your pages using the visual composer Post Grid element on WP Dashboard > Pages > Add New > Back-End editor / front-end > add elements > Posts Grid > On ‘Data source’ select the post type name you build.
3.4 Typography Options
In this theme options area you will be able to change all the fonts on your site using the 600+ google fonts and changing the size and the layout of it, to start this edition you need to select ‘ON’ in the Use Custom Fonts?’ question. In the case, you do not set ON in the very first option of this panel the other changes will not have effect so please follow the attachment image. You also will be able to set your font line spacing, weight, line height and font size. The first subtab of ‘typography’ is for header navigation and menu elements and the second sub-tab is for body elements.
3.5 Color Options
In This area of your theme options, you will be able to edit/change colors of your site, the site main color is called as ‘Global Color’ and you also can change the footer color and header color for light or dark colors.
You also can fully edit WordPress website colors under your WordPress dashboard > Appearance > Customize panel to see the result on your front-end.
In the case you want more options to fully edit your WordPress site just select ‘Custom Colors” on ‘Color Mode’ selector under your VISUALMODO > THEME OPTIONS > COLORS <
You also can fully edit your header navigation menu area colors on Colors > Header < area.
The same options are also present for your footer area customization under theme options > Colors > Footer < More options and footer usage guide in this tutorial.
3.6 Custom Codes
In this area of your theme options you can apply custom codes to customize your website in the way you want, you can apply a google tracking codes, a CSS code, Js codes and HTML codes. Make sure you have some knowledge base on this codes before apply something, you don’t need it to design an amazing site with our theme but this usage is about your decisions.
3.7 Layout Option
In this are of your theme option you will be able to enable or not this theme feature (boxed layout), in the case you want to use a boxed site style you need to select ‘On’ in the first tab question, and you will be able to choose an image, colors, and layout. In the case, you don’t want to use it just stay this options in the ‘Off’.
3.8 404 (page not found)
In this are of your theme option you will be able to completely edit the page not found (404) template, add background images, text and style so when your site visitors do not found some page be able to see a beauty template and be redirected for other of your site pages.
3.9 Account Options
In this are of your theme option you will be able to completely edit the WordPress account pages template, add your own style for your login, register and reset WordPress pages.
3.10 WooCommerce Options
In this are of your theme option you will be able to completely edit the WooCommerce WordPress plugin templates pages, change the header styles, texts, sidebars and page layout to make your online shop looks unique. All the Visualmodo Themes comes with the most popular e-commerce WordPress plugin, the WooCommerce and you can edit this plugins default template pages here in the case you want to build a store.
In the first theme options panel area, you can edit the layout for the main shop page and for the single product page, choose the sidebar location or do not use a sidebar.
3.10.1 Header Main Shop
In this are of your theme options, under your WooCommerce tab you can edit your header shop / store page style, add a image background, a slider build-in revolution slider plugin, the color, the title text, content caption and the navigation menu style.
4. Using Visual Elements Plugin / Shortcodes
The best way to create amazing pages with the theme is using the cafe WordPress theme custom page builder elements, in this area we will show you how to use it. you will be able to use this shortcode to build pages, posts or galleries. We build this shortcode to add more features to the theme page builder. You will install our exclusive WordPress Visual composer add-ons plugin for free as soon as you activate our Visualmodo theme on your site, a message for you simply click-to-upload our plugin.
As soon as you activate the visual elements plugin you will see a new tab on your Visual Composer ‘add elements’ tab called ”Visual Elements’ that will add new page content elements like icons, .svg icons upload, box icons, portfolio, team, blog, counts, testimonial, tweets, alerts and even more. In the case you want to edit the default plugin page content elements style you can navigate to your WordPress Dashboard > Visual Elements > General Settings < area.
To build a footer on cafe WordPress theme you need to place information in three areas of your WordPress: 1 – Theme Options, Footer Options to apply text, 2 – Appearance, Menus, create a menu with pages and save it as ‘footer menu’ and 3 – Appearance, Widgets and apply widget on three tabs, footer 01, footer 02 and footer 03. Please take a look at this tutorials to see how to build a footer with widgets, menus, and text.
This tutorial will show you to add and place a widget on a sidebar, to do it you need to go on the page editor, Custom Fields page area and select a sidebar, after this you need to go on Appearance, widget, and place widgets on the sidebar tabs. In the case, you want more widgets on your sidebar our theme works great with plugins for it and WordPress to have a lot of free plugins to apply more widgets. The https://wordpress.org/plugins/jetpack/ is a good example for this purpose.
You can call a sidebar in any page using the widgets visual composer page builder element, please take a look at the image above to see how we design the theme blog for example:
8. Using Slider Show
On your cafe WordPress Theme, you have the revolution-slider plugin, a premium plugin that you gain for free to save money and create some awesome slider shows, to place it on a page please take a look on this document to see how the plugin works and build your slider. After having your slider build-in you will need to simply add it to your page and this can be done in several ways:
- Go to the page that you want to apply for the slider show and load the editor by, wp-dashboard > pages > edit page > scroll the page down until you see a field called “Options” > in Option field click on “Layout” and on “Layout Header Title” select ‘Revolution Slider” and select the slider below as is showed on the attached image above.
- You can also add using a Visual Composer page builder element or as a content short-code. Please see this tutorial.
9. WordPress Plugins
You have third-party amazing plugins on the theme pack that you gain for free while using your cafe WordPress Theme, however, the way you use the plugins is not about our responsibility because we are theme developers, so we suggest you take a look on the plugins devs sites and search for plugins docs and video tutorials. You are free to use or not any plugin, your theme will work normally without it.
Revolution Slider WordPress Plugin http://revolution.themepunch.com/documentation/ Video tutorials playlist at https://www.youtube.com/watch?v=iyuxFo-WBiU&index=7&list=PLSCdqDWVMJPPDcH_57CNZvLckoB8cimJF
Timetable Responsive Schedule For WordPress: http://codecanyon.net/item/timetable-responsive-schedule-for-wordpress/7010836 NOTE: This is not a tutorial page, it’s a sale page but you don’t need to buy it because you already have it on the theme package and in this page, the plugins devs show URLs and place tutorials to this plugin way to use.
Contact Form 7 WordPress Plugin http://contactform7.com/docs/
WP Bakery Page Builder WordPress Plugin (Visual Composer) https://wpbakery.com/video-tutorials/
Ultimate add-ons for visual composer plugin https://www.youtube.com/playlist?list=PL1kzJGWGPrW9CDWwdAWrd_9YQsh1z7u6O
Visual Elements https://www.youtube.com/c/Visualmodo
WooCommerce WordPress Plugin http://docs.woothemes.com/documentation/plugins/woocommerce/
oAuth Twitter Feed for Developers WordPress Plugin https://wordpress.org/plugins/oauth-twitter-feed-for-developers/
10. Front-Page (Home) and Posts-Page (Blog)
After you have your cafe WordPress theme and your plugins installed and activated you will need to create 2 simple pages, without content, we suggest you called if as ‘Home’ and Blog’ for you will need to go on ‘Pages’ Add new, Name it as ‘Home’ and click on the button called ‘Publish’ The same for your blog page however you can name this pages in the way you want. Go to the WordPress admin area, click on ‘Settings’ Reading. In this area, you will click on the ‘Front Page Displays’ and select ‘A Static Page’. For front page, you select ‘Home’ and for posts page, you select ‘Blog’. After you set it up you need to click on ‘Save Changes’ button. You have another way to build your blog also (to be able to edit more blog posts) https://visualmodo.com/knowledgebase/building-wordpress-blog-page/
11. Page Builder
Cafe WordPress Theme came with a drag and drop smart page builder, to start to use it you need to go on your ‘Pages’ Add new, when you see the WordPress normal editor you need to click on a button called ‘Visual Composer’ and you will see a button called ‘Add Element” click on it to see all the page builder elements. The page builder used to be used while building pages, portfolios, teams and knowledge bases or any other custom post type that you wants to create, in back-end or front-end modes, however, we don’t suggest you use it while building blog posts because blog posts use a WordPress native template, or keep using your page builder, however, make sure that you add the ‘post except‘ so the blog posts index page does not display the page builder codes instead of contents. To see all the elements on the page builder and how to use it please go to the plugin documentation on https://kb.wpbakery.com/docs/learning-more/ and video tutorial guides on https://wpbakery.com/video-tutorials/ Please take a look in some video tutorials of this great WordPress Page Builder plugin to make your page layouts in a simple way.
You’re totally free to disable the native theme page builder and use any other that you want, our theme is fully compatible with all the WordPress page builders engines.
11.1 Video Tutorials
We will apply some great start guide video tutorials for Visual Composer WordPress Plugin and pages creation. To see all the official videos please go to the plugin developers site on https://vc.wpbakery.com/video-tutorials/ We also have a complete list narrated video tutorial for all page building process on WordPress into our YouTube channel, please check it out.
Visual Composer Plugin Navigation Interface
Add and Edit Images in Visual Composer Plugin
WordPress Front-End Editor Guide – Drag and Drop Page Builder Usage
Start Building Page or Use Default Templates
Drag and Drop in Visual Composer Explained
How To Create Info-Box Section In WordPress?
Clone Elements in Visual Composer Plugin
Add Visual Composer Plugin Row and Column
How To Add Background Image Or Color In WordPress?
Add and Edit Text in Visual Composer Plugin
Add and Edit Image Gallery in Visual Composer
How To Add Background Image Or Color In WordPress?
12. How to Update my Theme?
We never stop our work on any of our Cafe WordPress theme so we use to add continuous upgrades to our themes for fixes, add new features and much more to make our work better! So is important to keep your theme up-to-date. To have your theme updated all you need to do is go on your WordPress Dashboard > Updates < area, select your theme update and simply click on ‘update new’ button, you will download the latest theme files on your WordPress. To see if you have an update available for your theme you can log in on your WordPress dashboard > Appearance > Themes > Click on your Visualmodo theme, in the case you have an available update you will notice a message.
In the case, you can’t upgrade your theme or need some upgrade information just log in on your Visualmodo account page and open a ticket with our support crew, do not forget to attach a screenshot from your theme purchase with a date, please.
13. Using Widgets
To use widgets you need to go on Appearance, Widgets and all you need to do is drag and drop your widget on the sidebars, the theme came with a lot of widget however you can add more widgets on your WordPress by downloading free plugins for it. To see how to use WordPress originals widgets and edit it please go to this page on wp.org http://codex.wordpress.org/WordPress_Widgets
14. How to Upload Favicon?
Go to your WordPress dashboard and click on > appearance > customize > the site will load your front-page and you will see the options, select the > Site Identity < in this are you will be able to edit the browser tab tagline and the logo Favicon as is showed on the attached image above.
15. Host Requirements
Note: This is based on the oficial WordPress.org site https://wordpress.org/about/requirements/
To run WordPress we recommend your host supports:
That’s really it. We recommend Apache or Nginx as the most robust and featureful server for running WordPress, but any server that supports PHP and MySQL will do. That said, we can’t test every possible environment and each of the hosts on our hosting page supports the above and more with no problems.
Note: If you are in a legacy environment where you only have older PHP or MySQL versions, WordPress also works with PHP 5.2.4+ and MySQL 5.0+, but these versions have reached official End Of Life and as such may expose your site to security vulnerabilities.
Ask for it
Here’s a letter you can send to your host; copy and paste!
I’m interested in running the open-source WordPress <https://wordpress.org/> web software and I was wondering if my account supported the following:
- PHP 7 or greater
- MySQL 5.6 or greater OR MariaDB 10.0 or greater
- The mod_rewrite Apache module
- HTTPS support
Not required, but recommended for better security
Hosting is more secure when PHP applications, like WordPress, are run using your account’s username instead of the server’s default shared username. Ask your potential host what steps they take to ensure the security of your account.
Why do we support older versions?
We strongly recommend the latest versions of PHP and MySQL, but we understand that this isn’t right for everyone, and that sometimes hosts can be slow or hesitant to upgrade their customers since upgrades to PHP and MySQL have historically broken applications.
WordPress will always work on the latest versions of PHP and MySQL, which are often faster and more stable.