Welcome to Juice Theme Documentation

If you want see the live demo click here

This WordPress theme was designed using Bootstrap 3, Sass and most of the customization happen on pages templates and customizer options from WordPress.

Below I'll show how to customize your theme. If you have any question you can contact me by email and I'll respond as soon as possible.

contato@pixelcake.com.br

How to install and import demo content

  1. First you locate the file juice.zip within the package you already downloaded.
  2. Copy the file to your Desktop folder or where you can find it easily.
  3. Now you can go to your WordPress Dashboard
  4. Go to Appearance -> Themes -> Add New -> Upload and choose the file "juice.zip"
  5. Now activate the Juice theme
  6. We higly recommend that you install the juice-child as your child theme.
  7. To import the demo content you have to go to Tools -> Import -> WordPress
  8. Select the file juice.wordpress.xml and import it

If you don't have the importer installed you have to install, it's easy. After install you go to import and select the file nature.xml

WordPress Importer
importer
Install WordPress Importer
install importer

Now it's time to install and activate all plugins suggested on your top page. All custom post types and shortcodes are on the plugins pxcake-cpt and pxcake-shortcodes

Install plugins
plugins

After import you can click on ADD MENU, go to the bottom of page on Menu Settings, Theme locations and select the header menu.

Now you can start styling through customizer, some options you have to save to work properly, it's interessant you test what options fit your design better. Because they are built on conditional cases the default option looks different.

Customize WordPress

The Juice WordPress can be customized in different ways. The main theme customization occours here on Customize, a WordPress feature to change with live preview the main options of your theme.

First you open your Customize in your admin worpress panel as image below

Customize WordPress Admin
customizer

When oppened you will see all options available to change your theme

Customize open
customizer open

You can make some tests, see in live and then save when it's ready

Customize colors options

Juice Theme Colors

In this color panel you will find more 3 settings. The first option Juice Theme Colors contain an option to change the main link color used on your site. You can easy change and preview the results on your screen. This image bellow show how it works. You always can return to default values of theme.

Main link color
main color

You can also change you menu colors in different ways. First you can change between solid or transparent menu. You then can choose a solid color and a link color.

If you choose a solid color and a menu transparent option your dropdown will get the solid color. Choose a dark color for a link because this color will be used in pages where there isn't featured image.

Below you can see a menu with a solid background color active

Background menu color
background menu color

The last options of colors panel is the footer area. First you should chose betwen one column or four columns footer design. Here you have multiples options to see what fits with your design.

Customize blog and recipe options

The blog and recipe section have the same options.You can navigate until your blog page or recipe to see the options changing. You can read more about how to create a blog page or create a recipe page.

Main blog / recipe page layout

This option define the design of the main page where it will be displayed your latest 10 posts or recipes.

You can choose between 4 different design styles

Blog or recipe page with sidebar
content sidebar
Blog or recipe page full width
content full width
Blog or recipe page grid 3 columns
grid 3 columns
Blog or recipe page grid 2 columns with sidebar
grid sidebar

Display sidebar on single blog or single recipe

You can choose to show the single blog post or single recipe with sidebar style or full width. The design is the same of page layout.

Display related posts / recipes, show author badge

There are more 2 options on recipe and blogs section. You can enable author and related posts or recipes

Blog or recipe badge author and related posts or recipes enabled
user and posts related

Customize restaurant menu options

Here you can change some design options. You can learn more on how to create a restaurant menu.

Display photos on menu restaurant

In case you or your client don't have pictures of the products, you can use the restaurant menu without photos. The shuffle menu always need a photo to work, if you don't use a featured image the placeholder image will be displayed instead.

Restaurant menu with photos
restaurant menu photo
Restaurant menu without photos
restaurant menu no photo

Sidebar and related recipes on single restaurant item

You can control the single page for your items restaurant here, can choose between full width or with sidebar. You also can enable related recipes on bottom of single.

Display currency options

Here you can control the currency of your country, display in left, right or don't display. You can also leave the price in blank if you don't want show the prices of your menu.

The currency symbol here is $, and it's on left position
currency menu restaurant

Slider Home Page

Slider

The slider use on page home template where you can choose to show on full width or boxed style as image below. In this examle you can see the top menu always hamburguer also

If you want insert slider and manage then just go to slider section.

Slider boxed
slider boxed

Customize social profiles

The Juice Theme works with 2 different social profiles. The first one is this that you find on customize, is used in case you are a business and have multiple authors. This social profiles are used on top and footer menu. You just fill your full adress and it'll be displayed.

Social profiles
social profiles

The second social is from user profile, this one is used on author badge. Each author can use their on social icons. Go to Users, click on edit profile and fill all fields that you want. Don't forget your short bio. It'll be used on sidebar author badge, and below posts and recipes single page if enabled.

Example of author informations
author info
Displaying author profile on single blog post or recipe post
author single

Customize miscellaneous

On miscellaneous section you'll find image placeholder, custom JS, custom CSS, an email field to use in your contact page and a text field to put your Google Analytics code.

Image placeholder

You can upload an image to use in your site in some situations where can't find a featured image. This placeholder is used on sidebar, footer widgets and menu page in case you enable menu restaurant with images or always on shuffle menu restaurant.

Placeholder image on shuffle menu restaurant
placeholder shuffle

Custom CSS

Here you can place your CSS code, this is just for small changes, we recomend that you use your child theme for bigger changes.

body {
	background-color: #000;
	font-size: 18px;
	color: #FFF;
}

Custom jQuery / JS

You don't have to write jQuery(document).ready(function() { });

Here you can place your custom jQuery / JS. You can place your code like example below.

$("p").click(function(){
	$(this).hide();
});

Google Analytics JS

You can place you Google Analytics here, you can use a plugin instead of this.

Customize widgets

You can control your widgets here, we extend the most commom widgets and they start with pxcake ::

Some widgets will appear when you navigate the site

Widget blog show when blog page is clicked
widget customize

You can control all widgets on admin panel, Appearance -> Widgets section as image below.

You have 5 different areas for place your widgets.

  1. Footer 4 columns
  2. Footer 1 column center
  3. Sidebar blog
  4. Sidebar recipe
  5. Sidebar menu resaturant
Widget Admin Menu
widget admin

Blog options

The Juice Theme use 6 post formats with design ready for your site and a slider that you can use combining standard with upload metabox

  1. Standard
  2. Quote
  3. Video
  4. Aside
  5. Link
  6. Gallery
Post Formats
post formats
Upload Metabox
post formats

Menu restaurant

Create a item restaurant

The pxcake-cpt plugin must be installed and active!

The menu restaurant is a custom post type and works like a post native from WordPress

First you click on Restaurant Menu and click add new. You create a item as a post, then the important thing here is the menu type you choose will group all items.

You have more a metabox for slider gallery if you want use a slider and the item price. The image featured will be used on menu restaurant pag and home.

Restaurant Menu Add New
restaurant menu
Restaurant menu type
menu type

Create a page for menu restaurant

After you insert all your items and categories you have to create a page to show. You go to Pages on admin menu, Add New and then select on page atributes the template Restaurant Menu.

When you select a new metabox option will be displayed on bottom page. Here you will define the style of your restaurant menu, Juice Theme comes with 3 styles, Accordion, Tab and Shuffle menu. If you want display your restaurant menu without photos, you just go on customize restaurant section and select the option.

Restaurant Menu Page
restaurant menu

Recipes

Create a recipe item

The pxcake-cpt plugin must be installed and active!

The recipe is a custom post type and works like a post native from WordPress

First you click on Recipes on admin panel and click add new.

You have a especific metabox for ingredients, directions and slider gallery if you want use a slider.

You will see a plus + button with blue background on right of ingredients and directions. You can just click it and a new line will be created. If you want elimante just press the minus button

Recipe Item Metabox
recipe metabox

Create a page for your recipe

After you insert all your recipes you have to create a page to show. You go to Pages on admin menu, Add New and then select on page atributes the template Page Recipe.

For chooose the design page and single page recipes you have to go to customize on recipes section

Page Template Recipe
recipe page

Home Page

Create a home page

The pxcake-cpt plugin must be installed and active!

To create a home page as our demo you just go to Pages on admin menu, Add New and then select on page atributes the template Home Template.

Home Template
home template

You will see here a horizontal tab metabox with 7 menus

Home Template
metabox home

Slider

Here you can select to show or hide slider on home. If you want use a image instead selectd to don't display slider and upload a featured image

Welcome

Is a intro for icons, you can disable if you want

Service Icons

This is the icons section below slider on home page. You can select an icon, you can have a link for a page if you want. You can choose between Linecons or FontAwesome icons that are bundle with Juice Theme.

Restaurant Menu

You can enable show your menu restaurant with 3 different styles.

Posts Home

Enable your posts on home page, you can order by time, rand or comments. Just posts with featured thumbnail will be show here.

Recipes Home

Enable your recipes on home page, you can order by time, rand or comments. Just recipes with featured thumbnail will be show here.

Map Home

The last option it's the map location of your business. Just Write the location and click find adress. You can create a text for your pin map active with simple html. don't use 'single' or "double" quotes here to avoid JS conflict.

Contact Page

Create a contact page

The pxcake-cpt plugin must be installed and active!

To create a contact page just go to Pages on admin menu, Add New and then select on page atributes the template Contact.

You can choose to use map or not. This site use Contact Form 7 plugin. After install and active the plugin you'll see on admin WordPress a Contact option. Just click on Add New and create your contact. If you want the form style as our demo just place on your new contact form this code

[text* your-name placeholder"Name*"]
[email* your-email placeholder"Email*"]
[text your-subject placeholder"Subject*"]
[textarea your-message placeholder"Message"]
[submit "Send" html_class="btn btn-default"]

Then copy the shortcode generated by the plugin

[contact-form-7 id="642" title="Contact form 1"]

and place it on your page.

Contact Page
contact page

Home Page Slider

Create sliders for home page

You can manage all your home page slider throught admin menu Slider option.

Just click Add New, select one image, then fill the fields, big caption, you can choose one effect based on animate and wow, you can check here how the effects looks like. Then continue filling the fields, if you want leave empty it's ok some or all fields

To show your slides just go to your home page and enable it. If you want create sliders inside your site just use the shorcode sliders, learn how.

Slider Options
slider options

Shortcodes

Bootstrap Grid system

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

6 Columns Layout
[row]
[one_sixth]
… the content goes here
[/one_sixth]
[one_sixth]
… the content goes here
[/one_sixth]
[/row]

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

4 Columns

[row]
[one_fourth]
… the content goes here
[/one_fourth]
[one_fourth]
… the content goes here
[/one_fourth]
[/row]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate.

3 Columns
[row]
[one_third]
… the content goes here
[/one_third]
[one_third]
… the content goes here
[/one_third]
[/row]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate. Sed cursus orci nec lacinia pulvinar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate. Sed cursus orci nec lacinia pulvinar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate. Sed cursus orci nec lacinia pulvinar.

2 Columns
[row]
[one_half]
… the content goes here
[/one_half]
[one_half]
… the content goes here
[/one_half]
[/row]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate. Sed cursus orci nec lacinia pulvinar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum rhoncus nulla at vulputate. Sed cursus orci nec lacinia pulvinar.

Other shortcodes

Slider Shortcode
[row]
[one_column]
[slider ids="476,477,478"]
Just place the ids of images you want
[/row]
[/one_column]
Button Shortcode
Parameters
link_url = ( http://thelinkhere.com )
target = ( '_blank', 'self', 'patent' ) If you leave empty the default is _blank
title = ( 'Your link title' ) If you leave empty the default is the link_url
link_text = 'the button text'

Full example:
[link_url='http://example.com' target='_blank' title='The title' link_text='button']
Intro featured
[intro]
… the content goes here
[/intro]
Signature
[signature] … Your signature [/signature]

Contact us

If you have any question feel free to get in touch

••• Contact throught our site •••

or contato@pixelcake.com.br