Setup & Installation

There are two different ways to install Theme Chela.

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 chela.zip and press 'Install Now'.(This can take a moment)
  5. After installation is done press 'Activate Theme'.
  6. Install and activate the Chela 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 Chela 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 chela-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.
Layout: Choose between 'Full-Width' or 'Boxed' layout and pick a header style.
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(this only works if you have a boxed layout).
Background Image: Upload a background image(this only works if you have a boxed layout).
Menus: Create and asign a menu to the primary location(this is the main menu).
Widgets: Add widgets to the sidebar on the blog page.
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) section add a image, title and subtitle, this will be the page header(the title of the page will be displayed if you leave this empty).

Front Page

You need to set a static front 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 static front page(3).
  4. Go back to your page and select Portfolio as a template under the Page Attributes section(4).
  5. In the Front Page Header section you can choose to use a slider or image as a page header(5).
  6. Customize the portfolio section in the Portfolio Template Settings section (6).

Blog

You need to set a static front 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(3).
  4. In the Page Header(4) section add a image, title and subtitle, this will be the page header(the title of the page will be displayed if you leave this empty).
  5. Customize the blog page in the Posts Page Settings 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) section add a image, title and subtitle, this will be the page header(the title of the page will be displayed if you leave this empty).
  5. Customize your portfolio in the Portfolio Template Settings section(4).

Page Builder

With the page builder you can create pages such as About Us & Contact.

  1. In the admin panel go to Pages -> Add New.
  2. Add a title(1).
  3. In the Page Attributes section select Default Template(2).
  4. In the Page Header(3) section add a image, title and subtitle, this will be the page header(the title of the page will be displayed if you leave this empty).
  5. Add different sections to the page in the Chela Page Builder section(4).

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).

Portfolio

How to create new portfolio items.

  1. In the admin panel go to Portfolio -> Add New.
  2. Add a title(1), content(2) and excerpt(3).
  3. Tag the post(4) and add a featured image(5).

Contact Form 7

If you whish to add a contact form with the page builder 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 Chela Demo 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).
  6. Add a contact form with the page builder and select your form(3).

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

<div class="chela-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

Chela Extension This is a extension plugin for theme chela 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.