TheJ

Welcome! First of all, we want to thank you for purchasing our TheJ WordPress Theme.

In the following sections, we will show you how to set up and use TheJ theme the easiest way possible. Although there’re a lot of things written in this documentation, the theme itself is not very hard to use. This file is more of a reference if you do not know what to do, or if you are not familiar with WordPress.

#Files Included

The download package (.zip) that you get from ThemeForest contains the following files and folder:

• thej.zip: Main theme file that needs to be uploaded to host to install TheJ theme
• docs.html: Theme documentation (this file)
• thej-demo-import.zip: The plugin for demo import
• Plugins: Plugins needed for the theme

#Installation

We have written a very detailed guide on how to download and install a WordPress theme from ThemeForest, please follow the instruction in that article.

Also, please follow the guide to import the demo content if you want to have the site looks exactly like our demos.

#Setup the Homepage

It’s no doubt that the homepage is the most important page of the website. In TheJ, we use Visual Composer to build the homepage and other pages on the website, such as About Us or Services. So this guide is applied not only for the homepage but also for other pages that use Visual Composer as well.

Before going into details with Visual Composer, let’s setup the static page for the homepage. Doing that by following this guide.

#Create homepage

In order to build the homepage the same as in the demo, you need to follow the instruction to create a static front page.

Then, you can build the homepage content with Visual Composer. We have written a very detailed guide on building pages with Visual Composer. Please note that if you use our demo import plugin, then you already have all the content set up. You can start playing with them and change them to fit your requirements.

#Add/edit portfolio

The portfolio is the most important part of TheJ. You can use the portfolio to show your projects, creative works or anything. It’s the best way to let people know what you’ve done and get more clients.

In order to add the portfolio to your website, you need to install the Jetpack plugin and enable the Custom Content Types module. Please follow this instruction to understand how to do that.

#Add/edit testimonials

TheJ also integrates with Jetpack testimonial custom post type that you can see on the demo homepage. Similar to the portfolio, please follow this instruction to understand how to do that.

#Theme Options

After done installing and setup the theme, you might want to customize the theme to fit your needs. All the theme customization are the location in Customizer → Theme Options. You can change all theme options in one place and preview the changes in real-time! There are various options for the theme and they’ll be explained in the sections below

#General options

The general options are located under General section. There is only 1 option for the website site icon. The site icon is an icon associated with a website or web page intended to be used when you bookmark the web page. Web browsers use them in the URL bar, on tabs, and elsewhere to help identify a website visually. Also, it is used as application icon of the mobile device.

To add a site icon, follow these steps:

1. Click the Select Image button. A popup will appear allowing you to upload a new logo or select an existing one from the Media Library.
2. Once you upload or select an image, you can crop it to make it fits the position. After done, click Save and your logo will appear in the preview panel.

#Header options

The header in TheJ has a fixed layout and contains the following elements:

• Site logo
• Search form
• Main menu
• Cart icon (if you enable e-commerce functionality with WooCommerce plugin) and mobile menu toggle icon
• The post title area in other pages (not homepage)

Among these elements, the search form has no options. The following will show you how to customize the other elements.

#Logo

By default, TheJ displays the site title but you can change that to display site logo. The site logo feature requires WordPress 4.5, so you need to upgrade your WordPress to version 4.5 if you have an older version. If you couldn’t upgrade, then the only option for you is displaying the site title.

In order to add a logo to your site, go to Customizer → Theme Options → Header and click the button Select logo to upload the logo or select from the Media Library.

#Main menu

Although the theme is working now and it shows menu, but because we haven’t created a menu for primary location, the theme will display all pages by default. As the number of pages is large, displaying all of them in the menu is a bad idea.

Following these steps to create a menu (here we will use the WordPress Dashboard instead of the Customizer because this allows us to add mega menu as described in the next section):

• Go to Appearance → Menus
• Select an existing to edit, or click Add a menu. Note: when you import the demo, you already have a menu Main, so select it if you want to have the same menu as in the demo.
• Click Add items to add items to the menu
• When you’re done adding menu items, check Primary Menu for Theme locations at the bottom of the page

#Mobile menu

There is also 1 option for the mobile menu here in the Customizer → Theme Options → Header. The mobile menu is displayed when you click on the toggle icon on the top bar. The option allows you to select which type of content will be displayed in the mobile menu: the main menu or widgets.

If you choose the main menu and social icons then all items of the main menu and social icons will be displayed in the mobile menu.

If you choose widgets then you need to go to Customizer → Widgets and you will see a new sidebar Mobile. Simply add new widgets to this sidebar and they’ll display in the mobile menu.

#Title alignment

On single posts or pages, we also have the option to align the page title.

#Footer options

The footer of TheJ is simple and has only the copyright text. To change it, go to Customizer → Theme Options → Footer to start customizing the footer.

You also have another option to show or hide Go to top button.

#Blog options

The blog options are located in Customizer → Theme Options → Blog. There are several options as follows:

Options	Description
Blog/Archive layout	The layout for the blog posts: list, grid or masonry
Hide post thumbnail on blog archive page	Do you want to hide post thumbnails on the blog page? See Minimal demo
Content display on blog archive page	What type of post content will be displayed. Available options are Post excerpt, Post content or Post content before more tag. To understand what those values mean, take a look at the screenshot bellow:

Where:

• (A): Whole post content, this is what you enter in the editor.
• (B): Post excerpt, which is optional hand-crafted summaries of your content. Learn more about the manual excerpt. If you don’t enter anything in the excerpt box, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
  (C): The post content before more tag
  (D): The more tag

Return to blog option: if you choose

• Post excerpt: The theme will get post excerpt and display it. Remember: if you don’t enter excerpts for the post, WordPress will auto generate excerpt from post content by taking a number of words from the beginning of post content and removing all HTML tags from it.
• Post content: The theme will get whole post content and display it. This is the default value.
• Post content before more tag: The theme will get only the post content before more tag and display it.

Options	Description
Post content limit (words)	The number of words of the post content will be displayed on the blog page.
Hide related posts on single post	This option allows you to hide related posts on the single post. It’s useful if you use another related posts plugin.

#Layout options

Layout options allow you change the sidebar position for your website. You can put the sidebar on the right, left or hide it. Doing that by going to Customizer → Theme Options → Layout:

#Color options

TheJ allows you to change the color scheme and colors of some elements to have a unique look and feel. There is no limit to pick colors in TheJ (we will constantly update the theme with more options for colors).

To start customizing the colors, please go to Customizer → Theme Options → Colors and you’ll see the following options:

To change the color scheme of the theme, you need to adjust 2 colors:

Options	Description
Primary color	The primary color for the theme, which is used for links, buttons, social icons. The default is black.
Secondary color	The secondary color for the post meta, categories, post date. The default is gray.

To personalize the theme, TheJ adds the following options for you to customize the top bar, the primary menu, and some elements, all are self-explained by their name:

• Header text color
• Background color

#Typography options

One of the coolest features of the TheJ theme is custom typography. This feature allows you to select custom fonts, font sizes, font styles for various elements on the website without touching code. TheJ supports all Google Fonts (more than 700 fonts) which is the largest free collection of fonts available on the Internet.

To start using custom fonts for TheJ, please go to the Customizer → Theme Options → Typography and you’ll see the following screenshot:

TheM allows you to change typography for:

• Body text (post content, post summary)
• Headings (H1, H2, …, H6 tags)
• Primary menu
• Post title

These are the main elements of the website and for each element, TheJ sets up a necessary group of settings to adjust such as:

• Font family: which can be selected from 700+ fonts from Google Fonts. To see how they look, you can simply select them and see the changes in real-time or go to http://google.com/fonts and search for the font name.
• Font weight: normal, bold, extra bold, etc. Some fonts have only some weights, so make sure you preview the result.
• Font size: in pixels. Leave it blank to use the default value.
• Line height: in pixels. Leave it blank to use the default value.
• Text transform: UPPERCASE, lowercase, Capitalize
• Letter spacing: in pixels. Leave it blank to use the default value.

Note that some elements don’t have all the above settings. We add only the settings with a serious consideration that those settings are really needed for the elements.

If you want to change typography for other elements or custom the fonts more deeply, please use the Custom CSS module in Jetpack.

#Portfolio options

TheJ has a built-in portfolio section which shows your projects in a beautiful masonry grid with a filter. This is a great way to show to your visitors what you have done in the past by highlighting previous projects. To know how to add or edit projects, please follow this guide.

The settings for portfolio are simple and put in Customizer → Theme Options → Portfolio:

Options	Description
Portfolio page title	The title for portfolio archive page (at http://yourdomain.com/portfolio). By default, it’s just Archive which is useless. Enter something meaningful here like Portfolio, Our works, Recent Projects, etc.
Portfolio page content	The content that displays below page title in the portfolio archive page
Portfolio layout	Choose which type of portfolio page? Grid or masonry. We recommend masonry as it’s more beautiful.
Portfolio Masonry Custom	Enter the custom layout for masonry. This option is used to setup the width of each element in the masonry grid. Each number means the width of an element: 1: One square block with 25% of the width. This is a base unit (1×1). 2: One rectangle block with 50% of width (2×1) 2v: One rectangle block with 25% of width and double height (1×2) 4: One square block with 50% of width (2×2)
Pagination style	The pagination style. The theme supports 3 pagination style: default next/prev style, infinite scroll and load more button. Note that if you choose infinite scroll or load more button style, you need to install the Jetpack plugin and activate the Infinite scroll module.
Pagination load more text	The load more text for the load more button. Only applied if you choose to load more button style.
Single portfolio display	Choose how to display single portfolio image: normal (image left, content right) or full (full-width image on the top and content on the bottom)

#WooCommerce options

TheJ supports WooCommerce plugin – the best and most popular e-commerce plugin for WordPress. Essentially, you do not need to do anything. TheJ smoothly integrates with WooCommerce and setup everything for you.

To change the options of TheJ for WooCommerce, please go to Customizer → Theme Options → WooCommerce:

There is only 1 option for WooCommerce: default layout for shop page which can be a list, grid or 2 column.

#Widgets

TheJ plays nicely with default WordPress widgets. Besides, the theme has some additional widgets that might be useful for you. In order to add widgets to your website, simply go to Customizer → Widgets or Appearance → Widgets and select widgets begin with TheJ to your website. All the options of the widgets are self-explained.