Early Black Friday Starts NOW!

Your content will be up shortly. Please allow up to 5 seconds

Customize Your WordPress Theme

By Christopher Lin on March 9th 2014

These are the instructions for the soon-to-be-released SLR Lounge WordPress Theme v3. For updates on the release, please join this group.

To customize your WordPress theme, first click on “Customize” link as shown below.

06-customize-wordpress-theme

After you’re on the customize page, you’ll be able to customize each aspect of your website. As you make changes in the panel on the left, you’ll see the page refresh on the right to reflect your changes. However, nothing changes on your actual, publicly visible site until you press the blue “save” button.

Customizer Sections:

  1. Information
  2. Website Layouts
  3. Background Colors
  4. Navigation & Logos
  5. Header Fonts
  6. Main Content Fonts
  7. Footer Fonts
  8. Comment Fonts
  9. Sidebar Fonts
  10. Slideshow (For Blog Only)
  11. Social
  12. Embellishments
  13. Advanced Options
  14. Widgets (Footer and Sidebar)

1. Information

The first section you see is the “Information” section that provides general information on our theme. You are currently viewing the instructions and updates page.  In this section, you can also reset your theme settings.  However, use caution, as you will have to reupload your logo, favicon, slideshow images, and embellishments.  You will also have to redo any custom settings you adjusted.

Updates – We are currently on version 3.0. Check in the following location within your theme to see if your theme version matches.

Appearance -> Themes -> Theme Details

theme-details

First click on “Theme Details

theme-version

Then click find the version number, as you see in this image

2. Website Layouts

In this section, choose your layouts for your menu, blog home and portfolio home.

Note: The number of posts displayed on your home page is set within the Reading Settings. (Settings -> Reader -> Blog pages show at most).  For example, if you have this set at 1, only one post will show on your blog post home. We highly recommend against using a number higher than 20. The more posts that need to be loaded, the slower the load times will be from “previous” and “next” pages and the choppier the “load more” will function.

reading-settings

Blog Home Page Layout

Choose Your Blog Home Page Layout. This layout choice only affects the blog main page. It does not determine the layouts for the individual blog posts, portfolio pages or other pages on the site. If you would like to increase or decrease the number of posts shown here, go to your Reading Settings (Settings -> Reading).

main-menu-centeredCentered – Centers the menu items under the logo. Decreases the amount of room available for the primary content but may work better with your logo or Blog Page Layout.

blog-one-columnOne Column – Displays a featured image from each post and an excerpt in a single column.

blog-one-column-fullOne Column Full Text – Displays the full posts (all images and text) chronologically.

blog-two-columnTwo Columns – Displays a featured image and excerpt from all posts (all images and text) chronologically in the left column with an empty sidebar (right) column for widgets.

blog-two-column-fullTwo Column Full Text – Displays the full posts (all images and text) chronologically in the left column with an empty sidebar (right) column for widgets.

blog-one-column-images-onlyOne Column Images Only – Displays a single featured image from each post chronologically.

pinboardPinboard – Displays thumbnails of the featured images from each post chronologically.

pinboard-full-screenPinboard Full Screen – Displays thumbnails of the featured images from each post full screen chronologically.

 

Blog Individual Page Layout

This section only affects the layouts of the individual blog entries. You have two choicees, One Column and Two Columns.
blog-one-columnOne Column – Displays a the full blog post in a single column.

blog-two-columnTwo Columns – Displays the full blog entry in the left column with an empty sidebar (right) column for widgets.

 

Portfolio Home Page Layout

This section controls the layout of the Portfolio Home Page. The Portfolio Home Page is the full listing of your portfolio Items (also called projects). If you would like to display multiple projects, select “Pinboard Full.” If you’d like to instead display images from a single project, select the “Hero” option. Hero layout only displays the images in your first project (the oldest one) and does not display the rest. It displays it full width and height of the browser window.

If you are a photography studio with multiple portfolio galleries, we suggest using the “Pinboard Full” layout. If you are a photographer with a few select images that you would like to display, we suggest using the “Hero” layout.

pinboard-full-screenPinboard Full Screen – Displays thumbnails of the featured images from each project full screen (chronologically). ***Note: The project must have “feature this content” checkbox checked for it to display on this page. For more information on setting up your portfolio, including ideal portfolio dimension and more, click here.

hero-portfolioHero – Displays images from a single project, pulling from the images in the first project (the oldest one). ***Note: Project must have “feature this content” checkbox checked for it to display on this page.

Portfolio Individual Page Layout

This section controls the layout of your individual portfolio pages. You can choose between two layouts, a “tearsheet” layout or a “hero” layout.

tearsheetTearsheet – This is the recommended display for your portfolio images because you are able to keep image sizes relatively small (compared to the hero layout).

hero-portfolioHero – Displays images in your portfolio gallery in full screen. For more information on setting up your portfolio, including ideal portfolio dimension and more, click here.

 

3. Background Colors

Main Background Color – Select your main Background color. This appears below the header. above the footer and behind the main content. See the image below.
background-colors

The grey areas are the “main background color.”  This also applies to the backgrounds of other pages like the blog home and portfolio home.

Main Background Image – If you would like to use an image rather than a solid color, upload your background image here.  You can choose to have your background image tile (repeat) or remain static (not repeat)

Note: for interesting, free image backgrounds, we recommend SubtlePatterns.com

Header Background Color – Set the color of your header background here.

header-backgroundThe white section that includes the logo and the menu is considered the header.  Set the background color for that section here.

Content Background Color – Determine the background color of your content area.

content-background-color See the Blue Background in the image above for an idea of what part of the site this controls.

Footer Background Color – This controls the background color of the footer.

footer-backgroundSee the areas marked with a red box to get an idea of what this controls.

Comment Background Color – This controls the background color of the comment section of each page.

Navigation

Your theme supports 2 menus, the Header Menu (which is at the top of your page) and the Footer Menu (which is at the bottom of your page). Select which menu appears in each location. You can edit your menu content on the Menus screen in the Appearance section. Click here for more details on setting up your WordPress menu.

wordpress-menus

Back to Top Icon

This icon appears at the bottom right of your website and takes the user back to the top of the page.
back-to-top

 

Arrows or Load More

Set how users navigate to view more posts or portfolio entries.  By default, the theme is set to “load more” but you may change it here to use the arrows.

previous-next

Example of Arrows

load-more

Example of Pagination

“Load More” Background Color – Set the background color of the “Load More” navigational element.

“Load More” Background Hover – Set the background color of the “Load More” navigational element on hover.

Previous Page/Post Icon – Upload your custom Previous Page or Post Icon if you would like.

Next Page/Post Icon – Upload your custom next Page or Post Icon if you would like.

Logos

Favicon – A Favicon is the symbol that appears in the tabs of most browsers. Upload your Favicon here. A favicon should be 32px by 32px and should be a transparent PNG file.

01-favicon

Logo – Upload your logo here. the logo does not resize so you must upload the exact size. we recommend a logo that is no more than 300 pixels wide.

logo

Logo Text (if no image) – If you do not want to use an image as the logo, input the text that you would like to use instead here.

text-logo

5. Header Fonts

Logo Font (if no image) – This controls the styling of the text in place of your logo.

Menu Font Options – Adjust the font for the menu items.

Search Font – Adjust the font settings of the text within the search bar.
search-font

6. Main Content

Post Info (in individual posts) – Choose to display or not to display the date, categories, and tags for each individual post.
date-time-formatt

Title Font – Adjust the font settings of the Titles of each post.
title

Body Font – Adjust the font settings for the body of each post.
main-font

Link Color – Adjust the color of the links within each post.
link-color

Blockquote Font – Adjust the settings for the Block Quotes.

blockquote

Enable Drop Cap & Drop Cap Font– Check this box if you’d like to enable Drop Caps for your posts and pages.

dropcap

Image Hover Title Font (Pinboard & Image Only Layouts Only) – Within the Pinboard and Image Only layouts, you may set the font of the titles that appear upon hover.

title-font

Image Hover Category Font (Pinboard & Image Only Layouts Only) – Within the Pinboard and Image Only layouts, you may set the font of the categories that appear upon hover.
category-font

Widget Title Font – Set fonts for the Widgets in the footer. Think of widget titles as the titles of the columns in the footer.
footer-titles
Post Title Font – Set the font for the titles of each individual post or page within the footer.
footer-title
Post Info Font – Set the font for the info (date and number of comments) for each post within the footer.
footer-info
Post Excerpt Font – Set the font for the excerpt for each post within the footer.
footer-excerpt
Copyright Font – Set the font for the copyright information that appears at the bottom left corner of your website.
footer-copyright

8. Comments Font

Set the font for title of your comments section (the actual word – Comment)

Comment Title Font

Set the font for title of your comments section (the actual word – Comment)
comment-title

Comment Name and Date Font

Set the font for the names of the commenters and Dates for each comment.
comment-name

comment Body Font

Set the font for the text of the actual published comment.
comment-body

Comment Field Font

Set the font for the text of the unpublished comment as it is being typed.
comment-field

Comment Submit Button Font

Set the font and background color and hover color of the submit button.
comment-submit

Widget Title Font

Set fonts for the Widgets in the sidebar. Think of widget titles as the titles of each section of the sidebar.
background-sidebar-image

Post Title Font

Set the font of the Post Titles within the Sidebar
sidebar-title

Date Font

Set the font of the post dates within the sidebar.
sidebar-info

Excerpt Font

Set the font of the post excerpts within the sidebar.
sidebar-excerpt

10. Slideshow (Blog Layout Only)

wordpress-slideshow

Slideshow Options

Set your slideshow options here. Choose which places you want to show your slideshow as well as the height and duration.

  • Enable slideshow – Decide where you want to display the slideshow. You can either disable completely with “No Slideshow,” show it on the “Blog Home Only,” show it on the “Blog post only,” or show it on the “blog home and post.”
  • Slideshow Height (px) – Input your slideshow height here. We recommend keeping under 300 px.
  • Slideshow Transition Duration – Choose the speed of the transitions from image to image. We recommend “Normal” but you may speed it up or slow it down here.

Slideshow Images – Upload your slideshow images here. Be sure to use exact dimensions based on the height you set in the previous options and minimize your overall file size in order to speed up your load times. You may upload up to 6 images.

11. Social

Set your social media settings that affect the menu icons as well as the Pinterest image overlays.

Pinterest Integration

Determine the position of your pinterest icon over your images and upload your own custom pinterest icon.

pinterest-overlay

Social Icons

This section controls the content and styling of the social icons in the menu.

Icon Color – Controls the color of the social icons in the menu

social-icon-colore

Social Network URLs – Enter the full URL of your Social Networks Page (if you would like an icon to display)

Other Social Network Icons –  Upload an icon of any social network not listed above. (if you would like an icon to display)

12. Embellishments

Use this section to add and adjust the small embelilshments on your site.

Menu Underline Embellishment – This controls the embellishment that underlines the menu item. You may upload your own here.
embelishment

Post Separator (Body) – This controls the embellishment that separates each post in certain blog home layouts. See the image below.
post-separator

Post Separator (Sidebar) – This controls the embellishment that separates each post in the sidebar of certain blog home layouts
sidebar-embellishment

Section Title Background Image – This controls the optional background image that appears behind each widget title in the sidebar.
background-sidebar-image

13. Advanced Options

Copyright Information – This is the text that appears in the bottom left corner of your website. To display the current year, use the following: © $Y$

footer-copyright

Date Format – Select the date format you would like to use. We recommend sticking with the format most familiar with your region.

Custom CSS – Enter any custom CSS you would like to include in your theme here.

Custom JavaScript – Enter any custom JavaScript you would like to include in your theme here.

Widgets

Input your content for the sidebar and the footers in the widgets section. In the customizer, the widget options only appear for the page that you are currently on. For example, if you are on the home page and you click into “Widgets” in the customizer, you will be modifying the widgets for the home page only. If your layout selected has a sidebar, you will have options for modifying the sidebar. If not, sidebar options will simply not appear.

posts-widgets

In the image above, we are viewing an individual post. So the customizer on the left only gives us widget options for individual posts. If we had selected a layout with a sidebar for individual posts, the customizer would also give us options for sidebar widgets as well.

Recommended Widgets: While you can put any widgets you would like (default widgets, 3rd party widgets from plugins you may have installed, etc), we have created a set of custom widgets for your use. Please use the following:

1) SLR Lounge Theme: Featured Content

Post Footer Left – The footers of the theme are divided into three columns.  In the example below, you see “Post Footer – Left” indicating that you are working on the individual posts’ left footer column.

00-left

Title: Whatever you type in here will appear as the title for the column.

01-featured-posts

The next three fields, “Content Type,” “Category,” and “Number of Items to Show” are pretty self explanatory.  In the “Content Type” field, choose between showcasing featured posts or featured projects.  In the “Category” field, choose which category to pull the featured content from.  In the “Number of items to show” field, indicate how many posts you would like to show in that column.  We recommend a number between 2 and 4.

Important Note: Your posts will not appear unless the “feature this content” box is checked within each individual post or project.

02-posts

If the “Display the featured image” box is checked, the featured image will display.  If it is unchecked then the image will not display.

03-featured-image

If the “Display the excerpt” box is checked, the excerpt will display.  If it is unchecked then the excerpt will not display.

04-excerpt

If the “Display the date and number of comments” box is checked, the date and number of comments will display.  If it is unchecked then the date and number of comments will not display.

05-date

2) SLR Lounge Theme: Recent Posts

The “Recent Posts” behave very similarly to the “Featured Content” widget. The “Title” is the title of the column, the “Category” is the category from which you would like to pull, the “Number of posts to show” is simply the number of posts you would like displayed, and the checkbox for “Display the featured image” controls whether or not the featured image appears.

recent-posts

Co-Founder of SLR Lounge and Photographer with Lin and Jirsa Photography, I’m based in Southern California but you can find me traveling the world. Click here to connect on Google +

Q&A Discussions

Please or register to post a comment.

  1. Boris Soliz

    Is this theme being supported at all? None of my images are now showing on my site. Help please!

    zilosphoto.com

    | |
  2. gillianf

    Sounds so silly, but how do I use the “projects/portfolio” I thought I could modify its use for the design work I also do, but I fail to see how to display them. Any thoughts or sample sites would be much appreciated!! And thanks again for the awesome theme. I’ve been using it since the first one was released and can’t see myself changing anytime soon! :D

    | |
  3. Clifford Opwonya

    I am having challenges displaying my social media icons on my site. Any help?

    | |
  4. Richard Bremer

    Is there an optimal size for portfolio individual pages, tearsheet? My images are sharper when I upload them then when I view them in tearshoot mode. I don’t want my clients to see unsharp images, so hopefully someone can help me with this. Thanks!

    | |
  5. Scott Cook

    How can I add a custom font to the font family lists in the customizer? I have a font I think I want to use for the header of the blog and possibly the article titles.

    | |
  6. Boris Soliz

    hello, I have a quick question. Is there a way to add social features to each post? For example, I want to add the ability to post to facebook from each post. Is there a widget for that or maybe im missing something?
    Thanks.

    zilosphoto.com/blog

    | |
  7. owen roberson

    Usually while installing or updating any theme, people complain about losing widgets. However they don’t understand it happens because of several reasons. Improperly built updates version is also one of those reasons. Instead of being irritate they should try to update their WP theme manually or via FTP method with some other source. Hopefully the problem would get resolved.

    | |
  8. tracy creighton

    Where do I go to get help with customizing this theme? I can’t get the image hover title text to change color! Thanks!

    | |
  9. Dylan Martin

    I am about to switch to wordpress so I definitely think this article may come in handy. Thank you for putting it together.

    | |
  10. Steven Pellegrino

    Thanks for fixing the link that leads to this page, however there’s a couple of other issues:

    1. This link doesn’t work: https://www.slrlounge.com/school/setting-up-your-portfolio/%E2%80%8E
    2. At the end of this sentence, you refer to a link, but the words “click here” are not linked to anything:”

    Hero – Displays images in your portfolio gallery in full screen. For more information on setting up your portfolio, including ideal portfolio dimension and more, click here.”

    I wouldn’t have noticed this, but THAT is the info I was looking for! What I noticed is that on my site the photos seem to be cut off, so I’m thinking they’re either too large or I don’t have something set correctly and I’ve looked through the settings and cannot find the answer.

    Other than that – I’m loving the theme. Easy to set up and work with. I’ve been very frustrated with other photography themes for WordPress, but really liking yours. I certainly appreciate you making it available.

    | |