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. 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 your original downloaded theme package and in the HTML Snippets folder is a file called “contact-form.txt” that you will open. Look for the batch of code… read more
Setup Tutorials for Circumference
Welcome to the Setup Tutorials for Circumference. 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.
To get your own home page (front page) to look like the live demo site, this tutorial will help you through the process. There are parts that relate to other tutorials, so I will provide links to them, rather than re-type them out here (also because they will have videos). Please note that you can create any kind of front page you want, but this tutorial will show you how I did the demo site one. Step 1 – Plugins I Used Widgetkit Lite – For the front page slideshow Hide Title – Let’s you hide the page title Remove Widget Title – Allows you to hide the widget title from the front-end Display Widgets – Lets you publish widgets on select pages Step 2 – Create a Home Page Go to Pages >> Add New Name this “Home” and select the page template “Page Full Width” In the right… read more
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
One of the upcoming trends are themes with Page Builders that are either built into the theme or use a plugin. A page builder is a feature that allows the user to create various page layouts simply by a drag and drop method. In a sense, what you are building is a page with widgets. No content is added like you would with a normal page or post when using the editor. For Circumference, it does not include a page builder coded into it, but does provide you with a blank page template named: Page Builder Choosing a page builder plugin is something you will need to sit down with a coffee and explore what choices you have by searching Google for “WordPress Page Builder Plugins” and see what comes up. One in particular will be the Page Builder plugin by SiteOrigin and appears to be a popular (free) option. Basically… read more
Circumference uses font icons from icomoon.io which means you can have different sizes just like a font. You can use icons almost anywhere, especially with the html snippets that Circumference has like “icon boxes”. You get a preset selection of icons available to you, but you can always add more to your theme by using the icomoon.io/app and the included selection.json file in the icon folder to add to the existing selection. The icons are added to the style.css at the beginning and looks like a massive long string of characters…this means that the font itself is embedded directly into the theme from the stylesheet. View Icons In the downloaded theme package, go to this location: circumference-package >> icons >> icomoon Open the demo.html file that is there to view the available icons. You will also see their names which also become their classes. So for example, if you see the… read more
To give you more flexible layouts, you can use page columns (content columns) which uses the Bootstrap framework. Using Bootstrap 3, you get a 12 grid column layout which is also responsive. To read more documentation on the grid layout, check out the Bootstrap website here: Bootstrap Grid Circumference is built using Bootstrap and the overall width uses the grid system. Basically the width is made up of 12 grid columns and uses css classes to create varying widths of containers, for example, the logo container and the main navigation container uses this method where the logo is 5 grid columns wide and the nav is 7 grid columns wide. Getting Sample Columns In your original downloaded theme package is a folder called HTML Snippets. Inside that is a text file “Columns” which you can use to get you started and offers some instructions as well. You can create your… read more
HTML Snippets are like mini-templates that you can use inside your page content and found in your theme package that you downloaded. Generally you have themes with shortcodes, but this theme uses HTML Snippets instead because they are true HTML compared to shortcodes; shortcodes can also be a bit confusing as well. This theme currently offers the following snippets: accordion panels blockquotes call-to-action columns contact form custom fields custom images dividers drop cap form elements icons icon boxes list styles logo bar media boxes price columns progress bars recent posts plus special headings tables text labels widgetkit gallery widgetkit slide captions widgetkit slideshow settings widget styles How you use these will be up to you, but for most of the snippets that relate to in-page elements like icon boxes, list styles, etc., these text files also contain some instructions which you may want to print off as a reference for… read more
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
The slider on the Circumference demo website is optional, but this tutorial will help you get setup if you decide to use the Widgetkit slideshow. This plugin is free to download from yootheme.com and once installed, you can take advantage of the custom theme (style) that I created for it. As a side note, you do not have to use this slider if you have a different one in mind. Download Widgetkit Lite (free) here: Go to Plugins >> Add New >> Upload Browse for the widgetkit zip file you downloaded and install then activate it Note that it gets added to the bottom of your admin menu group Upload the Slideshow Theme With the Circumference theme, you get a custom theme for the slideshow to match what you seen on the live demo website. You can find this style in the the “circumference-package” folder, then in that you will… read more
WordPress has it’s own default image styling and layouts which are common with every WP theme. These are: Align left alignleft Align center aligncenter Align right alignright Align none alignnone Depending on the theme, usually the common styling is a border around the image, but Circumference extends the styling concept to give you a little more in addition to the basic alignments that you see listed above. With Circumference, you get the additional styles inlcuded Attention: Because these image styles use CSS3, some browsers may not recognize the style attributes applied. IE8 will be one browser that will ignore these styles. Instead of circles, you will get the squared image style. Offset Style Offset is probably the more complicated style bcause of how it gets created in your page or post because it will require some code adjustments. However, I helped you out with a predefined snippet of code that… read more
