Setup Tutorials for Circumference Lite

Welcome to the Setup Tutorials for Circumference Lite. These are the standard guidelines to help you install, configure, and customize your newly downloaded theme. If you have any requests for additional tutorials relating to this theme, please contact me and I will review your suggestions. These tutorials are also based on the assumption you have a basic understanding of how WordPress works.

Create a Contact page like the demo site

If you like the way the live demo site shows a contact page, this tutorial will help you get the exact same look and functionality as the demo site shows. Contact Demo Create a Page Go to Appearance >> Pages >> Add New Title your page and write an intro to your contact page Select the Default Template for the page which will give you a right sidebar Click Publish (or Update) Install Contact Form 7 Go to Plugins >> Add New Type in “Contact Form 7” in the field Click Install and Activate it (it gets added to the top part of your admin menu group as “Contact” Go to Contact >> Contact Forms >> then open the sample form that is there Go to the “Form Snippet” you see below and copy the code Paste the code in the contact form 7 plugin and replace their sample form…    read more 

How to make a Media Box like the demo

Just like the demo website shows the Media Boxes, this tutorial will help you make them. Demo You can have 1, 2, 3, 4, or even 6 media boxes, but ideally, the suggested column count would be 2, 3, or 4. Media Boxes can be used for a variety of things, but what you put into them will be up to you. You should also have some basics of HTML and CSS to get creative with them. Start with a container: <div class=”row”></div> The above container will start things off, and the next step is to decide how many columns you plan to have. If you want to have 3 like the demo site, then you now need to insert the following code inside the container we just did above: <div class=”col-md-4″></div> You will make three of these instances, and then inside each one will be your content. These containers…    read more 

Use Excerpts instead of the content summary

There’s a couple ways to display post summaries in a blog: Content summary with the classic “Read More” Using excerpts which have a set number of words (sometimes characters) Content Summary Using the content summary method is the most common because when you create your post, you select where you want to split your post with a “Read More” tag. This gives you a shortened version of your post on the front-end of your website with a Read More button or link. Excerpts You actually get a couple excerpt options where the first takes a certain number of words from the beginning of your post, while the other lets you create your own “custom excerpt” instead of using the content from your post. It’s also important to know that excerpts DO NOT inherit formatting such as bold, underline, italic, etc. They also strip out media such as images.  However, there…    read more 

Show widgets on select pages but not all pages

WordPress does not make this easy when you want to publish a widget to just one (or a few) pages because there is no built-in function for that kind of capability, so you have to use plugins. There are a few plugins you can use, but the one that I prefer myself is called Dynamic Widgets. What this plugin does, is add a small text link at the bottom of every widget that either shows as “Static” or “Dynamic”. Static means it’s not assigned to any location yet, while Dynamic means it is. ** This plugin has a lot of options for you to choose where you want a widget to be published, so you will want to refer to the plugin’s documentation and the developer’s website. Expect a bit of a learning curve because the capability of this plugin is extensive, but will help you layout your site’s widgets…    read more 

Change the colours of Circumference Lite

Changing colours of Circumference Lite is very easy with the built-in colour selector that is added to the WordPress customizer for this theme. Go to Appearance >> Customize  Go to a tab such as Colours and anywhere you see the colour selectors, click on one to bring up the selector window Choose your colour by moving the circle cursor around the colour field Preview the colour changes in the window to the right and when happy, click Save and Publish You will find colour selectors on other tabs of your customizer, not just on the “Colours” tab.

Manage fonts

Managing fonts and providing a large selection of fonts within a theme is actually very difficult because of how many are used throughout the theme. You have font families, font sizes, line-heights, and even the issue of who is viewing your website because fonts for Windows and MAC’s are very different and some fonts that might be available on one, may not be available for the other. The best way to manage fonts, more so if you want to choose different fonts is to use a font plugin, something like WP Google Fonts, or any other font plugin that grabs your attention. When using a plugin, it means you can use it on other themes, should you decide to change themes down the road. It also lets you target select elements in your web pages such as headings or other elements that have classes, to change the font for that…    read more 

Make a WordPress Gallery

WordPress has its own gallery shortcode that generates a gallery for your post or pages…even adding on into a text widget is possible. Styling is usually provided from the default WP theme such as Twenty Thirteen, Twenty Fourteen, and others that may be available. Circumference Lite uses the default gallery styling as a foundation, but with a little enhancement of design to give you a little more for your gallery. Preparing Your Photos First thing you want to do is prepare your images that will be included in your gallery. I’m one to always stress consistency with image sizes, but you do not have to have each photo the same size. I should also mention that with a previous tutorial, I mentioned about clearing your Media Settings (thumbnail sizes) and recommended you create your own sizes as you need them. If you do not have the capability to crop and…    read more 

Using the WordPress Header feature

The WordPress Header feature is common, but how it’s used is different depending on the theme and how it utilizes this built-in feature that is part of WordPress. Circumference Lite uses it to style the background image of your banner area. You have a couple options: Use one standard background header image throughout your website Use the WordPress Header setting to provide random backgrounds when the page refreshes or when visitors navigate page-to-page By default, your header background will look like this:   Change or Add a Custom Header Image As mentioned, you get a nice muli-coloured blue header image which you can keep, remove, or add more images to create a random rotating function when using the WordPress header feature.  I should also mention that if you want to accommodate the largest monitors that have 2560px resolutions, you will want to use images that are that size in width….    read more 

Hide Page Titles

Many people actually like to hide their page titles for many reasons and apparently is quite common. So what I will do is give you a quick tutorial on how you can do this on a per page basis or globally. Hide Titles Globally Go to Appearance >> Customize >> Basic Settings Check the box next to Hide Page Titles Click Save and Publish Hide Titles Indivually To accomplish this, we need a plugin that hides titles; this one will be the “Hide Title” plugin. Go to Plugins >> Add New Search for “Hide Title“ Click Install and Activate To hide the title from a page or post, you need to have either of these open in your editor because in the lower right column, you should see an option to disable (hide) the title for that particular page or post. The only caveat when hiding a Post title is…    read more 

Set your page width

Circumference Lite offers you two page widths: Full Width Boxed Medium Here is a screenshot of each size, where as the page gets smaller in width, more of the background is seen. Plus, on the boxed views, your page has an outer glow: Make Your Selection Go to Appearance >> Customize >> Basic Settings Select your page width Click Save and Publish