Setup & Installation

There are two different ways to install Theme Jayo.

Method 1
Use the wordpress theme upload function.

  1. Go to Appearence -> Themes.
  2. Click on 'Add New' button.
  3. Click on 'Upload Theme'.
  4. Select jayo.zip and press 'Install Now'.(This can take a moment)
  5. After installation is done press 'Activate Theme'.
  6. Install and activate the Jayo Extension, Advanced Custom Fields PRO & Contact Form 7(optional) plugins.
Method 2
Upload your theme with an FTP client.
  1. Connect to your server where you have installed wordpress with an FTP client (eg FileZilla).
  2. Navigate to /wp-content/themes/ and upload the theme folder there.
  3. Log into your wordpress site and go to Appearence -> Themes and press 'Activate Theme'.
  4. Install and activate the Jayo Extension, Advanced Custom Fields PRO & Contact Form 7(optional) plugins.

Demo Content

Installing Demo
Want your site to look like the demo?

  1. Go to the admin panel
  2. Click on Tools -> Import.
  3. Press Run Importer under the WordPress tab.
  4. Select the jayo-demo.xml file in the theme folder.
  5. Check the Download and import file attachments checkbox and hit Submit.
  6. Thats it!

Basic Settings

Setting up pages and menus.

  1. Go to Settings -> Reading
  2. In the Front page displays select A static page.
  3. Pick a front page.
  4. Pick a blog page.
  5. Go to Appearence -> Menus.
  6. Use the demo menu or create a new one.
  7. In Theme locations check the Primary Menu location and hit save.
Your theme is now setup and you can check it out!

Theme Options

This theme uses the customizer instead of a theme options panel for better user experience.
To customize your theme please go to Appearance -> Customize .

Site Identity: Upload a custom logo for the header and add a site icon. Don't forget to uncheck the 'Display Site Title and Tagline' checkbox to remove the title and tagline from the site header.
Preloader: The preloader is a small lightweight animation that shows while the page is loading. Pick a style or disable it.
Copyright: Copyright text for the footer area.
Social Media: Social Media icons for the footer area. Add full URL's to your social media pages.
Colors: Pick a background color.
Background Image: Upload a background image.
Menus: Create and asign a menu to the primary location(this is the main menu).
Widgets: Add widgets to the footer.
Static Front Page: Show your latest blog posts or pick a static page to show as your front page.
Additional CSS: Add custom css(this is for advanced users).

Pages

How to create new pages.

Regular Page

  1. In the admin panel go to Pages -> Add New.
  2. Add a title(1) and some content(2).
  3. In the Page Attributes section select Default Template(3).
  4. In the Page Header(4) choose if you want a basic, full-width image or a slider page header. Add a title, subtitle, image & slides(5).

Front Page

  1. In the admin panel go to Pages -> Add New.
  2. Add a title(1).
  3. In the Page Attributes section select Portfolio Template(2).
  4. In the Page Header(3) choose if you want a basic, full-width image or a slider page header. Add a title, subtitle, image & slides(4).
  5. Customize the portfolio in the portfolio(5) section.
  6. Go to Settings -> Reading and use your new page as a static front page(6).

Blog

You need to set a posts page before you can start customizing this page(step 3).

  1. In the admin panel go to Pages -> Add New.
  2. Add a title(1) and hit publish(2).
  3. Go to Settings -> Reading and use your new page as a posts page(6).
  4. In the Page Header(3) choose if you want a basic, full-width image or a slider page header. Add a title, subtitle, image & slides(4).
  5. Customize the blog page in the Posts Page section (5).

Portfolio

  1. In the admin panel go to Pages -> Add New.
  2. Add a title(1).
  3. In the Page Attributes section select Portfolio Template(2).
  4. In the Page Header(3) choose if you want a basic, full-width image or a slider page header. Add a title, subtitle, image & slides(4).
  5. Customize the portfolio in the portfolio(5) section.

About Us

  1. In the admin panel go to Pages -> Add New.
  2. Add a title(1).
  3. In the Page Attributes section select About Us Template(2).
  4. In the Page Header(3) choose if you want a basic, full-width image or a slider page header. Add a title, subtitle, image & slides(4).
  5. Enable the services(5) section and add services.
  6. Enable the team(6) section and add members.
  7. Create a logo carousel with clients(7).

About Me

  1. In the admin panel go to Pages -> Add New.
  2. Add a title(1).
  3. In the Page Attributes section select About Me Template(2).
  4. In the Page Header(3) choose if you want a basic, full-width image or a slider page header. Add a title, subtitle, image & slides(4).
  5. Add a title, subtitle(5) and add some skills(6).
  6. Add information to the education(7) section.
  7. Add information to the work experience(8) section.

Contact

Before you customize this template please install and activate the Contact Form 7 plugin for best results.

  • In the admin panel go to Pages -> Add New.
  • Add a title(1).
  • In the Page Attributes section select Contact Template(2).
  • In the Page Header(3) choose if you want a basic, full-width image or a slider page header. Add a title, subtitle, image & slides(4).
  • Add a title, subtitle(5).
  • Select which contact form you want to use(6). If you want the contact form to look like the demo, please read THIS.
  • Add some contact information(7).
  • Posts

    How to create new posts.

    1. In the admin panel go to Posts -> Add New.
    2. Add a title(1) and content(2).
    3. Asign the post to a category(3), tag the post(4) and add a featured image(5).
    4. In the page header(6) section you can add a title, subtitle, create a slideshow or embed a video from e.g youtube.com.
    5. Add a custom excerpt(7).

    Portfolio

    How to create new portfolio items.

    1. In the admin panel go to Posts -> Add New.
    2. Add a title(1) and content(2).
    3. Tag the post(3) and add a featured image(4).
    4. In the page header(5) section you can add a title, subtitle, create a slideshow or embed a video from e.g youtube.com.

    Contact Form 7

    If you want a contact form to the contact template you need to install and activate this plugin.

    You can find this plugin in the theme - > plugins folder or in the wordpress repository.

    1. Go to Plugins -> Add New
    2. Upload the plugin from the theme - > plugins folder or use search and install it from wordpress repository.
    3. Create a new contact form by going to Contact -> Add New in the admin panel(if you imported demo content there should already be a contact form named Jayo Style under contact forms).
    4. If you want the contact form to look like on the demo page there is some html markup below.
    5. Customize your contact form and hit Save(2).

    Add this code in the Form(1) tab to style it like the demo.

    <div class="jayo-cf7 row">
    <div class="col-md-6">[text* your-name placeholder "Name (required)"]</div>
    <div class="col-md-6">[email* your-email placeholder "Email (required)"]</div>
    <div class="col-md-12">[textarea your-message placeholder "Message"]</div>
    <div class="col-md-12">[submit "Send"]</div>
    </div>

    Plugins

    Jayo Extension
    This is a extension plugin for theme jayo which contains custom post types(portfolio) and extensions for ACF PRO.
    This needs to be installed and activated in order for the theme to work.

    Advanced Custom Fields PRO
    Adds custom fields to pages, posts & portfolio items.
    This needs to be installed and activated in order for the theme to work.

    Contact Form 7
    Used to create contact forms for the page builder.
    This plugin is optional and does not need to be installed if you do not wish to use a contact form.

    Support

    If you don't find this documentation helpfull please contact me at jkalberto.dev@gmail.com for support.