Thank you for purchasing!
I have spent over a year developing Cufo Theme and I hope you will appreciate it.
If you have any kind of question related to this theme, please ask it via commenting Cufo on Themeforest or contact us via Support Form.
Theme support is available 24/7 and you'll get answer on your question as soon as posible. Normally within 10 minutes and maximum 1 hour delay.
After purchasing Cufo, it's recomended to download "All files & documentation" from Themeforest.
Extract the donwloaded .zip archive contents on your local machine (wherever you like) and you're done. See Video instruction How to install and activate Theme, plugin and Import Demo Content
You should see the following list of files:
- Documentation folder
- Licensing folder
There are two common ways to install Wordpress: via Dashboard or via FTP. You can read this Famous 5 Minute Install on Wordpress Codex or follow my steps.
- Log in to your Wordpress Admin Panel, then go to Appearance > Themes
- Click on Add New then Upload Theme
- Click on and select cufo.zip archive
- Click on Install Now and you're done.
- Extract cufo.zip archive on your local machine
- Log in to your FTP program and go to Wordpress themes folder wp-content/themes
- Upload extracted cufo folder in this directory
- Log in to your Dashboard, then go to Appearance > Themes
- Now you'll see Cufo theme in your themes list.
After you activate Cufo theme it will automatically redirect you to Cufo Templates page. From there you can Activate/Import any of designs. Just select your desired Design Group click on "Save Changes" button and activate any design you wish.
Also if you need to change a Color Scheme within your Dashboard navigate to Appearance > Customize > Styles and change from there.
NOTE: Don't forget to click on "Save Changes" Button BEFORE you Activate or Import any of these designs.
For now Cufo Theme comes with 22 designs and 7 predefined color schemes(these are the same designs as on the demo pages). I'm going to add minimum 1 design per theme update(per week).
After installing and activating the theme you will see plugin avtivation message. You should install and activate them. I'll discuss all theme required and recomended plugins one by one later in Plugins Section.
One Click Demo Import
If you are new to Wordpress it's strongly recomended to import demo content, if not you can skip to Site Setup.
It's very easy to import demo content on Cufo Theme, you will need just a single click and patience. Navigate to Appearance > Cufo Templates and click on "Import Content" button which is under that Design you have already activated. You can also import Demo Content from other Designs too, but the Demo Content which comes with the Design will feet to it the most.
WARNING: Don't forget to click on "Save Changes" Button BEFORE you Import any of these designs.
If you want your site to work correctly, you need to do some basic setup. At first we'll create basic, must have pages, then we'll display them in Navigation Menu and then determine which one will be a Front Page and which one a Posts Page.
To create a new page, within your dashboard you should go to Pages > Add New. Enter page title and leave editor field empty, select page templates and hit Publish. Each page has its unique options which I'll discuss later on.
The following templates should be used for following pages:
- Blog - Default Template
- Portfolio - Portfolio Page
- Contact - Contact Page
Now, once we've created all necessary pages we should display them in Navigation Menu. Within your Dashboard go to Appearance > Menus and click on Create Menu. Now you should assign Theme Location to Main Menu after that click on Save Menu and you're done.
In addition You can remove Home and Sample Page items and also rearrange others.
Front Page & Posts Page
To determine which would be displayed as Front Page and which as Posts Page, within your dashboard navigate to Settings > Reading and do like on this picture below. Then click on Save Changes and basic site setup is done.
We have already created Portfolio Page, but it's not enough for that to work properly. Let me explain you how Portfolio system works. First of all we need to create Portfolio Post. This is a basic template which teachs you how to do that:
These are minimum requirements for Portfolio Post to be created, for more options see Portfolio Single Advanced
- Within your Dashboard navigate to Portfolio > Add New
- Add Title and Content (if you like, not necessary)
- Set Featured Image (REQUIRED for all portfolio post formats)
- Add at least one category (REQUIRED)
- Click Publish and you're done
It's REQUIRED for each Portfolio Post to have at least one category, in other case this post won't be displayed on the Portfolio Page. It's also important to know that categories are filters itself and any category which is assigned to the Portfolio Post will be added in the filters list on the Portfolio Page.
In case of multiple Portfolio Pages only the categories will be displayed which are assigned to the Portfolio Posts on the current page
Now we know how to create Portfolio Posts. If you want to have working example of Single or Multiple Portfolio Pages, go ahead and create 4 posts with:
- Title: Classic Music and Category: classic
- Title: Rock Music and Category: rock
- Title: Nature Photo and Category: nature
- Title: Fashion Photo and Category: fashion
After all that we should get the same result as on this picture below:
Cufo Theme supports Single and Multiple Portfolio Pages as well. For more information see step by step explanation below and be careful not to miss something.
Within your Dashboard navigate to Pages > All Pages > Portfolio (I consider you have already created one, if not go to Site Setup and see how to create a Portfolio Page). Here, on the Portfolio Page editing screen, under the content editor you should see Page Template: Portfolio metabox. This is a single option which controls whether to display all posts or posts from custom categories on the current page. It's configured to display all posts by default. If you want to have Single Portfolio Page skip this option and update the page.
But if you are going to have Multiple Portfolio Pages follow this steps:
This is only example, in your case you should select those Categories which you want your posts to be displayed from.
- Set Display Portfolio Items From: to Custom Categories
- Check classic and rock categories
- Change Page Title from Portfolio to Music Portfolio
- Update the Page
Repeate this process one more time and create Portfolio Page with Title: Photo Portfolio and check cateogries fashion and Nature. After all that navigate to Appearance > Menus and add newly created pages to our already existing menu.
Now if you've done everything right you should have 2 Portfolio Pages with 2 different posts on them.
Music Portfolio (from categories: classic, rock)
- Classic Music (category: classic)
- Rock Music (category: rock)
Photo Portfolio (from categories: nature, fashion)
- Nature Photo (category: nature)
- Fashion Photo (category: fashion)
Portfolio Single Advanced
Each Portfolio Post comes with its unique options. Majority of them are located below the Post Content Editor. Let me explain them in details:
Everything explained here is the same for Blog Posts as well.
Masonry Metro Layout metabox.
Select Post Width option only works if in Theme Customizer > Portfolio(Blog) Page > General > Layout Mode is set to Metro (Masonry - Different Width). This is 3 columns layout and by default each Post has 1x column width, but with this option you can change them to 2x or 3x and the post size will increase accordingly.
- 1x Width - 1 column.
- 2x Width - 2 column.
- 3x Width - 2 column (Full Width).
Post Formats metabox. About this I'll talk later on here.
Portfolio Post Options metabox. Options in this metabox are actually self-explanatory.
Note! empty fields won't be displayed.
Information from the following fields will be displayed only on the Single Post page.
- Project Description Title
- Project Description
- Project Details Title
- Project Client
- Project Link
Information from the following fields won't be displayed on the Single Post page, but on the Portfolio Page for each post individually.
- Testimonial Author
- Testimonial Content
Portfolio Skills metabox. By default, is located on the right side of a screen. This is Portfolio Post meta information and will be displayed on the Single Post page in the Project Info block.
If you aren't familiar with Post Formats please read this article on Wordpress Codex. Cufo Theme supports 6 Post Formats for Blog Posts and 4 Post Formats for Portfolio Posts.
Blog Post Formats
Portfolio Post Formats
Please note that Featured image is REQUIRED for all Post Formats, except Video and Gallery formats on Blog. Each post format has its unique options and when you change them from one to another you will notice that Post Format metabox options will change acordingly. Let me explain you these options one by one:
Standard - this is default Post Format, which displayes Feutured Image and Post Content only. For this format you can exclude Featured Image on the single post page.
Audio - this format supports Embed and Self-hosted audio types. For Audio type: Embed you should copy-paste Audio Embed Code (SoundCloud) in the given textarea, but for Audio type: Self-hosted you should upload files in .mp3 and .ogg formats, if you want your Audio Post to be displayed in all browsers correctly.
Audio Type: Embed
Audio Type: Self-hosted
Video - this format is quite the same as Audio, but in case of Video Type: Self-hosted you should upload files in .mp4 and .ogv formats.
Video Type: Self-hosted
Gallery - this format supports Slideshow and Stacked gallery types. You can add images via clicking Add Image button which opens Add Media popup, then upload them from your local machine or load them from your media library. Also you can Add, Remove or Edit images any time you want. It's important to know that image Title will be used on image Captions for Slideshow and Stacked Gelleries. You can manage them from your Media Library or via clicking on button which links to an image editing screen.
Link - this format supports Link Description, Link Title (may be author) and actual URL fields. Note that URL will be attached only to the Link Title.
Quote - this format is quite the same as Link, but it doesn't require additional URL field.
In this section I will explain you how to build famous OnePage Websites. Actually it's very simple and easy to understand. The logic how it works is: we create a single page (ex: Home), which will be divided by Sections (Blog, Portfolio, Contact, About...) and each section will have an unique ID which will be linked from Navigation Menu. For examle: we create a Menu Item - Blog, which will have custom link - #blog (with hashtag and lowercase) and then we'll create a section via Visual Composer plugin and give it an ID - blog (no hashtag, but lowercase). Now we have A menu item - Blog which is linked to Blog section on the page and when we click on menu item Blog, it will scroll down to Blog Section. Thats it, so simple, but now let me explain you step by step.
Go to your Dashboard -> Pages -> Add New and create a new page called Home.
Now add a Visual Composer Row element to this page and give a specific ID which is very important. After this you can insert any kind of content in this section.
Go to your Dashboard -> Appearance -> Menus and create a custom link Blog and add to main menu with Custom Url #blog. And don't forget that to get all this working you shoud give the same ID to a Visual Composer section, but without hashtag (#) as in Step 3.
You can repeat Step 2 and Step 3 for other sections (#portfolio, #about, #contact ...) as much as you want.
Go to your Dashboard -> Settings -> Reading and setup a Home as a Front Page.
And finally, go to your Dashboard -> Appearance -> Customize and Enable Onepage Future option.
Congratulations! Now you have a working example of a OnePage Website.
Cufo supports several plugins, which I've tested in different situations and they work perfectly on this theme.
- Royal Portfolio - this is must have plugin, which adds Portfolio, Portfolio Categories and Portfolio Skills future to the theme.
Visual Composer (33$ value) , Ultimate Addons for Visual Composer (17$ value) and Essential Grid (25$ value) are must have plugins aswell, because some of the pages in demo import are built with these plugins and + you are getting them for FREE :)
Please Note that some of the elements of Visual Composer/Ultimate Addons/Essential Grid are not compatible with Wordpress Theme Customizer. If you see some bugs in relation with them, please don't panic and keep calm ;) Because they are working fine in standard mode.
If you are not familiar with Visual Composer/Essential Grid or Ultimate Addons for Visual Composer you can read/watch tutorials on their authors websites.
1. Visual Composer - Tutorial
2. Ultimate Addons for Visual Composer - Tutorial
3. Essential Grid - Tutorial
Royal Recent Portfolio Widget - with this plugin you can add Recent Portfolio Posts widget to all widgetized areas. This works exactly the same as default wordpress Recent Posts widget, but in addition has options to show Post Thumbnails and display not only recent Portfolio Posts also randomized ones.
Shortcodes Ultimate - these shortcodes have unlimited posibilities and is very easy to use. Every Shortcode is supported by the Cufo Theme.
Please Note: only plugin version 4.9.3 and below is supported, Shortcodes Ultimate requirment is removed from the theme.
AJAX Thumbnail Rebuild - this plugin should be used in several scenarios:
You can always rebuild your thumbnails from Tools > Rebuild Thumbnails
- If you aren't running fresh installation of wordpress and changing from other theme to Cufo.
- If you have changed theme Style from Theme Customizer > Styles > Select Style.
- If you have changed Blog or Portfolio Posts image sizes from Theme Customizer > Portfolio(blog) Page > General > Aspect Ratio X or Aspect Ratio Y.
- Lightweight Social Icons
- Flickr Badges Widget
- Simple Twitter Tweets
Slider Revolution (18$ value)
With Slider Revolution Plugin you can add Sliders on Posts and on Pages aswell. If you are familiar with Slider Revolution you should know that, when you "Create New Slider" you should give it an Alias(Name). After you create/import new Sliders they(slider names) will appear on the Post/Page creation screens in the Slider select dropdown.
Revolution Slider can be added on Posts/Pages on 2 different locations. You can display it on the Top of everything - under header or you can display it normally in the Post/Page Content. To display Sliders on the top of Post/Page you should add them via Add Revolution Slider metabox.
If you don't know how to create new Revolution Slider then go ahead and download this Demo Slider fom Plugin author website. Import it from: Dashboard -> Revolution Slider -> Import Slider and then go to that page editing screen on which you want to display Slider, Ex: Dashboard -> Pages -> Portfolio -> Add Revolution Slider (metabox) and choose your uploaded Slider Demo Alias(Name).
Theme Customizer is Wordpress core future since Wordpress 3.4. Wordpress Theme Customizer gives you(admin) ability to tweak settings and see a preview of those changes in real time. By default there are a few options, but Cufo comes with Amazing Customizaion Panel (all theme settings are located there), where almost each Section is divided by Tabs. To be honest I'm not going to discuss them one by one(they are too many), but I'll show you where to find major ones.
If your server supports Wordpress websites, Theme Customizer should work 100%. But sometimes there are some server side issues when customzier does not run. In that case you should increase PHP Memory Limit on your server. To do that please follow steps on This Link. If this method does not solve your issue, please contact to your Hosting Provider and ask to increase PHP Memory Limit.
Now let me explain you a bit complicated options, others you can explore yourself.
Within your Dashboard navigate to Appearance > Customize.
You can also activate any of Designs from the Theme Customizer as well. Just follow the steps below.
Style changing process from Customizer (Detailed):
- Within your Dashboard navigate to Appearance > Customize > Styles
- Click on Styles Section and wait a second
- Choose whichever design fits your needs and wait while loading is complete
- Next 2 steps are optional if you aren't going to setup this design on your theme.
- Click Save & Publish to save changes.
- Go to your Dashboard > Tools > Rebuild Thumbnails (If you want your post thumbnails to look like as in demo)
Changing Color Scheme is much simpler, you should only click and it will change immediately without any refresh.
Note! Don't change color scheme while new design is loading.
It's important to know that, when you're changing Theme Design no magic happens there :), in that moment Theme Customizer is changing values of almost all settings(depends on difference between two designs) and after New Design is loaded you can open any section and see that values are updated to something new.
Also important to know that, almost each design comes with its own, specific CSS code snippet. After you change Theme Style it will automaticaly earse Custom CSS field (Theme Customizer > Custom CSS) and add there its own, that means you should backup your own Custom CSS(if you have any) before you change Theme Style and then add there again.
You can modify any design or color scheme and save those changes, but after that if you change something in Styles Section, think twice before you click on Save & Publish because all options which you have already modified will be updated according to new chosen design or color scheme.
From this section you can limit page width and set pixel perfect Boxed Layouts and then Align it if you like. Also you can change Background Color, set Background Gradient or Background Image.
This is a first time when you meet with Tabs in Section. Now I'll explain how they are managed on Body Section > General Tabs example. Each Tab is divided by different number of Tab Windows, the maximum number is 5. See full list here:
- General Options Window
- Spacing Options Window
- Styling Options Window
- Font Options Window
- Info Window
From this section you can change Sidebar General Position. It may appear in 2 positions: Left or Top. In majority options are the same for both, but please note that Left Sidebar Menu supports only 1 level sub menu, while Top Sidebar Menu supports 3 levels.
Logo & Tagline
From this section you can change your site Logo and Tagline. Cufo Theme supports 2 types of Logo: Image and Text. For type Image you can upload Normal and Retina versions of Logo. And for type Text you can 'draw' your own Logo with awesome customization options.
From this section you can add Blog, Portfolio and Contact Page Headers. Styling is the same for each one, only the Titles and Subtitles are different. There is no option for Default Page Templates in the Theme Customizer, Title and Subtitle should be added when you Create/Edit Page.
- In case of Multiple Portfolio Pages the same Page Header will be displayed on each page.
- To create Blog Page you should use Default Page Template, but you shouldn't fill Title and Subtitle fields there, because as mentioned above Blog Page Header is added from Theme Customizer.
- Empty fields won't be displayed.
Blog Page, Portfolio Page
From these sections you can change Layout Modes, set Posts Per Page for Portfolio Pages, increase/decrease Posts Columns Rate and change Image Sizes.
- For Masonry (Unlimited Height) post thumbnails will be displayed with original image sizes.
- Metro (Masonry - Different Width) layout is beta feature. Pages with this layout will be displayed like Masonry (Unlimited Height) if you don't change Post Width from backend (see explanation here).
- You can change Image Sizes only when Layout Mode is set to FitRows (Limited Height).
- After you change Aspect Ratio X or Aspect Ratio Y you should Rebuild Thumbnails, because Wordpress will crop Post Thumbnails with these dimensions.
- For Blog Page Posts Per Page by default is controlled from Dashboard > Settings > Reading > Blog pages show at most.
Google Map API Key
Latest Google Maps have changed their policy. According to the new terms, an API Key is a must while you use it in a particular domain or an application created after 22nd June 2016.
Here are the steps you can follow in order to make your own google maps API key:-
Step 1 – Follow this link in order to generate your key
Step 2 – Read the terms of services and if you feel good to go then click on Agree and Continue button
Step 3 – Choose a name for your new key and specify the websites on which the key will be used. If you don’t need any website restriction, just leave it blank or put an * (but don’t leave it blank!)
Step 4 – Copy your new API key and hit OK.
Step 5- Now you need to put your google map API key in our Google Maps option.
Once you done with this then you can use the google map element.
Note: These steps are also application to the users who have the google map issue on their site, and getting this error in console: “Google Maps API error: MissingKeyMapError”
Article source - Thanks to BrainStormForce.
And after all this, if you like Cufo Theme, please don't hesitate to Rate it on Themeforest. Thank you! Have fun ;)
Written by Duke ^
Short Intro Video
Change Design In 1 Click
Import Demo In 1 Click
Resize Portfolio/Blog Images
- 24/7 Support and Online Documentation
- Enhanced Wordpress Theme Customizer with:
- Countless options - everything updates in Real Time
- Easy & beautiful user interface
- NO backend Admin Panel - All Theme Options are located here in Theme Customizer
- 22 Unique predefined Theme Designs - with advantages:
- One Click change from the Theme Customizer
- New design loads in less than 30 seconds
- Everything happens in Real Time, without any import
- Non-stop, 'Coming Soon' new designs in the future theme updates
- Slider Revolution -18$ cost for Free
- Essential Grid -25$ cost for Free
- Visual Composer -33$ cost for Free
- Ultimate Addons for Visual Composer -17$ cost for Free
- 100% Responsive & Retina Ready
- Built with HTML5 and CSS3
- SEO Optimized
- Clean & Commented Code
- Translation Ready - .po & .mo files included (WPML friendly)
- Child Theme example included (with screenshot)
- Fullwidth and Boxed(set in pixels) Site Layouts
- Background: Colors, Transparent Colors, Images, Patterns and even Gradients for:
- Page Header
- Footer, etc...
- Sidebar Includes: Logo, Menu, Filters and Widgets
- Sidebar Options:
- Attachment Fixed/Static
- Position Top/Left
- Folding Button (left sidebar, optional)
- Custom Scrollbar (left fixed sidebar)
- 2 types of Logo - Image/Text
- Site Tagline below Logo with Advanced Font Options
- 'Draw' your own Text Logo with amazing Logo options:
- Advanced Font Options - Font Family, Size, Letter Spacing, etc...
- Background color, Text color, Text hover color
- Border: Size, Style, Color
- Corner Radius
- Text & Box Shadows, etc...
- Menu Options:
- Menu Title (left sidebar, optional)
- Text or Button style - with multiple styling options
- Active Item Highlight (optional)
- One level Sub Menu (left sidebar)
- Multi level Sub Menu (top sidebar)
- Show Sub Menus on - Hover/Click
- Advanced Font Options
- Filters Options:
- Filtrable Portfolio and Blog Pages
- Text or Button style - with multiple options
- Active Ttem Highlight (optional)
- Advanced Font Options
- Fontawesome Icon Select - Left/Right side
- Isotope or Classic - links based Filters
- Page Header Options:
- for Portfolio, Blog, Contact and Default pages
- Title & Subtitle support for each page separately
- Advanced Font Options
- Advanced Spacing Options
- Multiple Portfolio Pages
- Portfolio Page Options:
- Layout Modes: Masonry, Metro Masonry and FitRows(equal post height)
- Custom Post Thumbnail Aspect Ratios(image sizes)
- 2, 3, 4, 5 Columns with brakepoints
- or 1, 2, 3, 4 Constant Columns (brakepoints only for mobile devices)
- Post Likes and Sharing
- Client Testimonials
- Move Post Title and other elements independently above, below or on posts image Info Hover
- 20+ CSS image Info Hover effects with Transition control
- Info Hover effect Randomization
- Lightbox Image/Video Popup
- Image Overlays: Color & Transparency, Grayscale, Zoom
- Optional Post Format Icons with Icon Select
- and much more, even you can't imagine
- Blog Page Options:
- Almost all above Portfolio Page Options are the same for Blog
- Except CSS Info Hovers and Testimonials
- Portfolio Single Project Options:
- Project Header Position: Above/Below Featured Image
- Previous/Next Project navigation arrows (optional)
- Project Sharing Icons (on/off separately)
- Project Info - floated to the right side or below the Project Content
- additional fields for Project Description
- Categories, Skills, Project Link, etc...
- Blog Single Post Options:
- Almos the same as Portfolio Single Project Options
- Except: Project Info (Description and Details)
- Gallery Options:
- Slideshow and Stacked
- Gallery Captions (optional)
- Advanced Slideshow options
- 7 Slideshow transition effects
- Arrows and Navigation controls
- Gutter control for Stacked Galleries
- Enhanced Wordpress' native Gallery Shortcode
- 1, 2, 3, 4 and 5 Collumns support for native Galleries
- Gutter control for native Gallery
- Similar Posts Carousel Options:
- For Portfolio and Blog
- Different Carousel Title
- Display Random or Related Posts (separately for Portfolio/Blog)
- Number of posts to show
- Increase/decrease Columns Rate
- Autoscroll and Transition options
- Previous/Next Arrows (optional)
- Image Hover Overlay - Color and Transparency
- Comments Options:
- Disable globally on Portfolio/Blog
- Comment author Avatar Sizes: Small, Medium, Large
- Post author comment Background Color highlight
- Input Fields Options:
- for Comments and Contact Page
- 5 layouts
- Background, Text, Border Colors
- Background, Text, Border Focus Colors
- and even Error Color
- Search Input - Icon Select
- Posts Pagination Options:
- 4 different types for Portfolio and Blog pages
- Numeric - with optional Previous/Next and First/Last
- Default - only Previous/Next
- Infinite Scroll - Automatic
- Load More - Manual
- Icon Select For: Prev/Next, First/Last and Load More button
- Contact Page Options:
- 7 Custom Fiels - for contact info (optional)
- Form and Info Titles (optional)
- Google Map positions - Top/Bottom
- Advanced Google Map options
- 5+ Layout combinations with above options
- Custom Copyright Text with Advanced Font Options
- Social Icons Options:
- 10 Social URL fields
- FontAwesome Social Icon Select
- Rearrange ability - with Icon Select
- Icons Size, Corner Radius, Border, Color, Hover Color, Shadow, etc...
- Copyright & Socials Block:
- Attachment: Fixed/Static
- Fixed - Folding Button (optional)
- Static - 3 different layouts
- Back to Top Button Options:
- Turn on/off
- Show up Transition
- Page scroll Transition
- Advanced Styling Options
- Global change of Heading and Body Text Families
- Websafe and 650+ Google Fonts
- Google Font Subsets: Latin, Cyrillic, Greek, Vietnamese
- Advanced Typography options From H1 to H6 including Paragraphs:
- Font Family
- Font Size
- Line Height
- Letter Spacing
- Font Weight (100 to 900)
- Custom CSS with - Editor styling and FullScreen options
- Favicon upload: Default and Apple Touch Icons
- Left Sidebar, Top and Footer Widgets - Advanced Styling Options
- Globally enable/disable Widget Titles
- 2, 3, 4 columns select for Top & Footer Widgets
- Disable Footer Widgets separately on different Pages.
- Plugins Included:
- Royal Portfolio
- Royal Recent Portfolio Posts widget.