King - The Enthusiasts Magazine WordPress Theme

King Theme Installation and User Guide

Thank you for purchasing a ThemeJoy WordPress Theme. We’re certain you’ll love building your site with King.

Table of Contents

  1. Overview
    1. WordPress Features
    2. Image Sizes
  2. Theme Installation
  3. Child Theme Installation and Activation
  4. Install Recommended Plugins
  5. 1 Click Demo Import
  6. Theme Setup
    1. Permalinks
    2. Theme Options
      1. Options Tab
      2. Customize Tab
      3. Resources Tab
    3. Homepage Slider
    4. Menus
    5. Widgets
      1. ThemeJoy ~ Ad-125
      2. ThemeJoy ~ Ad-250
      3. ThemeJoy ~ Ad-300×100
      4. ThemeJoy ~ Ad-300×250
      5. ThemeJoy ~ Contact Info
      6. ThemeJoy ~ Facebook
      7. ThemeJoy ~ Flickr
      8. ThemeJoy ~ Instagram
      9. ThemeJoy ~ MailChimp
      10. ThemeJoy ~ Retina Icons
      11. ThemeJoy ~ Twitter
      12. ThemeJoy ~ Video
  7. Page Templates
    1. Page Styles
    2. Other Styles
  8. Post Templates
    1. Post Styles
  9. Post Featured Content
  10. Shortcodes
    1. Responsive Slider
    2. Responsive Tabs
    3. Responsive Gallery
    4. Retina Icons
    5. Font Icons
    6. Responsive Toggles
    7. Responsive Videos
    8. Responsive Columns
  11. Miscellaneous
    1. Enhanced WordPress Editor Quick Tags
    2. Custom Page Options
    3. Custom Fields
    4. Lightbox
  12. Theme Updates
  13. Recommendations

Overview

King – The Enthusiasts Magazine WordPress Theme.

King supported WordPress features:

  • Child Theme Ready and Included
  • Theme Localization – Translation ready .mo and .po files included
  • Automatic Feed Links
  • HTML5 Semantic Markup
  • Visual Editor Styling
  • Post Formats – Standard, Gallery, Image, Video, Audio, Link and Quote.
  • Custom Background
  • Custom Header – For the Blog Header
  • 3 Menu Locations – Header, Footer and Mobile
  • 7 Sidebar Locations
  • Fully Widgetized Header, Footer and Sidebars
  • Shortcodes in Posts, Pages, Widgets and Excerpts
  • Theme Options
  • Theme Customizer
  • Featured Images

Image Sizes:

Note: These image sizes and Retina high definition (HD @2x) image sizes are automatically generated by the King theme when the uploaded image is large enough.

  • Thumbnail: Normally 150×150
  • Medium: Normally 300×300
  • Large: Normally 1024×1024
  • Full Size: Actual Image Size
  • Featured Image size: 200×200
  • Image Post Format size: 1170×600 – Recommended size for the Homepage Slider images.
  • Image size: 250×250
  • Image size: 350×350
  • Image size: 450×450
  • Image size: 550×550
  • Image size: 650×650

^ Top

Theme Installation

To install your new King parent theme, follow these steps below:

  1. Log In to your WordPress Dashboard.
  2. In the left navigation menu click (Appearance).
  3. At the top of the Themes page click (Add New).
  4. At the top of the Add Themes page click (Upload Theme).
  5. Click the (Browse…) button and find the king.zip file on your local machine and then click the (Install Now) button. (see fig. 5)
  6. Upon successful theme installation, DO NOT CLICK THE ACTIVATE LINK, instead click the (Return to Themes page) link to install the King-child theme.

^ Top

Child Theme Installation and Activation

To install and activate your new King-child theme, follow these steps below:

  1. At the top of the Themes page click (Add New).
  2. At the top of the Add Themes page click (Upload Theme).
  3. Click the (Browse…) button and find the king-child.zip file on your local machine and then click the (Install Now) button. (see fig. 5)
  4. Upon successful theme installation click the (Activate) link to activate the King-child theme.
  5. Congratulations, your theme is installed and activated.

Figure 5Theme Installation

^ Top

Install Recommended Plugins

If you would like to use contact forms, enable sharing icons and import demo data, follow these steps below:

Note: To import the optional demo content into your site the One Click Demo Import plugin is required.

  1. In the left navigation menu click (Appearance > Install Plugins).
  2. On the Install Required Plugins page click the (Install) link for the plugins you would like to install. You can also use the (Bulk Actions) dropdown, checkboxes and (Apply) button to install and activate all the plugins you need at once. (see fig. 7)
  3. Congratulations, the plugins are installed and activated.

Figure 7Install Plugins

^ Top

1 Click Demo Import

If you would like to import the optional demo content into your site follow these steps below:

Note: Importing theme demo data is ONLY recommended on a FRESH CLEAN INSTALL of WordPress and is NOT for sites that have a lot of content, widgets, media, current menus and structure already created and defined.

  1. In the left navigation menu click (Appearance > Import Demo Data).
  2. On the One Click Demo Import page click the (Import Demo Data) button. (see fig. 10)
  3. Please be patient. This step can take up to 3-5 minutes while importing all of the demo content, widgets and menus.
  4. DO NOT click the click the (Import Demo Data) button more than once.
  5. Upon successfully importing the demo content a success message will appear under the import button.
  6. Congratulations, the demo content is imported.

Figure 101 Click Demo Import

^ Top

Theme Setup

To setup clean website URLs follow these steps below:

  1. In the left navigation menu click (Settings > Permalinks).
  2. On the Permalink Settings page under the heading Common Settings choose Post name. (see fig. 30)
  3. Click the (Save Changes) button at the bottom of the page to save your settings.
  4. Congratulations, clean website URLs are setup.

Figure 30
Permalinks

^ Top

Theme Options

To quickly configure website settings follow these steps below:

  1. In the left navigation menu click (Appearance > King Options). (see fig. 35)

Figure 35
King Options

Options Tab: This tab contains settings that will allow you quickly configure your website. (see fig. 40)

General

Background Color

  1. Customize (Background Color) in the Customizer.

Background Image

  1. Choose or upload a (Background Image) in the Customizer.

Breadcrumbs

  1. Use the drop down select list to choose (On or Off) for your site.

Favicon Image

  1. Click the (Upload) button to upload a favicon image.
  2. On the Insert Favicon dialog that opens, at the top click the (Upload Files) tab.
  3. Drop files anywhere on the dialog to upload your favicon.
  4. Click the (Insert URL) button at the bottom of the dialog to insert your favicon.

Retina Images: This will show high definition (HD @2x) images when available.

  1. Use the drop down select list to choose (On or Off) for your site.
    Note: Even though this is a great feature, be aware that it will have a performance impact on the loading of your site.

Rounded Corners – Forms

  1. Use the drop down select list to choose the (Amount) in pixels for rounding the corners of form elements on your site.

Rounded Corners – Images

  1. Use the drop down select list to choose the (Amount) in pixels for rounding the corners of most images on your site.

Layout

Margin – Top & Bottom: This will set in pixels the spacing above the site header and below the site footer.

  1. Enter in the text field a “Whole Number“. e.g. 0, 20, 30 etc…

Drop Shadow: This will enable a drop shadow around your site layout.

  1. Use the drop down select list to choose (On or Off) for your site.

Logo

Retina Logo Image

  1. Click the (Upload) button to upload a logo twice (2x) the size you want to display. e.g. A logo that you upload that is 400×100 will display at 200×50.
  2. On the Insert Logo dialog that opens, at the top click the (Upload Files) tab.
  3. Drop files anywhere on the dialog to upload your logo.
  4. Click the (Insert URL) button at the bottom of the dialog to insert your logo.
    Note: You can preview your logo on a light or dark background by clicking the (White or Black) links under the logo.

Logo Image

  1. Click the (Upload) button to upload a logo you want to display.
  2. On the Insert Logo dialog that opens, at the top click the (Upload Files) tab.
  3. Drop files anywhere on the dialog to upload your logo.
  4. Click the (Insert URL) button at the bottom of the dialog to insert your logo.
    Note: You can preview your logo on a light or dark background by clicking the (White or Black) links under the logo.
    Note: Entering a Logo here overrides the “Retina Logo Image” above.

Text Logo

  1. Enter the text in the field you would like for a logo. e.g ThemeJoy
    Note: Entering a Text Logo overrides the “Retina Logo Image” and the “Logo Image” above.

Text Logo Colors

  1. Customize (Text Logo Colors) in the Customizer.

Main Menu

Main Menu Colors

  1. Customize (Main Menu Colors) in the Customizer.

Font Weight

  1. Make menu text normal or bold.

Sub Menu – Font Weight

  1. Make sub menu text normal or bold.

Borders

  1. Turn menu borders on or off.

Sub Menu – Transparency

  1. Transparency of sub menus.

Sub Menu – Drop Shadow

  1. Drop shadow around sub menus.

Sliders

Homepage

Slider: This will show or hide the slider on the Homepage.

  1. Use the drop down select list to choose (On or Off) for your homepage slider.

Slider Transition: This is the style of transition between slides.

  1. Use the drop down select list to choose (Horizontal, Vertical or Fade) for your homepage slider.

Slider Speed: This is the transition speed (in ms) of the slide.

  1. Enter in the text field a “Whole Number“. e.g. 1, 500, 1000 etc…

Slider Pause: This is the time (in ms) between slide transitions.

  1. Enter in the text field a “Whole Number“. e.g. 4000, 5000 etc…

Slider Pager: These are the small round circles below the slider.

  1. Use the drop down select list to choose (On or Off) for your homepage slider.

Slider Colors

  1. Customize Slider Colors in the Customizer.

Shortcode

Slider Transition: This is the style of transition between slides.

  1. Use the drop down select list to choose (Horizontal, Vertical or Fade) for your shortcode slider.

Slider Speed: This is the transition speed (in ms) of the slide.

  1. Enter in the text field a “Whole Number“. e.g. 1, 500, 1000 etc…

Slider Pause: This is the time (in ms) between slide transitions.

  1. Enter in the text field a “Whole Number“. e.g. 4000, 5000 etc…

Slider Pager: These are the small round circles below the slider.

  1. Use the drop down select list to choose (On or Off) for your shortcode slider.

Slider Colors

  1. Customize Slider Colors in the Customizer.

Blog

Template

  1. Use the drop down select list to choose the (Template) style for your blog.

Blog Header Image: This will enable a header image for your blog.

  1. Use the drop down select list to choose (On or Off) for your blog.
  2. Click the (here) links to choose or upload a Blog Header.

Excerpt Length: How many words you want to show in the post summary on the Category, Archives, Author etc… pages.

  1. Enter in the text field a “Whole Number“. e.g. 25, 50, 75 etc…

Excerpt “Read More” Link

  1. Enter the text in the field you would like for your link. e.g Read post…

Header

Header Colors

  1. Customize Header Colors in the Customizer.

Template

  1. Use the drop down select list to choose the (Header) style for your header.

Menu

  1. Use the drop down select list to choose (On or Off) for your site.

Body

Body Colors

  1. Customize Body Colors in the Customizer.

Footer

Footer Colors

  1. Customize Footer Colors in the Customizer.

Template

  1. Use the drop down select list to choose the (Footer) style for your footer.

Menu

  1. Use the drop down select list to choose (On or Off) for your site.

Copyright Text

  1. Enter the text in the field you would like for your copyright.

Link – WordPress

  1. Use the drop down select list to choose (On or Off) for your site.

Link – ThemeJoy

  1. Use the drop down select list to choose (On or Off) for your site.

Widget Areas

  1. Use the drop down select list to choose the (Number of Widgets) for your site footer.

Advanced

Font Awesome

  1. Use the drop down select list to choose (On or Off) for your site.

Font Awesome CDN URL

  1. Enter the URL in the field you would like for your CDN.
    Note: Entering a URL here overrides the local copy of Font Awesome.

Dashicons

  1. On automatically. Official icon font of WordPress.

Genericons

  1. Use the drop down select list to choose (On or Off) for your site.

RSS Feed URL: This allows you to use an RSS Feed service like FeedBurner for your site.

  1. Enter the URL in the field you would like for your RSS Feed.

Custom CSS & JavaScript: This will load CSS & JavaScript in header.php / wp_head() on every page of your site.

  1. Enter the CSS & JavaScript in the text box you would like for your site.

Custom JavaScript: This will load JavaScript in footer.php / wp_footer(); on every page of your site.

  1. Enter the JavaScript in the text box you would like for your site. e.g e.g. Tracking Codes etc…

Figure 40
Options Tab

Customize Tab: This tab will launch the WordPress Customizer. The Customizer contains the controls that will allow you to style and preview your site as changes are made. (see fig. 42)

King → Style: This will allow you to change the colors of your site. (see fig. 44, 46)

Blog Header Image: This allows you to choose or upload one or many Blog Header Images for your site. (see fig. 48)

Background Image: This allows you to choose or upload a Background Image for your site.

Resources Tab: Save time and money by visiting the ThemeJoy WordPress Resources page.

Figure 42
Customize Tab

Figure 44
King → Style

Figure 46
Header Colors

Figure 48
Blog Header Image

^ Top

Homepage Slider

The Homepage Slider is fully responsive and its height will adapt to the content in each slide.

  • Latest slide shows first.
  • Max slides: 24.
  • Slide width: 1170 pixels.
  • Slide height: Adapts to fit content.
  • Slider settings: In left navigation menu click (Appearance > Theme Options). Click the Sliders tab.

To setup your Homepage Slider follow these steps below:

  1. In the left navigation menu click (Homepage Slider > Add New). (see fig. 55)
  2. On the Add New Slide page enter a title in the title field.
  3. In the content editor enter the images, videos or HTML you would like for the slide.

    Inserting Images

    1. Click the (Add Media) button above the content editor.
    2. Choose the Upload Files tab to upload an image or select an image from the Media Library tab.
      Note: Automatically generated Homepage Slider images can be used by selecting the size (format-image) in the Insert Media dialog. These images always have a pixel width and height of: 1170×600.
    3. Click the (Insert Into Page) button at the bottom of the dialog to insert your image.

    Inserting Videos: Videos are always fully responsive in the Homepage Slider.

    1. Insert the video embed code into the content editor under the (Text) tab like below.
       <iframe src="//player.vimeo.com/video/5999428" width="640" height="360"></iframe>
    2. Or, Insert the ThemeJoy Video Shortcode into the content editor like below.
      [tj_video src="//player.vimeo.com/video/5999428" slide="true"]

    Inserting HTML: Because of the adaptive height of the Homepage Slider, when using HTML for a slide one special guideline must be followed.

    1. Somewhere in your HTML code you will need to use an image to define the height of the slide. This image can either be used in the slide as a viewable part of the slide or it can be a 1 pixel wide transparent spacer image like in the example below.
      <div>
 <p style="text-align: left;">
  <img class="alignleft" style="width: 1px; height: 600px;" src="spacer.gif" alt="" />
  Lorem ipsum dolor sit amet.
 </p>
</div>
    2. The above code will allow the slide to be viewable and also have a height of 600 pixels.
  4. Click the (Publish) button to save your slide.
  5. Congratulations, your slide has been created.

Figure 55
Homepage Slider

^ Top

King has 3 Menu Locations – Header, Footer and Mobile. To setup your menus follow these steps below:

Create a New Menu

  1. In the left navigation menu click (Appearance > Menus). (see fig. 60)
  2. Click the (create a new menu) link near the top of the page.
  3. Enter your menu name in the (Menu Name) text field.
  4. Click the (Create Menu) button to create your new menu.
  5. Congratulations, your menu has been created.

Note: Now you’re ready to add menu items from the menu item boxes on the left, such as pages, categories and links.

Add Menu Items

Note: If you have just created a new menu and are on the same screen you can skip to step 3.

  1. In the left navigation menu click (Appearance > Menus).
  2. Use the (Select a menu to edit:) drop down select list to choose a menu, then click the (Select) button.
  3. Locate the expanding menu item boxes in the left-hand column on the page. These boxes will be labeled: Pages, Links, Categories etc… (see fig. 65)
    Note: Certain menu item boxes, like Posts are hidden on the page by default. The Screen Options tab at the top right of the page allows you to choose which menu box items display on the page.
  4. Click to expand the menu item box of your choice.
  5. Click the checkbox next to each items title that you want to add to your menu.
  6. Click the (Add to Menu) button located at the bottom of this box to add your items to your menu.
  7. Click the (Save Menu) button to save your menu.
  8. Congratulations, your menu items have been added and saved.

Edit Menu Items

  1. In the left navigation menu click (Appearance > Menus).
  2. Use the (Select a menu to edit:) drop down select list to choose a menu, then click the (Select) button.
  3. To reorganize menu items, drag and drop menu items with your mouse. Drag and drop a menu item a little to the right to make it a submenu item of the menu item above it.
  4. To edit menu item properties, click the (arrow) to the right of any menu item expanding the menu item properties. (see fig. 70)
    Note: Certain advanced menu properties, are hidden on the menu items by default. The Screen Options tab at the top right of the page allows you to choose which advanced menu properties display on the menu items.
  5. To delete a menu item, click the (arrow) to the right of any menu item expanding the menu properties. Click the (Remove) link at the bottom of the properties box.
  6. Click the (Save Menu) button to save your menu.
  7. Congratulations, your menu items have been edited and saved.

Set and Manage Menu Locations

  1. In the left navigation menu click (Appearance > Menus).
  2. Click the (Manage Locations) tab at the top of the page. (see fig. 75)
  3. Select a menu from each theme location’s drop down select list.
  4. Click the (Save Changes) button to save your menu locations.
  5. Congratulations, your menu locations have been saved.

Delete a Menu

  1. In the left navigation menu click (Appearance > Menus).
  2. Use the (Select a menu to edit:) drop down select list to choose a menu, then click the (Select) button.
  3. Click the (Delete Menu) link at the bottom of the page.
  4. Click the (OK) button on the confirm pop-up dialog.
  5. Congratulations, your menu has been deleted.

Add a Custom Menu to a Sidebar

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 80)
  3. Drag the Custom Menu Widget to the (Sidebar – usually to the right) that you want the menu to show in.
  4. This causes the Sidebar to open. Optionally enter menu title in the title text field.
  5. Use the (Select Menu:) drop down select list to choose a menu.
  6. Click the (Save) button to save your sidebar custom menu.
  7. Congratulations, your custom menu will now show in that sidebar.

Figure 60
Create Menu

Figure 65
Add Menu Items

Figure 70
Edit Menu

Figure 75
Menu Locations

Figure 80

^ Top

Widgets

To setup your widgets follow these steps below:

ThemeJoy ~ Ad-125

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Ad-125 Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. In the (Ad Space 1) block, under the (Ad Image: ( URL of Image )) heading enter in the text field the URL of the image you want to show.
  6. Under the (Ad URL:) heading enter in the text field the URL that you want the image to link to.
  7. Repeat steps 5-6 above in any of the remaining Ad Spaces that you want use.
  8. Click the (Save) button to save your sidebar widget.
  9. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Ad-250

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Ad-250 Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Under the (Ad Image: ( URL of Image )) heading enter in the text field the URL of the image you want to show.
  6. Under the (Ad URL:) heading enter in the text field the URL that you want the image to link to.
  7. Click the (Save) button to save your sidebar widget.
  8. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Ad-300×100

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Ad-300×100 Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Under the (Ad Image: ( URL of Image )) heading enter in the text field the URL of the image you want to show.
  6. Under the (Ad URL:) heading enter in the text field the URL that you want the image to link to.
  7. Click the (Save) button to save your sidebar widget.
  8. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Ad-300×250

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Ad-300×250 Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Under the (Ad Image: ( URL of Image )) heading enter in the text field the URL of the image you want to show.
  6. Under the (Ad URL:) heading enter in the text field the URL that you want the image to link to.
  7. Click the (Save) button to save your sidebar widget.
  8. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Contact Info

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Contact Info Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Under the (Photo: ( URL of Photo )) heading, optionally enter in the text field the URL of the image you want to show.
  6. Under the other headings below, optionally enter in the text fields the values you want to show.
  7. Click the (Save) button to save your sidebar widget.
  8. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Facebook

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Facebook Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Under the (Facebook Social Plugin Code:) heading enter in the text box the Facebook social plugin code from the Facebook website.
  6. Click the (Save) button to save your sidebar widget.
  7. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Flickr

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Flickr Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Under the (Flickr ID: ( idGettr )) heading enter in the text box the Flickr ID for the user you want to show. e.g. 100519821@N07
    Note: If you do not know the Flickr ID of the Flickr user click the (idGettr) link in the heading to find a Flickr ID for a Flickr username.
  6. Use the (Number of Photos:) drop down select list to choose the number of photos you want to show.
  7. Use the (Image Size:) drop down select list to choose size of the photos you want to show.
  8. Click the (Save) button to save your sidebar widget.
  9. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Instagram

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Instagram Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Next to the (Client ID:) heading click the (Sign In & Register Your App) link and register your Instagram App and then enter in your Client ID that you obtained when registering your app.
  6. Next to the (Access Token:) heading click the (Get Your Access Token) link and follow the instructions on the screen and then enter in your Access Token that you have generated.
  7. Next to the (User ID:) heading click one of the (Find a User ID:) links and follow the instructions on the screen and then enter in your User ID.
  8. Under the (Tag:) heading enter in your image tag.
    Note: Tags will not work or show if your registered app does NOT have “public” permissions.
  9. Use the (Image Resolution:) drop down select list to choose the resolution for your images.
  10. Use the (Number of Photos:) drop down select list to choose the number of photos you would like to display.
  11. Use the (Number of Columns:) drop down select list to choose the number of columns you would like to display.
  12. Use the (Remove Image Padding:) drop down select list to choose the
  13. Use the (Refresh Images:) drop down select list to choose how many times a day you would like to pull images from Instagram into your site.
  14. Click the (Save) button to save your sidebar widget.
  15. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ MailChimp

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ MailChimp Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Under the (Short Blurb:) heading optionally enter in the text field a message.
  6. Under the (MailChimp Form Action:) heading enter in the text field a form URL.
  7. Under the (Input Placeholder Text:) heading optionally enter in the text field a message or example like “name@domain.com” or “Your Email Address”.
  8. Under the (Submit Button Text:) heading enter in the text field: “Sign Up” or something like that.
  9. Under the (Footer Text:) heading optionally enter in the text field a message.
  10. Click the (Save) button to save your sidebar widget.
  11. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Retina Icons

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Retina Icons Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Use the (Alignment:) drop down select list to choose the alignment for the Icon Container.
  6. Under the (CSS Classes:) heading enter in the text box any extra CSS classes you want to add to the Icon Container.
  7. Use the (Size:) drop down select list to choose the size of the icons.
  8. Use the (Shadow:) drop down select list to choose to show or hide a shadow around the icons.
  9. Use the (Rounded:) drop down select list to choose to round off the corners of the icons.
  10. Use the (Round:) drop down select list to choose to round the icons.
  11. Under the (CSS Classes:) heading enter in the text box any extra CSS classes you want to add to the Icon Style Options.
  12. Under the (Icons: ( Click to Choose )) heading click the (Icon) that you want to add. A enter a URL prompt will pop-up. Enter a URL in the text field and click the (OK) button.
  13. Continue to add all of the icons that you want to show by clicking on the various icons and entering the URLs that you want the icons to link to.
  14. Click the (Save) button to save your sidebar widget.
  15. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Twitter

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Twitter Widget to the (Sidebar – usually to the right) that you want the widget to show in. This will cause the Sidebar and Widget to open.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Use the (Code Type:) drop down select list to choose a which type of Twitter code you will be entering in the (Twitter Code:) text box below.
  6. Use the (Hide Embedded Timelines Tweetbox:) drop down select list to choose to show or hide the Tweetbox on the widget.
  7. Under the (Twitter Code:) heading enter in the text box the Twitter code from the Twitter website.
  8. Click the (Save) button to save your sidebar widget.
  9. Congratulations, your widget will now show in that sidebar.

ThemeJoy ~ Video

  1. In the left navigation menu click (Appearance > Widgets).
  2. Locate the Available Widgets section. (see fig. 90)
  3. Drag the ThemeJoy ~ Video Widget to the (Sidebar – usually to the right) that you want the widget to show in.
  4. Under the (Title:) heading optionally enter in the text field a title.
  5. Under the (Video Embed Code:) heading enter in the text box the video embed code or the video shortcode for the video you want to show.
  6. Under the (Description:) heading optionally enter in the text field a short comment or video description.
  7. Click the (Save) button to save your sidebar widget.
  8. Congratulations, your widget will now show in that sidebar.

Figure 90

^ Top

Page Templates

The King theme offers custom page templates to change the display or functionality of a page. To use custom page templates follow these steps below:

  1. When editing or adding a new page, locate the Page Attributes block normally located on the right side of the page; then under the heading Template use the select list to choose the (Template) you would like for your page. (see fig. 95)
  2. Click the (Publish or Update) button on the left side of the page to publish or update your page.
  3. Congratulations. This page will now use the custom page template you selected.

King includes these custom page templates:

Page Styles

Full Width: This template features the main content area.

Centered: This template features the main content area with a maximum width of 700 pixels.

Content / Sidebar: This template features the main content area on the left and the sidebar on the right.

Sidebar / Content: This template features the main content area on the right and the sidebar on the left.

Other Styles

Landing Page – Boxed: This template features ONLY the main content area  with a maximum width of 1170 pixels. This template does not show Header, Sidebars or the Footer.

Landing Page – Centered: This template features ONLY the main content area  with a maximum width of 700 pixels. This template does not show Header, Sidebars or the Footer.

Landing Page – Full Width: This template features ONLY the main content area with a maximum width of the browser window. This template does not show Header, Sidebars or the Footer.

Redirect: This template is for creating a page that redirects to another URL.

To use the Redirect template follow these steps below:

  1. When editing or adding a new page, locate the Page Attributes block normally located on the right side of the page, then under the heading Template use the select list to choose the (Redirect) template.
  2. In the content editor enter the URL you would like to redirect to. e.g. https://themejoy.com
  3. Click the (Publish or Update) button on the left side of the page to publish or update your redirect page.
  4. Congratulations. This page will redirect to the URL that you entered in the content editor.

Figure 95

^ Top

Post Templates

The King theme offers custom post templates to change the display or functionality of a post. To use custom post templates follow these steps below:

  1. When editing or adding a new post, locate the Post Attributes block normally located on the right side of the page; then under the heading Template use the select list to choose the (Template) you would like for your post. (see fig. 96)
  2. Click the (Publish or Update) button on the left side of the page to publish or update your post.
  3. Congratulations. This post will now use the custom post template you selected.

King includes these custom post templates:

Post Styles

Full Width: This template features the main content area.

Centered: This template features the main content area with a maximum width of 700 pixels.

Content / Sidebar: This template features the main content area on the left and the sidebar on the right.

Sidebar / Content: This template features the main content area on the right and the sidebar on the left.

Figure 96
Post Templates

^ Top

Post Featured Content

The Post Featured Content editor (see fig. 97) located below the main content editor on the post add/edit screen, allows for the creation of unique and interesting featured “teaser” content above the post title on the main, author, archive, category, tag and post type pages. (see fig. 98)

The Featured Content editor works just like the main content editor and is very useful for adding a gallery, video, audio file, audio and video playlists, slider gallery or custom HTML and shortcodes that you would like to appear above the post title.

Figure 97
Post Featured Content

Figure 98
Post Featured Content

^ Top

Shortcodes

ThemeJoy shortcodes allow you to easily add really cool functionality to a Page, Post, Post Excerpt or Widget. ThemeJoy shortcodes are easy to use and integrated into the WordPress editor. (see fig. 100)

Some shortcodes have Attributes and Optional Attributes. Attributes are required in the shortcode. Optional Attributes are not required in the shortcode. To get started using shortcodes view the examples below.

Figure 100

Responsive Slider

[tj_slider opts="pager: true" css="bx1" classes=""]
[tj_slide]Slide[/tj_slide]
[tj_slide]Slide[/tj_slide]
[tj_slide]Slide[/tj_slide]
[/tj_slider]

Optional Attributes

  • opts: This optional attribute allows for a comma separated list of bxSlider options to be passed to the slider that will override the sliders default functionality.
  • css: This optional attribute allows for loading a custom CSS stylesheet for the slider. e.g. bx2
  • classes: This optional attribute allows for adding CSS classes to the slider. e.g. b_s p_10 mb_20

Responsive Tabs

[tj_tabs]
[tj_tab title="Tab 1" classes="p_10"]

Content

[/tj_tab]
[tj_tab title="Tab 2" classes="p_10"]

Content

[/tj_tab]
[tj_tab title="Tab 3" classes="p_10"]

Content

[/tj_tab]
[/tj_tabs]

Attributes: [tj_tab]

  • title: This attribute allows you to enter a title for the tab.

Optional Attributes: [tj_tab]

  • classes: This optional attribute allows for adding CSS classes to the tab. e.g. b_s p_10 mb_20

A rebuilt HTML5 valid version of the WordPress gallery shortcode.

Note: Nothing is required to use this shortcode, just create galleries like normal with the Add Media pop-up dialog.

Note: Add a lightbox to any image gallery by adding the attribute and value class=”lb-g” inside the gallery shortcode.

Retina Icons

[tj_icon image="facebook" link="https://www.facebook.com/ThemeJoy" title="Our Facebook Page" size="24" round="yes" classes="icon_border icon_shadow"]

Attributes

  • image: This attribute is for the icon. Below are the values to use in the image attribute.
    500px
behance
deviantart
dribbble
email
facebook
foursquare
flickr
github
google_plus
instagram
linkedin
myspace
pinterest
rss
skype
soundcloud
spotify
stumbleupon
tumblr
twitter
vimeo
vine
website
wordpress
xing
yelp
youtube
  • link: This attribute is for the URL you want the icon to link to.

Optional Attributes

  • title: This optional attribute allows you to a add a mouse hover over title to the icon.
  • size: This optional attribute allows for choosing the icon size. Default icon size is 32 pixels. These are the values to use in the size attribute: 16, 24, 32, 48, 64, 128.
  • round: This optional attribute with a value of yes will make the icon circular.
  • classes: This optional attribute allows for adding CSS classes to the icon. e.g. icon_border icon_shadow

Font Icons

You can use any of the icons from Font Awesome, Dashicons & Genericons. Over 950+ to choose from.

All opts:

[tj_fi box_size="64" link="https://example.com/" link_out="yes" background_color="#ffffff" background_hover_color="#cccccc" border_width="3" border_color="#999999" border_hover_color="#666666" border_style="solid" border_radius="50%" icon_size="24" icon_color="#999999" icon_hover_color="#fff" margin_left="10" margin_right="10" margin_top="10" margin_bottom="10" classes="shadow"]<i class="fa fa-diamond"><!-- icon --></i>[/tj_fi]

Simple:

[tj_fi box_size="64" border_width="2" border_color="#999999" icon_size="24" icon_color="#999999"]<i class="fa fa-diamond"><!-- icon --></i>[/tj_fi]

Optional Attributes

  • box_size: The size of the box around the icon. Enter a whole number like 32 or 64 etc…
  • link: The URL that you want this icon to link to. e.g. https://themejoy.com
  • link_out: A value of yes will make this link in a new tab/window.
  • background_color: Enter a hexadecimal color like: #00ff00
  • background_hover_color: Enter a hexadecimal color like: #00ff00
  • border_width: The width of the border around the icon box. Enter a whole number like 1 or 3 etc…
  • border_color: Enter a hexadecimal color like: #00ff00
  • border_hover_color: Enter a hexadecimal color like: #00ff00
  • border_style: The style of the border around the box. Enter a CSS border style. e.g. solid, double, dotted or dashed etc…
  • border_radius: The amount of curvature of the border around the icon box. Enter a pixels like 3px or 10px.
    Note: If you would like to have a circular icon enter 50%.
  • icon_size: The size of the icon. Enter a whole number like 24 or 32 etc…
  • icon_color: Enter a hexadecimal color like: #00ff00
  • icon_hover_color: Enter a hexadecimal color like: #00ff00
  • margin_left: The amount of left spacing in pixels on the icon box. Enter a whole number like 5 or 10 etc…
  • margin_right: The amount of right spacing in pixels on the icon box. Enter a whole number like 5 or 10 etc…
  • margin_top: The amount of top spacing in pixels on the icon box. Enter a whole number like 5 or 10 etc…
  • margin_bottom: The amount of bottom spacing in pixels on the icon box. Enter a whole number like 5 or 10 etc…
  • classes: This optional attribute allows for adding CSS classes to the icon box. e.g. b_s p_10 mb_20

Responsive Toggles

[tj_toggle title="Title" classes="b_s p_10"]

Content

[/tj_toggle]

Attributes

  • title: This attribute allows you to enter a title for the toggle.

Optional Attributes

  • classes: This optional attribute allows for adding CSS classes to the toggle. e.g. b_s p_10 mb_20

Responsive Videos

[tj_video url="//www.youtube.com/embed/abc123" slider="" classes=""]

Attributes

  • url: This attribute is for web address of the video.

Optional Attributes

  • slider: Set this optional attribute to yes when using this shortcode in the Homepage Slider or Shortcode Slider.
  • classes: This optional attribute allows for adding CSS classes to the video. e.g. b_s p_10 mb_20

Responsive Columns

[tj_column width="one_third" classes="b_s p_10"]

Content

[/tj_column]
[tj_column width="one_third" classes="b_s p_10"]

Content

[/tj_column]
[tj_column width="one_third_last" classes="b_s p_10"]

Content

[/tj_column]

Attributes

  • width: This attribute is for the width of the column. Below are the values to use in the width attribute.
    one_sixth
one_sixth_last
two_sixths
two_sixths_last
three_sixths
three_sixths_last
four_sixths
four_sixths_last
five_sixths
five_sixths_last

one_fifth
one_fifth_last
two_fifths
two_fifths_last
three_fifths
three_fifths_last
four_fifths
four_fifths_last

one_fourth
one_fourth_last
two_fourths
two_fourths_last
one_half
one_half_last
three_fourths
three_fourths_last

one_third
one_third_last
two_thirds
two_thirds_last

Note: Use a column width with “_last” for the last column in the row.

Optional Attributes

  • classes: This optional attribute allows for adding CSS classes to the column. e.g. b_s p_10 mb_20

^ Top

Miscellaneous

Enhanced WordPress Editor Quick Tags

Here at ThemeJoy we write a lot of HTML and these handy extra WordPress Editor Quick Tags are a HUGE time saver. Check out the picture below. We love them and think you will also. (see fig. 105)

Figure 105

Custom Page Options

Custom Options allow you to override or add certain functionality to a page. (see fig. 110)

  • Custom Headline: Select (Yes) to hide the default <h1> headline and enter a custom <h1> headline in the content editor.

Figure 110

Custom Fields

Custom Fields allow you to override or add certain functionality to a page or post. To use Custom Fields on pages or posts follow these steps below:

  1. When editing or adding a new page, locate the Custom Fields block normally located under the content editor, then under the heading Add New Custom Field: locate the sub-heading Name, in the text field below enter the Name of the custom field. e.g. redirect. In the field to the right enter the Value of the custom field. e.g. a URL like: https://themejoy.com
  2. Click the (Add Custom Field) button to add your custom field to the page.
  3. Congratulations. This page can now use the custom field you entered.

King currently supports these custom fields.

NameValue

redirect

* Enabled on Posts. This allows a blog post to redirect to another URL. For page redirection, use the Redirect template.

URL e.g. https://themejoy.com

Note: Simply delete a custom field if you are no longer using it.

  • Add a lightbox to any image gallery by adding the attribute and value class=”lb-g” inside the gallery shortcode.
  • Add a lightbox to any image link by adding the attribute and value class=”lb-i” inside the HTML image link <a> tag.
  • Add a lightbox to any video link by adding the attribute and value class=”lb-v” inside the HTML video link <a> tag.
  • Add a lightbox to any map link by adding the attribute and value class=”lb-m” inside the HTML map link <a> tag.

^ Top

Theme Updates

To update your King theme follow these steps below.

Note: We recommended that you make a complete backup of your site, it’s files and database before updating your theme.

  1. In the left navigation menu click (Appearance).
  2. Activate a different theme. e.g. the ThemeJoy “Update” theme included in your theme download
    Note: If you need help uploading the “Update” theme to your site, please refer to the above section Theme Installation on how to upload a theme.
  3. Click on the King (Theme Details).
  4. On the theme dialog that has opened, click the (Delete) button at the bottom right hand side of the dialog to delete the King theme. (see fig. 115)
    Note: Don’t worry; you won’t loose any of your site’s content while performing the theme update. The exception to this is that if you have made modifications or to the files and folders of the King theme they will be deleted and overwritten. Because of this, we recommend only making modifications in the King-child theme. The King-child theme will not be updated or deleted.
  5. At the top of the Themes page click (Add New).
  6. At the top of the Add Themes page click (Upload Theme).
  7. Click the (Browse…) button and find the theme king.zip file on your local machine and then click the (Install Now) button.
  8. Upon successful theme installation, DO NOT CLICK THE ACTIVATE LINK, instead click the (Return to Themes page) link to activate the King-child theme.
  9. On the Themes page click the (Activate) button on the King-child theme to activate your theme.
  10. Congratulations, your theme is updated.

Figure 115
Theme Updates

^ Top

Recommendations

We like and use these products listed below:

WordPress Web Hosting

Everyone needs great website hosting and these below are some of the best for WordPress!

SiteGround

SiteGround

DreamHost

DreamHost


Imagery and Photography

Check out the inspiring images from independent photographers and artists at:

Creative Market

Creative Market

Disclosure: These are affiliate links and we will earn a commission when you purchase products or sign up for these services from these links. We only link to companies and products we know and trust. Thanks for supporting our work.

It’s so easy – King makes it simple to build a great site. Start today!

Learn More

 

 

 

Comments are closed.