SkyWalker
“SkyWalker” WordPress Theme Documentation by “TeslaThemes”
SkyWalker - WordPress Theme

Created: 25-February-2013
By: TeslaThemes
Email: hi@teslathemes.com

Table of Contents

  1. Installation GO
  2. Front Page : GO
    • 2.1 Main Slider GO
    • 2.2 Recent Work Slider GO
    • 2.3 Recent Posts Slider GO
  3. Portfolio page GO
  4. Blog page GO
  5. Contact page GO
  6. Single Project page GO
  7. The GRID GO
  8. Shortcodes GO
  9. Customizations GO
  10. 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 SkyWalker Theme you will need WordPress v3.4 or newer.

Upload the skywalker.installation.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 SkyWalker [last option in the admin menu] menu.

2.1 . Sliders TOP
  1. The Main Featured Slider (for Home Page):

    • In the wordpress admin panel go to your homepage. 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 "Heading for the Main Slider" write the title of the Slider. Leavi it blank if you dont want a header.
    • 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(the keyword from first step).

      image upload

    Now the slider should be displayed on the page.

    image upload
  2. The Simple Slider (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)

      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' title='your_project_title], with the caption parameter set in the step above.

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

      [slider caption='slide' title="Project Rural"]
      
      	Aliquam felis ipsum, interdum ut dignissim at, accumsan non tellus. Ut scelerisque magna a nisl porttitor posuere. Felis ipsum, interdum a nisl porttitor posuere.
      
      	Aliquam felis ipsum, interdum ut dignissim at, accumsan non tellus. Ut scelerisque magna a nisl porttitor posuere. Felis ipsum, interdum a nisl porttitor posuere. Aliquam felis ipsum, interdum ut dignissim at, accumsan non tellus. Ut scelerisque magna a nisl porttitor posuere. Felis ipsum, interdum a nisl porttitor posuere.
      
      [/slider]

      This code will produce a slider with title and description as shown below:

      image slider

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

2.2 . Recent Work / Related Projects Widget 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 widget (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) and add in the "Alt Text" field the categories it attends to , like shown below:

    image recent
  2. Then go to Appearance → Widgets, and drag the Recent Work widget 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.

    image recent widget

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

    image recent widget

    Note : Use more than 4 elements to make the widget work as a slider.

2.3 . Recent Posts Slider Widget TOP

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

This widget displays a slider with recent posts.

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

image

This will produce the slider as shown below :

image

3 . Portfolio page TOP

The Portfolio page can be done with the Full With page template and the [portfolio] shortcode.

To configure the Portfolio follow the next steps :

  1. Create a page with Full Width Template.

  2. Then 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 , the alt text to one or more related keyword (category) that will serve as a filter for the portfolio gallery which will be also used in the shortcode's options , 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".

  3. Then go to the portfolio page . In the content of the page insert the shortcode:

    [portfolio caption="portfolio" filters="all,photography,web-design,print" columns="3"] .

    In the filters options insert the 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.

    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
4 .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 "SkyWalker BLOG Page" Template.
  2. Then go to Settings → Reading , and choose the title of the page created above from the Posts Page option, and optionally choose the "Summary" radio button .

    image gallery

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

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

    Note : We recommend you to drag out the widgets predefined by wordpress for this area if there are any. Leave just the search widget

    Recommended widgets specially made for blog sidebar are :

    • Search
    • [SkyWalker] Posts and Comments
    • [SkyWalker] Text Widget
    • [SkyWalker] Categories
    • [SkyWalker] Archives
    image gallery

    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

5 . 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 the map, address bar and Contact form by dragging the Map with Address and Contact form widget to the Contact Page Content area.
  2. 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
  3. Choose whether to show the contact form or not, from the widget options.
  4. Choose whether to show the address from the widget options. If yes, fill the fields from the widget options.
  5. Add the other widgets you would like to the contact page widgetized 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.

6 . 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 :

[slider caption='slide' title="Project Beatrice"]

Aliquam felis ipsum, interdum ut dignissim at, accumsan non tellus. Ut scelerisque magna a nisl porttitor posuere. Felis ipsum, interdum a nisl porttitor posuere.

Aliquam felis ipsum, interdum ut dignissim at, accumsan non tellus. Ut scelerisque magna a nisl porttitor posuere. Felis ipsum, interdum a nisl porttitor posuere. Aliquam felis ipsum, interdum ut dignissim at, accumsan non tellus. Ut scelerisque magna a nisl porttitor posuere. Felis ipsum, interdum a nisl porttitor posuere.

[/slider]

The code above , should display the slider with description and title on the page.

The top and bottom areas of the single project template are widget ready so lets drop a "Recent Work" widget.

Now the page will look like this :

image contacts

7 . The Grid TOP

SkyWalker template grid is based on the Skeleton GRID System. To start working in the GRID you must put all your content in columns : [column size="your_size"][/column] shortcode.

Import the XML provided with theme package and go to "Features" page to see an example of how to use the grid.
[column size='one']
	1 Content[/column]
[column size='two']
	1/2 Content
[/column]
[column size='two_last']
	1/2 Content.
[/column]
[column size='three']
	1/3 Content.
[/column]
[column size='three']
	1/3 Content.
[/column]
[column size='three_last']
	1/3 Content.
[/column]
[column size='four']
	1/4 Content.
[/column]
[column size='four']
	1/4 Content.[/column]
[column size='four']
	1/4 Content.
[/column]
[column size='four_last']
	1/4 Content.
[/column]
[column size='four']
	1/4 Content.
[/column]
[column size='three-fourths_last']
	3/4 Content.
[/column]

The code above will split the page in different columns. Visit our Feature Demo Page , or import XML to see what it looks like.

8 . Shortcodes TOP

SkyWalker Template has the following features/shortcodes , you can use in the Contents and SkyWalker admin panel :

Import our XML and visit Shortcodes page to see examples of each shortcode.
9 . Customizations TOP

There are more customization options in the Customizer.

There you can change the :

  1. Fonts
    • Menu
    • Title
    • Text
  2. Colors
    • Site
    • Background
  3. Background Texture
10 . Twitter configuration TOP

To enable the twitter plugin:

  1. Go to SkyWalker [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