Theme Options & Customizer

Theme Customizer

The WordPress customizer is a tool which allows you to edit all the style options from a theme and visualize the changes live, as you make them. To open it go to    Appearance > Customize.

1. General

This section has only three options. One controls the parallax effects throughout the entire theme. The next option here is the sidebar behavior, from where you can either make the sidebar stick to the left at all times (will have a slightly modified design and move to the top on screens smaller than 1024px) or let it auto hide itself. The last option simply enables or disables the 3D animation for the sidebar.

2. Logo

This section refers to the sidebar (navigation) and all things placed in it. You can upload your logo, which can be of any size. You need to also  upload a double sized logo for retina displays and a favicon. If you do not do this, the theme’s logo will appear on retina displays and the favicon will be also the theme’s. Make sure that you also complete the logo’s size correctly (in px).

3. Navigation

In this section you can change the menu used in the sidebar (more on this later).

4. Portfolio

The options in this section control the look of your portfolio:

  • Hover auto color: this enabled the autocolor on the back of each thumbnail. If it’s disabled all thumbs will have the same background color, otherwise they will have unique colors based on the images you use. This only works for the 3D hover style.
  • Choose the portfolio page: after you create the page you’ll use to display your portfolio, select it from this dropdown box.
  • Thumbs hover: there are three styles of thumbnail hovers. A modern 3D one and two classics. Note that when you’re in browsers that do not support 3D effects (and you have this selected), you will see the Simple #1 effect. And yes, all IEs are included in this category.
  • Thumbs ratio: you can choose one of the four popular ratios for your thumbnails. These will be resized automatically based on your screen size so you can’t choose how many columns you want, since these will be different on absolutely each screen size.
  • Thumbs max width: the grid is a fullscreen grid, which means that it will look different for each user who sees your site, depending on it’s screen size. Though you cannot control how many thumbs there are on the screen, you can control how big they are. As i said, thumbnails will always be resized to fit the screen, but they have a maximum barier which is by default at 340px. This means that no matter how big the screen is, your thumbnails won’t be larger than 340px. If you want larger thumbnails (for smaller portfolios) or smaller thumbnails (for larger portfolios), this is the place to work with.
  • Portfolio pagination: if you plan to have more than 40-50 portfolio items you should enable pagination. This allows you to have an unlimited number of items in your portfolio grid, without worrying about performance issues.
  • Portfolio items / page: a default of 24 is there, but you should use whatever you use comfortable with.
  • Modal projects dummy background: when a user comes from a direct link to one of your modal projects, they will see the project against a white background. If you want to display a dummy background (representing your thumbnails or anything else), put it here.
  • Modal project close by click: another cool feature for the modal projects only! If enabled, when a user clicks outside the modal project’s window, the project will close.

5. Gallery

The settings here are identical to the ones above, because the gallery has the same grid form as the portfolio, the only difference being in the projects view. So except the “modal dummy background” you have all the settings as in the portfolio, but these will be applied only in the gallery of course.

6. Blog

Here you a two options which will not apply only to the blog, but to search results and archives altogether. The first one controls the style of the blog, giving the option between a masonry grid portfolio (with boxed content in the single display) and a more classic one (with full width content). The next option sets the sidebar; please note that if you choose the masonry grid display, the sidebar will only appear in the single posts view.

7. Colors

You have four colors to change in this theme. The main color is the most used color in the theme (for buttons, links, sidebar, other backgrounds, etc..), while the secondary and tertiary colors refer to lesser used colors, such as the sidebar’s second color (2nd) and a couple of borders (3rd). The last color affects the main menu from the sidebar, and it is useful when you’ll choose light colors for it.

The swatches that you saw in the online demo are composed from these colors (left to right in the preview’s theme customizer):

  • #45b363 / #43a05b / #a2d9b1
  • #339a74 / #268e68 / #add7c7
  • #1d7f5b / #177150 / #bbd8cd
  • #3fb0c3 / #2da1b4 / #9fd7e1
  • #2293a6 / #198699 / #b2dce3 (these are the defaults)
  • #137d8f / #0f7182 / #b8d8dd
  • #9374ae / #8869a3 / #d4c7df
  • #775b8f / #6c5283 / #d6cddd
  • #dca13a / #c9902e / #edd09c
  • #c46d32 / #ab5c26 / #e7c5ad
  • #c44732 / #ad3b28 / #edc7c1
  • #c44d55 / #a74149 / #edc9cc
  • #425660 / #314149 / #d0d5d7
  • #292f32 / #1d2123 / #dde1e3

8. Typography

The last section of the customizer holds two fields for custom fonts. These are all  Google Fonts. Please note that because Google changes it’s fonts on a regular basis, not all of the fonts you see on Google may be included here.

The font used in the online theme preview is Raleway (both headings and body). 

Whenever you make a change you’ll see the actual website refresh with the changes you do. Make sure that when you’re done, you hit the Save & Publish button. After this, you can close the customizer.

Theme Options

Other than these options which apply to the styling of the theme, you have another set of options, which don’t affect the style, but the functionality, and you should do a quick look there. You can find a new menu item under Appearance > Theme Options.

1. Analytics

Inside this section you should paste your Google Analytics code. If you do use these, please don’t forget to enable them first, otherwise not all page clicks will be triggered, even if you have your code placed. 

2. Custom CSS

If you have any css rules that you may want to add to the website, this is the place to add them. However, if you want to do extensive modifications, i suggest that you go with a child theme, because it’s better. But more on this later. If you don’t have more than 100 lines of code you can paste them here.

3. Admin

Here you have a field for the replacement of the administrator login logo. Just make sure that you will respect the size written there and you can replace the theme’s login logo with your own brand or the client’s.

The second thing you have here is a cool feature that lets you “minimze” the admin bar. Beginning with WP 3.8 the admin bar changed a bit, so i’ve modified it by default to be transparent. Maybe it’s better to leave it this way than to “minimize it”, but the option will always be there anyway.

4. Updates

This is the place where you can configure auto updates by inserting you marketplace username and API key. 

This feature doesn't always work on certain servers because of various limitations or issues that caused by Envato and thus out of our range to fix. 

If this is your case, please use automatic updates.
UP NEXT: Homepage & menu setup