axa
“AXA” WordPress Theme Documentation by “TeslaThemes”
AXA - WordPress Theme

Created: 17-December-2012
By: TeslaThemes
Email: hi@teslathemes.com

Table of Contents
  1. Installation GO
  2. Front Page : GO
    • Main Slider GO
    • Services GO
    • Recent Work Slider GO
    • Get in touch GO
    • Testimonials GO
    • Our Clients Slider GO
  3. Portfolio page GO
  4. Blog page GO
  5. About Us page GO
  6. Contact page GO
  7. Single Project page GO
  8. The GRID GO
  9. Theme Customization GO
  10. Shortcodes GO
  11. Twitter Configuration GO

Thank you for purchasing our product! We are very glad that you have decided on our WordPress theme.

The theme is very easy to use and we are here to guide and help you, so please read and follow the documentation and if you have further questions write us a email hi@teslathemes.com. This documentation is more of a reference work if you do not know what to do and need a better understanding on how the template is built.

1 . InstallationTOP

To install the AXA Theme you will need WordPress v3.4 or newer.

Upload the axa.zip file through the WordPress admin backend:

upload

Then, when prompted activate the theme:

activate

Note: If you can't get passed the file upload limit and/or if you get an error message mentioning exhausted memory size or something in those lines, you could try to increase that limit by adding to the "wp-config.php" the following line of code:

define('WP_MEMORY_LIMIT', '64M');

If everything went well, the theme should appear under Appearance --> Themes like shown below:

activate

2 . Front PageTOP

Note : The footer and header content of pages are configured under the Theme Option menu.

3 . Main Slider TOP

The Main Slider can be configured with two methods

  1. Widget (for Home Page):

    • In the wordpress admin panel go to each page which you want to be related to the portfolio gallery item (to have an image that will link to the page). Press the "Add Media" button → Select the images you want to use in the slider. After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images and unique for the slider, if you will be creating another slider choose a different keyword for it), then change the title of the image as it will be the first row displayed on the slide. Change the description of the image as it will be the second row of the slide, like shown below:

      image upload

      Note 1: after configuring the images don't press insert into page , just close the window

      Note 2: The slides will order by image file name.

      Note 3: Use the "uploaded to this page" filter for a better understanding on which images are attached to the page you work with.

    • Go to Appearance → Widgets and drag the Main Slider widget to the area you want. Then in the widget options, under the "Caption of images used for slider:" input , write the caption of the images from Media Gallery that will be used in the slider. image upload

    Now the slider should be displayed on the page.

  2. Shortcode (for single Project Page):

    • Same first step as for Widget: In the wordpress admin panel go to the page on which you will use the slider or add a new page. Press the "Add Media" button → Select the images you want to use in the slider. After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images and unique for the slider, if you will be creating another slider choose a different keyword for it), then change the title of the image as it will be the first row displayed on the slide. Change the description of the image as it will be the second row of the slide, like shown below:

      image upload

      Note 1: after configuring the images don't press insert into page , just close the window

      Note 2: The slides will order by image file name.

      Note 3: Use the "uploaded to this page" filter for a better understanding on which images are attached to the page you work with.

    • In the page content use the shortcode [slider caption='your_images_caption'], with the caption parameter set in the step above.

      Note : An example to integrate the slider in the theme grid:

      [row]
          [column size='8']
              [slider caption='slide' description='false'][/slider]
          [/column]
      [/row]

      This code will produce a slider only on 8/12 of the size of the page as shown below:

      image slider

      Note : More about the GRID Here

      Note : More about the Slider read in te shortcodes section Here

4 . Services TOP

The Services widget can be set up only for the widgetized pages.

  1. In the wordpress admin panel go to the page you want the service to be linked to. Press the "Add Media" button → Select the images you want to use for the services (Upload/attach images to different pages if you want them have to different links). After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images , then change the title of the image as it will be the first row displayed for the service. Change the description of the image as it will be the content of the service, like shown below:

    image service
  2. Then go to Appearance → Widgets, and drag the Services widget to the desired widgetized area. In the widget options set the "Caption of images used for services: " input to the keyword selected above.

    Now your page should display the services as shown below:

    image services

    Note : You can't use more than 4 services. If you do , the widget will use only the first 4 ordering by filename.

5 . Recent Work Slider TOP

The Recent Work widget can be set up only for the widgetized pages.

This widget gathers the image attachments from all pages that has the caption set to the keyword you specify in the widget's option.

  1. So first : in the wordpress admin panel go to each page on which you want to be related to the slider (to have an image that will link to the page) or add a new page (page must be widgetized). Press the "Add Media" button → Select the images you want to use as a thumbnail. After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images) , like shown below:

    image recent
  2. Then go to Appearance → Widgets, and drag the Recent Work slider widget to the desired widgetized area. In the widget options set the "Title" and the "Caption of images used for services: " input to the keyword selected above.

    Now your page should display the Recent Work Slider as shown below:

    image recent slider

    Note : Use more than 4 elements to make it a slider.

6 . Get in touch TOP

The Get in touch widget can be set up only for the widgetized pages.

This widget displays a stylized horizontal rule with text or a button with link.

To set it up just go to Appearance → Widgets, and drag the Get in touch widget to the desired widgetized area and configure the widget options like shown below:

image call us

Note : The "Linked to" field will work only when you choose the "Button" from "Type" field.

This will produce the block below :

image call us

If you choo "Button" under "Type" , this will produce a linked button :

image call us

7 . Testimonials TOP

The Testimonials can be set up with two methods

  1. Widget (for widgetized Pages):

    In the wordpress admin panel go to , Appearance → Widgets and drag the Testimonials widget to the area you want. Then in the widget options, fill all the inputs, like shown below:

    image testimonial

    Now the testimonials block should be displayed on the page, like shown below:

    image testimonial
  2. Shortcode:

    Use the following code in the content of a page to produce a testimonial block .

    [title]Testimonial[/title]
    [testimonial author="John Doe" company="Red-Sky, LCC"]Quoted content of the testimonial block.[/testimonial]

    The code above will produce a testimonial block as shown below:

    image testimonial

    Note : The [title]Your Title Here[/title] shortcode can be used easily in other places.

8 . Our Clients Slider TOP

The Our Clients widget can be set up only for the widgetized pages.

This widget gathers the image attachments from all pages that has the caption set to the keyword you specify in the widget's option.

  1. So first : in the wordpress admin panel go to each page on which you want to be related to the slider (to have an image that will link to the page) or add a new page (page must be widgetized). Press the "Add Media" button → Select the images you want to use as a thumbnail.

    Note : If you don't want the images of the slider to be linked to any of your page just attach them all to the home page.

    After the upload is complete select each of the images and set the caption to any keyword (must be the same keyword for all images) , like shown below:

    image client slider
  2. Then go to Appearance → Widgets, and drag the Our Clients widget to the desired widgetized area. In the widget options set the "Caption of images used for services: " input to the keyword selected above.

    Now your page should display the Our Clients Slider as shown below:

    image client slider

    Note 1: Use more than 6 elements to make it a slider.

    Note 2: Use images of size 120x88 px for better experience.

9 . Portfolio page TOP

The Portfolio template page can be widgetized with any of the widgets available , but the main purpose of it is to use the Gallery Widget for portfolio on it.

To configure the Gallery widget follow the next steps :

  1. So first : in the wordpress admin panel go to each page which you want to be related to the portfolio gallery item (to have an image that will link to the page). Press the "Add Media" button → Select the images you want to use as a thumbnail.

    Note : If you don't want the images of the gallery to be linked to any of your page just attach them all to the portfolio page.

    After the upload is complete select each of the images and set the caption field of the image to any keyword (must be the same keyword for all images) , the title which will appear as the header of the thumbnail on hover , the description field which will display as the second row on the thumbnail , the alt text to a related keyword that will serve as a filter for the portfolio gallery which will be also used in the widget options , the "Youtube, Vimeo link for portfolio" field if you want to link the portfolio image to a video from youtube or vimeo, like shown below:

    image gallery

    Note : If you want more than one filter to a image just insert the filters in the Alt field of the image separated by space e.g. "print photography".

  2. Then go to Appearance → Widgets, and drag the Gallery Widget for portfolio to the desired widgetized area . In the widget options set the "Image Caption Used for gallery: " field, to the caption keyword selected above for all the images.

    Then, in the field "Filter names,separated by comas , from alternate text of images:" , write all the alt text keywords used for the images uploaded above. These will serve as filters and will be displayed on top of the gallery.

    image gallery

    Note : Write "all" to display a filter that will show all the images in the gallery.

    Now your page should display the Gallery as shown below:

    image gallery
10 .Blog page TOP

The Blog template page is ment to show the posts feed. To set up the Blog page:

  1. First create a page with the "AXA BLOG Page" Template.
  2. Then go to Settings → Reading , and choose the title of the page created above from the Posts Page option as shown below. image gallery

    Note : Here also you can set how many posts should be displayed on the blog page.

    Your blog page should display like this:

    image gallery
  3. Now go to Appearance → Widgets and drag the widgets to Blog Sidebar area

    Note : Drag out the widgets predefined by wordpress for this area if there are any.

    Recommended widgets specially made for blog sidebar are :

    • Recent Posts Axa
    • Recent Comments Axa
    • Categories Axa
    • Twitter Axa
    • Flickr

    This widgets are simple and easy to use . Their options are self-explanatory so we will not describe them here.

Mixing different widgets you can produce sidebars like below:

image sidebars

11 . About Us page TOP

This page has special features and is mainly controlled from the Theme Options page. The bottom of the page is widgetized so you can drag any widget to the "About Page Content" area in the Appearance → Widget admin page, and it's content will appear bellow the main content.

The About Us page has 4 pre established tabs. So there are 4 areas that you can customize. Also you can choose which one to display and which not.

Note 1: You can use any combination of shortcodes in the tabs content. The following are mere recommendations by our developers.

Note 2: Do not use the [row][/row] If you dont want to split the tab content in columns.

Let's see the generic options we have for each tab :

image aboutus

Note : In the tab content area you can use shortcodes.

The settings from above with the shortcodes mentioned will produce the following content :

image aboutus

For the second tab, Services Tab, you can use the following example of shortcodes in the content:

[column size="4"]
    [about_subtitle]
        [img caption="small service1"]Sub Title Nr. 1
    [/about_subtitle]
    Content 1
    [about_subtitle]
        [img caption="small service3"]Sub Title Nr. 2
    [/about_subtitle]
    Content 2
    [about_subtitle]
        [img caption="small service2"]Sub Title Nr. 3[/about_subtitle]
    Content 3
[/column]
[column size="4"]
    [about_subtitle]
        [img caption="small service1"]Sub Title Nr. 4
    [/about_subtitle]
    Content 4[about_subtitle]
        [img caption="small service3"]Sub Title Nr. 5
    [/about_subtitle]
    Content 5
    [about_subtitle]
        [img caption="small service2"]Sub Title Nr. 6
    [/about_subtitle]
    Content 6
[/column]
                

The code above will generate the following tab content (just change the Content and caption parts of it) :

image aboutus

Note : To use the images in the services tab , as in the example above, use the [image caption="the_caption_of_the_image] shortcode. This means that the images must be uploaded, and the respective caption set.

For the third tab , Team Tab, you can use the following example of shortcodes in the content :

[row]
    [column size="3"]
        [team_member name='Joe Dowe' position='CEO' img_caption='Joe' facebook='http://www.facebook.com/johndoe' skype='john-sama' linkedin='http://www.linkedin.com/pub/john-doe/51/1a3/624/']Content1.[/team_member]
    [/column]
    [column size="3"]
        [team_member name='Joe Dowe' position='Programmer' img_caption='Joe2' facebook='http://www.facebook.com/johndoe' skype='john-sama' linkedin='http://www.linkedin.com/pub/john-doe/51/1a3/624/']Content2.[/team_member]
    [/column]
    [column size="3"]
        [team_member name='Joe Dowe' position='Manager' img_caption='Joe3' facebook='http://www.facebook.com/johndoe' skype='john-sama' linkedin='http://www.linkedin.com/pub/john-doe/51/1a3/624/']content3.[/team_member]
    [/column]
[/row]

The code above will generate the following tab content (just change the shortcodes parameters and the Content parts of it) :

image aboutus

Note : To use the images in the team tab , as in the example above, change the img_caption="the_caption_of_the_image" parameter of the corresponding shortcode. This means that the images must be uploaded, and the respective caption set.

Next, If you want the skills progress bars , in the Theme Options insert the Theme Skills Title and press +Add Skill button. Fill the skill name and skill value inputs, which will generate the progress bar text and it's value. Press the +Add Skill button again, if you want to add more skills. To remove a skill press the "Remove Skill" button next to the skill.

image aboutus

This should produce the progress bars like shown below:

image aboutus

For the fourth tab, FAQ Tab, you can use the following example of shortcodes in the content which is the accordion :

[accordion]
    [accordion_tab header="First accordion header here"]Content1[/accordion_tab]
    [accordion_tab header="Second accordion header here"]Content 2.[/accordion_tab]
    [accordion_tab header="Header 3 here"]Content 3.[/accordion_tab]
    [accordion_tab header="Header 4 here"]Content 4.[/accordion_tab]
[/accordion]

The code above will generate the accordion like shown below :

image aboutus

Note : You can add as many accordion tabs as you want.

With all this , the configuration of the About page from Theme Options panel is done. Now you can go to Appearance → Widgets and drag the widgets you want to the About Page Content area. The widgets will appear at the bottom of the page, after the tabs' content set from Theme Options admin panel.

12 . Contact page TOP

Basically the Contact page is a full width, without sidebar, widgetized page. We just made a separate template so that the user could build it up with widgets. The widgets you can use for this purpose are: customizable map, address sidebar and a contact form. All these are done through widgets. So you can experiment with the order or the right widgets you consider. Below is an example of organization of Contact page.

  1. Add an info bar at the top of the page, by dragging the Info With Social widget to the Contact Page Content widgetized area. The widget takes social accounts/links from the Theme Options page.
  2. Add the map, address bar and Contact form by dragging the Map with Address and Contact form widget to the Contact Page Content area.
  3. Get the address embedding code from https://maps.google.com/ :
    • First Navigate to https://maps.google.com/
    • Go to the place you want to be shown on the map
    • Press the link button and copy the embedding code to the respective widget option. image aboutus
  4. Choose whether to show the contact form or not, from the widget options.
  5. Choose whether to show the address and info or not, from the widget options. If yes, fill the fields from the widget options.
  6. Add the other widgets you would like to the area.

After all this configurations you should get the page like shown below :

image contacts

Note : The contact form will be sending the message to the email inserted in the email field in widget options.

13 . Single Project Page TOP

This template can be useful for presenting a project or product. Usually all the single project pages are linked to the portfolio gallery (for this follow the instruction explained in the portfolio section).

To create a Single Project Page, go to Pages > Add new , enter the title of the page and choose the Single Project Template. If you want you can set the parent to Portfolio.

Here is a way to configure this page with shortcodes :

[row]
    [column size='8']
        [slider caption='your_slider_images_caption'][/slider]
    [/column]
    [column size='4']
        [project_title]Project Beatrice[/project_title]
        Project Content. Project details. Product Content. Product details.
        [project_detail title='Categories']Web, Photography, Creativity, Web Development[/project_detail]
        [project_detail title='Skills']Prototype, Html/Css, CMS[/project_detail]
        [project_detail title='Project Url'][custom_link to='www.example.com']www.example.com[/custom_link][/project_detail]
    [/column]
[/row]

The code above , should display the following on the page :

image contacts

14 . The Grid TOP

Axa template grid is based on the Bootstrap GRID System. To start working in the GRID you must put all your content in the [row][/row] shortcode. After that , for each column you want to create use [column size="your_size"][/column] shortcode. Column sizes are from 1 to 12. To start a new row with different columns, just start new [row][/row] tags.

For a simple two column layout, create a [row] and add the appropriate number of [column]s. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

[row]
    [column size="4"]Content 1[/column]
    [column size="8"]Content 2[/column]
[/row]
[row]
    [column size="4"]Content 3[/column]
    [column size="4"]Content 4[/column]
    [column size="4"]Content 5[/column]
[/row]
                

The code above will split the page in two rows. The first row will have 2 columns with different sizes. The second row will have 3 columns with the same size. Read more about the grid here

15 . Theme Customization TOP

To change the layout, font, background texture and color, footer background color, and the site color, go to Appearance, then click on Customize.

image contacts

This should get you to the Customizer

image contacts

16 . Shortcodes TOP

Axa Template has the following features/shortcodes , you can use in the Contents and Theme Options :

Hover over code snipets to see what the corresponding shortcode does display.
10 . Twitter configuration TOP

To enable the twitter plugin:

  1. Go to AXA [Theme Options] -> Header tab -> Twitter.
  2. Insert your twitter id in the "Twitter ID" option.
  3. Choose how many last tweets should be displayed.
  4. Visit Twitter Apps , create your App , press 'Generate Access token at the bottom', insert the corresponding options from the 'Oauth' tab.

customizer

customizer