Juxter - WordPress Theme Documentation

Thank you for purchasing this theme. This document covers the basic installation and use of this theme. If you have any questions that are beyond the scope of this help file, please feel free to contact me at Webylabs Support Forum.

Author: Janze Siaro
Email: janze.siaro@webylabs.com
Support Forum: Support Forum

Theme Installation & Troubleshooting

  1. If you have not set up your Wordpress installation yet, you can grab a copy of latest Wordpress version here. Next, go through the installation instructions inside readme.html file and set up your Wordpress installation.
  2. When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. Unzip the downloaded zip file first (which you most probably have done already if you are reading this documentation). Then follow either of these 2 methods:
    • The theme files can be uploaded using any FTP program. Upload the entire 'Juxter' folder (this is located in the [FTP] folder) into your server folder wp-content/themes/
    • OR in your WordPress backend, goto WP-Menu > Appearance > Themes > (tab: Install Theme) > (tab: Upload) and upload the juxter.zip file (this is located in the [WP] folder)
  3. After that is done activate the theme as you would activate any other theme at WP-Menu > Appearance > Themes.

Troubleshooting: When using FTP, make sure to ONLY upload the unzipped "Juxter" folder and not the whole archive file that you received. If you are new to WordPress and have problems installing it you might want to check out this link: Solving broken theme issues.

Updating Your Theme

It is always advisable to use the latest theme version. When a new update is available, simply backup and delete the wp-content/themes/juxter folder on your server, and upload the new theme folder. None of your theme settings will be lost as all our themes are backward compatible.

Troubleshooting: Sometimes when when you update an active theme's files, you may not see 'Page Templates' in the Edit-Page screen. Its a thing that WordPress does sometimes. To solve this, simply *bump* your theme by going to WP-Menu > Appearance > Themes, activating any other theme, and then re-activating Juxter.

Recommended Wordpress Settings

Comments [optional] - Goto WP-Menu > Settings > Discussion and under 'Other comment settings' check the following two options:

Image Sizes [strongly recommended] - Goto WP-Menu > Settings > Media and under 'Image sizes' set the widths to:

These are the largest widths that can be included in a regualr post (with sidebar), and a full-width page (without sidebar)

Importing Sample Content

  1. Goto WP-Menu > Tools > Import and click on Wordpress. (WordPress might ask you to install the Importer plugin at this stage).
    import
  2. Browse for the sample content file ([Your Downloaded File]/Sample Content/Sample Data.xml), and hit 'Upload File' button. It may take a while for Wordpress to download and import file attachments.

Setting Fonts with Google Web Fonts

You can use any of the 500+ Google Fonts in your website body copy or Headings.

  1. Goto WP-Menu > Juxter > Admin Panel > (tab: Fonts/Text).
  2. Select Google Web Fonts Option in the select box. Extra options will now show.
  3. Fill in 'Standard Embed Code' and 'Font CSS' for the font you want to use and Save your settings.

Filling the correct Embed Code

  1. Goto Google Web Fonts Directory.
  2. Click 'Quick Use' on font you like
  3. Scroll down and copy-paste the embed-code and the CSS into your admin panel

Background Control

Background settings are available at 2 different places in the backend based on their purpose:

  1. The default background settings can be set in WP-Menu > Juxter > Admin Panel > (tab: Backgrounds) for the entire site. This is the Default Layout's background settings.
  2. To select background settings for any other layout (Homepage or Custom), goto that particular Layout's panel in the WP-menu.

Understanding Background Options:

Backgrounds are available for 3 different sections:

  1. Content Area - This is the area behind your main content in the middle.
    TIP: You can select 'None' to remove the 'boxed' look of your site and give it a full-width look.
  2. Site Background - This is the site background and appears 'behind' the Content Area.
  3. Footer - The footer area below the Content Area.

Setting up the Blog-Page and selecting Archive Page Style

The Blog page can be shown in 2 ways:

  1. Default Content for Homepage Layout
  2. Using Page Templates




Selecting Blog / Archive Page Style:
This sets the style for any page which displays a list of posts like the Blog page, Category page, Tag page, Search results etc.

Setting up the 404 Page

  1. First Create A regular Page that you want to use as 404 page.
    TIP: Its a good idea to use the Full-width template with comments disabled.
    THOUGHT: By applying a custom layout to this page, you can do much more than just show some drab
    text - Perhaps use a custom background for this page?
  2. Then assign this page as the 404 page in the admin panel.

Setting the Related Posts plugin

Yet Another Related Posts Plugin (YARPP) is one of the best and most flexible Related-Posts plugins available. It has almost 1.6 million downloads which is why we selected it for our themes.

Juxter comes preloaded with a special YARPP template file and the corresponding CSS styles for it.

  1. Install the YARPP plugin.
  2. Goto WP-menu > Settings > Related Posts (YARPP) and click on 'Add New'
  3. Uncheck 'Automatically display posts'.
  4. Check the 'Display using a custom template file' option
  5. This will show a dropdown called 'Template file'. Select yarpp-template-pw.php. Save and you are done.

Setting the WP-PageNavi plugin

WP-PageNavi replace the old ← Older posts | Newer posts → links with page links on Blog/Archive pages. It has almost 2.6 million downloads which is why we selected it for our themes.

Juxter comes preloaded with preloaded CSS styles for WP-PageNavi.

  1. Install the WP-PageNavi plugin.
  2. The plugin works with default settings. You can goto WP-menu > Settings > PageNavi in case you want to customize it

Shortcode Generator

Juxter comes a sophisticated Shortcode Generator built right into your Edit Screen for easy access. Lets see an example where we add a Map shortcode to the Contact Page.

  1. Shortcode Generator can be accessed via the button with a Magic Wand in your Visual-Editor.
  2. Click the Shortcode you want to insert. In this case, lets insert a map.
  3. The Shortcode Generator appears in a lightbox. Fill in the options you want (There will be helpful hints to help you)
  4. You can optionally 'Preview' the code to manually modify it if you want.
  5. Click the big 'Insert' button and the Shortcode will be inserted into your text-eitor.

Tip: For some shortcodes like Buttons, Boxes, Columns etc. it can be quite convenient to first select the text in your editor and then click the shortcode generator. This will pre-fill the 'Content' box with the text you had selected.

Shortcodes Reference

Shortcodes and their options attributes: (You can see Shortcodes Examples here)

« TUTORIAL SERIES »
Setting the Contact Page with a Custom Layout and Sidebar

Contact Form 7 is one of the best contact form plugins available. It has almost 7 million downloads which is why we selected it for our themes.

Juxter comes preloaded with CSS styles for the CF7 plugin.

Creating the Form:
  1. Install the Contact Form 7 plugin.
  2. Goto WP-menu > Contact and click on 'Add New'
  3. Name your contact form.
  4. In the form area, copy-paste any of the templates provided in [Your Downloaded File]/Sample Content/Contact-Form.txt depending on where you will be using this contact form. The templates provided are for
    1. regular Contact Page form
    2. a sidebar contact form
  5. Once you save this form, you'll be provided with the shortcode tag to insert where you want the Contact Form.

Creating the Contact Page:
  1. Create a regular page and insert the contact-form shortcode you got from above.
  2. Lets go one step ahead and insert a map as well. Use the inbuilt Shortcode-Generator to create the Map shortcode.

Applying a Custom Layout to Contact Page:
  1. Lets create a New custom layout first by going to WP-Menu > Juxter > Admin Panel > (tab: Custom Layouts)
  2. Click 'Add Layout'
  3. Give your layout a name. Lets call it 'Contactpage'
  4. Check the 'Contact Page' checkbox you want to apply this layout to.
  5. Once you Save, the new layout will appear in the WP-Menu. Goto this Layout to start editing it.
  6. In the newly created 'Layout: Contactpage' lets change some background settings. Click 'Define custom background settings for this layout' and change the background settings.
  7. Next, goto the 'Modules' tab, and add 'Default Content' if its not already there. This will add the page content we created in the Edit-Page screen above.
  8. Now, lets add a 'Tagline' module. Using the move icon, move it above the 'Default Page Content' module.
  9. Last, add a 'Dividers & Spaces' mmodule and select 'Divider with goto top link' radio option.

Applying a Custom Sidebar to Contact Page:
  1. Lets create a New custom sidebar first by going to WP-Menu > Juxter > Admin Panel > (tab: Custom Sidebars)
  2. Click 'Add Sidebar'
  3. Give your sidebar a name. Lets call it 'Contactpage'
  4. Check the 'Contact Page' checkbox you want to apply this sidebar to.
  5. Once you Save, goto WP-Menu > Appearance > Widgets to start adding content to this sidebar.
  6. You will see the newly created Sidebar here. Add widgets to it that you want to appear on the Contact Page.

All about Sliders

You can have as many sliders as you want by creating different 'Slider Sets'. The benefit of creating Sets is that the same slider can be used at multiple places.

Once you create a slider-set, it can be added either as a layout module, or as a shortcode.

Creating a Slider Set
Use the slider set manager to add/delete Slider sets.

Add Slides to the new Slider Set:

  1. Once you save the Slider set manager screen, the new slider-set appears in WP-Menu
  2. In the slider set screen, manage screens by clicking 'Add Slide'.
  3. Select 'Filter Options (Slide Type)' based on which type of slider you intend to use this slide for.
  4. NOTE: Its important to understand that the 'Filter Options (Slide Type)' only helps filter the options displayed. Its a visual aid and DOES NOT set the slider type. The slider type is specified in the steps below. This means that the same slider-set/slide can be used as a Nivo slider, an Accordian slider etc. as long as the slide options are filled up correctly in this screen.
  5. Save your Slider Set

Using Slider as a Layout Module
  1. Goto the layout you want to add the slider to.
  2. In 'Modules' tab, Click on the 'Slider' module
  3. Select the Slider Type. (This will determine what type of slider you want)
  4. Select the Slide set we created above, and fill in other options.

Using Slider as a Shortcode

NOTE: Slider shortcodes are only available for BX Slider and Nivo Slider

  1. In Edit Post/Page screen, click on the Schortcode-Generator button and select the Slider type you want.
  2. Select the Slide set we created above, and fill in other options. Click Insert and the shortcode will be inserted.

TIP: You can add the slider shortcode pretty much anywhere. In a widget, footer widget, layout's content modules etc.

All about Galleries

You can have as many galleries as you want by creating different 'Gallery Sets'. The benefit of creating Sets is that the same gallery can be used at multiple places.

Once you create a gallery-set, it can be added either as a layout module, or as a page template.

Creating a Gallery Set
Use the gallery set manager to add/delete Gallery sets.

Add Gallery-Items to the new Gallery-Set:

  1. Once you save the Gallery set manager screen, the new gallery-set appears in WP-Menu
  2. In this gallery set screen, manage items by clicking 'Add Gallery Item'.
  3. '[Optional] Alternate image' are used for a mouse-hover effect.
  4. Save your Gallery Set

Using Gallery as a Layout Module
  1. Goto the layout you want to add the gallery to.
  2. In 'Modules' tab, Click on the 'Gallery' module
  3. Select the Gallery set we created above, and fill in other options.

Using Gallery as a Page Template
  1. Goto the Add New Page screen.
  2. Under 'Page Attributes', select the 'Gallery Module Page' Template.
  3. In the Page Options below, select the Gallery set we created above, and fill in other options.

Carousals

You can have as many carousals as you want by creating different 'Carousal Sets'. The benefit of creating Sets is that the same carousal can be used at multiple places.

Once you create a carousal-set, it can be added as a layout module to any layout you want.

Creating a Carousal Set
Use the carousal set manager to add/delete Carousal sets.

Add Carousal-Items to the new Carousal-Set:

  1. Once you save the Carousal set manager screen, the new carousal-set appears in WP-Menu
  2. In this carousal set screen, manage items by clicking 'Add Carousal Item'.
  3. Fill in the options and save your Carousal Set

Using the Carousal Module with Carousal Sets
  1. Goto the layout you want to add the carousal to.
  2. In 'Modules' tab, Click on the 'Carousal' module
  3. Select the Carousal-Set we created above, and fill in other options.

Using the Carousal Module to show Recent Posts

You dont need to create a Carousal-Set if you want to use recent posts as carousal items.

  1. Goto the layout you want to add the carousal to.
  2. In 'Modules' tab, Click on the 'Carousal' module
  3. Select the 'Recent Posts' option
  4. you can select the number of posts to show (default is 10) and/or the Categories to show it from. Leave the Categories unchecked to show from all categories.

Custom CSS and JS

The CSS used in Juxter comes from various sources.


But where to edit the CSS?

You should really avoid editing the CSS directly in the above files.

If you want to change a CSS rule, simply copy that rule from the above mentioned files, and add them to any of the following 2 places. When you add them here, they will be given preference and will override any previous CSS rules.

  1. In your admin panel goto WP-Menu > Juxter > Admin Panel > (tab: Custom Code).
  2. In the /style.css file in your Juxter theme folder.
Note: The CSS in the admin panel is given utmost priority i.e. it will override CSS in styles.css also.


Where to add custom Javascript?

In your admin panel goto WP-Menu > Juxter > Admin Panel > (tab: Custom Code) and add the Javascript in 'Custom Javascript' box.


Where to add Google Analytics code?

In your admin panel goto WP-Menu > Juxter > Admin Panel > (tab: Main) and copy-paste the code from Google Analytics in 'Google Analytics Code' box.

Contact & Support

Thank you for purchasing this theme. This document covers the basic installation and use of this theme. However, if you have any questions that are beyond the scope of this help file, please feel free to contact me.

Author: Janze Siaro
Email: janze.siaro@webylabs.com
Support Forum: Support Forum