Before you install Pure & Simple, it's important to know a few things before you begin.
If you believe you will be making any modifications to the core files of this theme, whether now or later in time, WordPress recommends you install a Child Theme which lets you make changes while maintaining the ability to keep your theme (the Parent Theme) updated without losing your changes. You can read more about child themes here:
Pure & Simple helps you out by giving you a premade child theme that you can install. This is found in the original downloaded package with an installable preferential-child.zip theme file. You would simply install this like any other theme, then activate it. It's important to know that before you do this, make sure that the parent theme (Pure & Simple) is installed. It's also important that you decide if you want to use this before you start making your site because if you use the child theme after you already did your widgets, menus, and theme options, you will need to redo them.
If you are experienced with WordPress, or know how to install themes, you can skip this tutorial. However, if you are new or a beginner, this tutorial is for you.
Before you install your theme, you will need to unzip the theme package first because inside that is your theme file you install: puresimple.zip
A common issue that can occur with users new to installing WordPress themes is a "Broken theme and/or stylesheets missing” error message being displayed when trying to upload or activate the theme. This error message does not mean that the theme you have purchased is broken, it simply means it has been uploaded incorrectly. Luckily, there is a very easy fix. Please follow the steps below to rectify this issue or watch the screencast.
The most common method of installing a theme is to use the built-in installer that comes with WordPress.
Pure & Simple offers several features, but some require plugins if you decide to use them and should be considered as optional. You will need to download and install these because they are not included in the download of this theme. I do this so that everyone can choose which plugins they want to install, but it also ensures the most recent version of each plugin is installed.
To install plugins, you will go to:
Appearance >> Plugins >> Add New
Do a search for the name, click Install, and Activate.
Jetpack is a plugin that is made up of several plugins that you may find very useful because of what it has in it...a LOT of features. Since the release of version 3.0, I have to admit that Jetpack is actually quite the plugin because of what it can do. In fact, I built most of the demo site for Pure & Simple using Jetpack. I did not use all the features, so I kept those deactivated, but the ones I enabled allowed me to do the following:
There are more that you can use depending on your own preferences.
If you are not using Jetpack already, I would recommend checking it out and try it because almost everything you need is in it, otherwise you will need to install several plugins to get what Jetpack offers. They did a very good job with this one...finally. If you install it, make sure you read up on their documentation and for support, you can refer to the Support tab on the plugin's page at wordpress.org
This theme uses the WordPress Customizer which is a feature WordPress offers you to make changes to your active theme. Every theme will load up within the customizer, but what will be different from theme-to-theme are the settings and options they offer. The customizer gives you a live preview window of your website, and within the left column, you will see a series of tabs, each labeled as to what they are for.
There are a few ways of getting to the customizer:
The two most common methods are from the dashboard home page and the menu under Appearance >> Customize
You will hear this often and this is something that WordPress recommends; but if you plan to make custom changes to your theme, whether mine or from someone else, the best way is to use a child theme. You can read more about child themes here:
The reason for using a child theme is because when updates are available for your theme, in this case the parent theme of Pure & Simple, you won't lose any custom changes because they were done in the child theme. How this works is that the child theme inherits the styles and functionality of the main theme (the Parent theme), so any updates that happen, it will inherit those. However, if you made any custom changes to the theme, these exist in the child theme and not the parent theme, which is why when you update, you don't lose the changes.
Easy guideline for you:
When making core theme file changes with a child theme, this is done by copying the file from the parent theme and uploading it to your child theme, while maintaining the same file structure as the parent theme. So for example, if you wanted to modify the header.php file in the parent theme, you copy that file and upload it to your child theme to the exact same location as the parent theme.
Note:The child theme duplicates the same structure and layout as the parent theme.
Before you install the child theme, always make sure the parent theme is installed. It does not have to be activated, just installed, otherwise you will get an error.
Pure & Simple comes with a LOT of widget positions, many offer dynamic sizing which means you can have 1, 2, 3, or 4 widgets side-by-side. If you have 1 widget in a group, such as the Bottom widget group, your widget will automatically go 100% in width. If you publish 2 widgets, each one will become 50% in width, or if you publish 3, each one will be 33%, and if you publish 4 side-by-side, each widget will be 25% in width.
In total, you get 31 widget positions available to you. They are also available for every page template for more flexibility in layouts as each person will have different needs depending on the website they are building. For the blog sections of your website, you also get most of the widget positions available with the exception to the following positions which are NOT coded into the blog and category (archive) pages:
You can view the available widget positions here:
By default, WordPress will show a widget on every page that the widget position being used exists on. In most cases, this is not very good in terms of creating websites because you may not want a widget to show on every page. However, you have a few options you can consider:
With Pure & Simple, you get a text based site title and logo option. For the Site Title option, you can change colours of the title and tagline, as well, this title sits in a centered box that by default has a white background that blends in with the header background, which is also white. You can change the background colour of this box container. You can also change colours of your title, tagline, and even adjust the padding space of your header...the padding units are in "rem" which is a relative size. For converting from px to rem or rem to px, you can use this online tool:
By default, the Site Title option is going to show, but if you want a logo instead, this is how you do it:
You can change the page background for Pure & Simple, which already comes with a default background already setup for you. However, you may want to change it to your own preference. Your choicces are:
Some people may opt in for a full sized image, or you can use an image and with the WP Background settings, tile it to how you want it. Also be aware that if you have set your web page to be full width, only short pages will show the page background at the bottom area.
Pure & Simple offers you a couple website page widths:
You can change this width at any time, but I would recommend that you choose it right from the start. Also remember that this theme is responsive, so regardless of the page width you choose, as the browser window gets smaller, your page will automatically adjust.
Creating a custom front page and moving the blog further into your website is called "creating a static front page" which WordPress has a tutorial for this. However, I will give you a quick rundown of how this is done because most people will want this. WordPress by default will always put the blog on the front page, which is why a static front page is usually created because unless you are using this theme as a blog only, you will probably want to change this.
For more information about static front pages, check out the WordPress Codex:
With Pure & Simple, you get several blog layout templates:
You get four blog styles with Pure & Simple. Blog styles are not really layouts, but more of how your blog summaries look.
Blog style 1 is the default style for Pure & Simple, which gives you a smaller Featured Image below the post title and to the left of your post summary. Best suited when you use a left or right sidebar layout.
Blog style 2 gives you a Featured Image off to the left of both the post title and the summary content. You can have varying sizes of images, so you are not restricted to just one size...within reasonable sizing that is.
Blog style 3 gives you a larger image above the summary content with your content left aligned. This is best suited when you use a left or right sidebar layout for your blog and want to showcase large Featured Images in your post summaries.
This style is best suited for the Full Width (no left or right sidebars) so you can take advantage of very large Featured Images. Content is centered.
Not really part of the blog styles, but more of a blog layout, the Masonry option gives you post columns without a left or right sidebar until you click on a post.
You have the option to choose the size of your featured images, but here are a few suggested guidelines:
When you upload your featured image, I recommend you have it cropped and optimized before doing so because this theme does not have a preset cropped function for your featured image
WordPress offers several post formats that are made available through any theme as long as the theme has support for each one. Unfortunately, creating a custom post format is not possible, so we are limited to the following formats:
If you would like to read more about WordPress Post Formats, you can visit the Codex page:
If you would like to see the available post formats on a live site, you can check out the demo website for Pure & Simple by going to the "WordPress" menu link and visit each submenu:
You do not have to use all the post formats that are listed above, but they are there for you if your website needs them. The Standard Post Format is probably the most common one because this is the default option when you write blog posts -- it's automatically set for that one. How you use the other formats is up to you. For example, you could use the "Quote Post Format" as a way to post client or customer testimonials. The Link Post Format could be used to create a type of link directory. The Status Post Format could be used as a way to publish quick updates to your site or other notations that you want to inform others of things that are happening.
When you use a post format, some of them will be styled a little different from the other, but what I've done with this theme is create a "linked" label that goes just before the title of the post that lets the reader know what kind of post it is. For example, the "Quote" post format will look like the screenshot you see below...notice the small label "Quote"? When you click on this label, it acts like a filter and will load up all the posts that are this post format.
Pure & Simple gives you the ability to customize almost every colour within this theme. There may be some elements that you need to create custom CSS to manage the colours of those elements, but for the most part, you should be able to achieve unlimited colour combinations with your website with the built-in colour selectors.
There are many colour options throughout the theme option settings and can be found on different tabs within the customizer. For example, the one in the screenshot below is found on the Navigation tab:
By default, WordPress will show a widget on every page that the widget position exists on. In most cases when making a website, you don't want that widget to show on every single page, so the only way to manage where and what pages it should be on is to use a plugin. You have a few options available:
Pure & Simple uses Jetpack on the live demo site and I enabled the Widget Visibility feature on it so I can use it to show widgets on select pages. It works extremely well and you can publish widgets to the available widget positions this theme offers. I did a tutorial about widget positions with an introduction about this topic:
Please also note the "Blog", "Single", and "Category - Archive" sections do NOT have the following widget positions available:
This tutorial will help you make a gallery using WordPress. Although this is a common thing with any theme, I will show you how it looks with Pure & Simple as your theme.
First thing you want to do is prepare your images ahead of time. I am one who likes to keep things consistent so that I get a nice gallery that is evenly displayed within a page, post, or text widget. This means preparing images by cropping, sizing, and optimizing photos before you upload them. If you were to create a gallery with different sizes of images and some are vertical while others are horizontal, you get a very uneven gallery layout...however, sometimes you may not have the option to make them all the same.
By default, WordPress will use the small thumbnail size, usually 150x150 if this is set in your Media Settings. Normally what happens with WP Media Settings, is that every time you upload an image, WP will generate a thumbnail of each of the sizes you set dimensions for. If you don't have these set, then you need to make sure your photos are the same size so that you can maintain a consistent layout. However, if you do have media settings in place, you can use a size attribute on your gallery short code (see further below). To learn a bit more about what WordPress does when you upload photos, check out this:
To manage your gallery, such as thumbnail size, you can refer to the WordPress Codex documentation on how to edit your gallery shortcode:
Otherwise, while in your page where the gallery is, switch to the "Text" tab on your editor and add this to the shortcode:
Then click on Update to your page or post.
There are many ways to create a contact page, but the one thing hey all have in common is that they use a plugin for the actual form that people fill out. Normally I used Contact Form 7 as the plugin, but since I am using Jetpack in the live demo site for Pure & Simple, I decided to give this a try and created this tutorial based on Jetpack.
For a basic form, it's very solid and we know it's coded well because it's from the developers over at Automattic (makers of WordPress).
Each contact form can easily be customized to fit your needs. When a user submits your contact form, the feedback will be filtered through Akismet (if it is active on your site) to make sure it’s not spam. Any legitimate feedback will then be emailed to you, and added to your feedback management area.
NOTE: Even though I am using Jetpack for this, you can still create this contact page and use any other contact form plugin such as Contact Form 7, Gravity Forms, or any other plugin to add to your page.
This theme offers a large selection of font based icons from a source called "Font Awesome" which has proven to be very popular...so much, that there is even a plugin for it. We will use this plugin with this theme because I also added the font and custom styling for it.
When you install the Font Awesome Shortcodes plugin, you get a green button added to your editor that looks like this:
Basically you click in your page or post content where you want to insert the icon of your choice and then click the Font Awesome button which gives you a popup window to choose your icon. Once you select your icon, it gets inserted as a shortcode. You won't see the actual icon in your editor, but you can see it in your post or page when viewed from the front-end, or preview. This is an example shortcode based icon in your page editor:
Easy to do because wherever you need your icon in a theme file or template, you would simply add this HTML code:
<i class="fa fa-desktop"></i>
Of course, you would change the icon to the one you need by using the reference at the Font Awesome website:
With Pure & Simple, I added one custom style for icons that look like a circle with an icon in the middle. This is done by wrapping your icon shortcode or the HTML version with a container like this example:
<span class="icon-circle">[fa type="desktop"]</span>
<span class="icon-circle"><i class="fa fa-desktop"></i></span>
With the Circle Icon style, you can also change the colours like so:
<span class="icon-circle grey">[fa type="desktop"]</span>
<span class="icon-circle lightgrey">[fa type="desktop"]</span>
<span class="icon-circle tan">[fa type="desktop"]</span>
<span class="icon-circle rust">[fa type="desktop"]</span>
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 when you copy and paste them into your page (more on this in a moment). This theme currently offers the following snippets:
How you use these will be up to you, but for most of the snippets that relate to in-page elements like info boxes, list styles, etc., these text files also contain some instructions which you may want to print off as a reference for each one.
I should also mention that snippets are moving into plugins so that you do not lose the snippets in your page or post content if you change themes. HTML snippets and even shortcodes can be lost until you copy the CSS over into your new theme. I am considering developing theme plugins to do just that.
You can view this video in a full window.
Pure & Simple includes a series of preset widget styles that you can use for almost all widgets. You get 3 widget styles including the default style with this theme. The current colours available are:
Although the styles are coded in the theme's stylesheet, you will need a plugin called "Widget CSS Classes" to apply the styles by using CSS classes in your widgets. When this plugin is installed, it puts an input field at the bottom of your widget where you type in the class for the style(s) you want for that particular widget.
For example, if you want a widget to use the "widgetbar" style, you would type in:
If you want to add colour to it instead of the default grey, you can add a colour like this, but make sure you put a single space between each class you add:
To see the available widget styles and colours, check out the live demo site here:
I've utlized the WP Header feature to allow the ability to customize the header. This is the top area where your site title or logo sits. You can use a solid colour or you can use a background image to give it more visual impact for your visitors. To give you an idea of what you can do with your header, you can see the variations you can do:
In addition to customizing your header background, you can also use a logo on top of your background. I would suggest making sure that your logo works well with the background. You also get the option of using the default Site Title and Tagline on top of your background, which is customizable from the theme options under the "Site Title & Tagline" tab. The site title and tagline sits in a box container that you can colour the background of that. A nice feature when you scroll the page upward, the site title box start to fade to transparency.
I will show you how to create custom page headers for pages that include the option to add different backgrounds, as well publishing nice page captions to help make a page stand out. To give you an idea of what these are, check out the demo website, and look to the banner area near the top:
Having this capability allowed you to create nice backgrounds with a descriptive page header with caption text that looks like this:
You do not have to create titles and captions, you can simply change the background image to something different for select pages. This lets you have the capability of each page having its own background and caption.
To acheive this, we need to use a plugin called Advanced Custom Fields. This plugin is a big one and can do a LOT of things, but for Circumference, we will use it to create our nice headers that you see, along with a page heading and caption. This is also a plugin that does have some learning curve, but once you have this in your site, you can use it for many things. Check out its documentation for reference and "how to" instructions. The benefit here is that you can use this with any theme, not just Circumference...but that's a whole new topic.
Take the next few steps slow and one step at a time and you will be fine. Once these fields are created, you're done. We first need to create a custom field group because in this group we will be adding two custom fields for it when we click on a button that is labeled +Add Field. First, we need our group:
Just like the screenshot above shows, we are going to add a custom background to a page header. First thing we need to do is make sure you have your header background image created, because we need to upload this to our Media Library.
You have the choice of adding a header background if you want a different one from the default style, or you can keep the current one. This part of the tutorial will show you how to add a page header caption like the screenshot at the top of this tutorial page.
You may have noticed the live demo site for Pure & Simple showcases a portfolio that looks great when you want to display projects that you have done, whether for a client, or for yourself. The portfolio is not built into the theme for a very good reason...if you ever change to a new theme, you can keep your portfolio because it's not part of the theme. In this case, the porfolio is part of the Jetpack plugin. To show you what the portfolio looks like, or at least what I did for the live demo site, you can see it here:
The first thing you need is Jetpack, so if this is not installed, you need to install it so that we can activate one of the modules in it called "Custom Content Type".
The portfolio shortcode gives you the most flexibility in how you want your portfolio to show in your site. It also lets you use a standard page! Documentation for the portfolio shortcode can be found here:
I would recommend keeping it fairly simply for a clean layout. This is the shortcode I used for the live demo site:
[portfolio display_types=false display_tags=false columns=3 showposts=9]
I would recommend you use larger images for your portfolio featured images, so that when someone clicks through to see more about your project, they will get a nice featured image at the top of the page like this:
When you create your featured image, make sure you maintain the same size, orientation, and aspect ration for each portfolio featured image you use so that when you go to your portfolio, your layout is even by rows and columns and everything looks perfect in consistent size. The images I used for the live demo site were 800x533, although you can use what works best for your own portfolio. As for other photos, galleries, or even slideshows within your content, you can be a bit more flexible.
Font management is a very large topic because it's probably the one thing that most users will, at some point, want to change in their site pages. I know many people would love to have every font choice and everything about sizes, styles, colours, and more, all rolled into something easy to click and you're done kind of thing....in a perfect world, yes. However, I hate to be bearer of bad news, but you will have to do some form of custom CSS for your site somewhere along the lines.
If you want to change the font of something in your pages, you first need to have some understanding about how and where fonts come from. Anyone who uses a computer, whether it's a Windows machine or a MAC, will have fonts that are part of their operating system. This is what allows us to see different fonts when we view a page or document on the screen. When viewing a webpage, you see the fonts used because of one of two things:
How you choose a font is dependent on whether you are using a font that exists on a user's computer or if you need to import that font into the web page. If you are using a custom font that you put into your computer, and then use CSS to choose that font family for your web page, please note that others who view that page will not see that font, even though you do. This is because they don't have that font yet.
This is a topic that can be a whole separate tutorial, but basically in a nutshell, you do CSS like this:
font-family: Arial, Helvetica, sans-serif;
The font family is the type of font, then we have the font size, followed by the weight of the font, style, and then colour of the font (text). This is the long version of doing fonts, but I did this to show how you can manage the different aspects of a font for a particular page element, such as the .entry-title which are the post and page titles.
The font family you see above does a couple things. The first is that it gives 3 different fonts that can be used. If the first one "Arial" is not available, it then goes to the next "Helvetica", and if that isn't available, it then uses "sans-serif". The second thing it does is that the first one is a font found on Windows computers, while the second one "Helvetica" is found on MAC's. So if a person is on Windows, they will see Arial, but if they are on a MAC, they will see Helvetica.
Here is a great source to learn about using Fonts in CSS:
If you want to use a font that does not exist on a users computer, such as a fancy Google font you seen and like, you will need to follow their documentation on the different ways you can use that font. Or, you can use a font plugin to load in a font of your choice.
This theme uses some font management in the theme options customizer, but only gives you settings for sizes. It starts off with a base font size which most themes and websites use 100% as the starting point. This generally translates to 16px in size. The settings in the customizer are in "rem" units. Most people are probably familiar with "px" sizes, but the drawback to pixels is that it's a fixed size and this will never change if you were to use a font plugin to change sizes; you would need to do custom CSS to change the size. REM is a relative size to the main body of 100%, so things will self-adjust based on what you set your body base size to...I recommend you keep it at 100%.
To learn what an rem is in pixels, you can check out this online tool for converting px to em (or rem) and back:
The slider on the Pure & Simple demo website is optional, but this tutorial will help you get setup if you decide to use the Widgetkit slideshow. You can freely download Widgetkit from yootheme.com and once you install it, you can enjoy the benefits of the custom theme (style) that we have created for it.
You can also use some other slider if you want to.
Download Widgetkit Lite (free) here:
With the Pure & Simple 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 "Puresimple-package" folder, then in that you will find a folder named "widgetkit". Inside that is a folder named "slideshow", and within it is a folder named "pureandsimple".
Using your FTP program, upload the "pureandsimple" folder into the "styles" folder in the location given below:
wp-content >> plugins >> widgetkit >> widgets >> slideshow >> styles
You should see a folder inside "styles" named "default" which is the default theme (style) for the Widgetkit Slideshow; pureandsimple will be installed there as well next to it.
The first thing you will want to do is prepare your slides (images) and have them ready to upload. You can have them any size you want, but as a reference, we recommend using the best quality and largest images you can use.
Height can be almost anything you want, but remember that this theme and the widgetkit slider are responsive, so the height will be relative to the width as the window resizes. To give you another reference, the slides I have on the demo website are 2560 x 600 pixels at their fullest size.
Adding slides is almost like creating a post, but instead of adding content into the editor, you are adding a slide image by inserting one from the editor's Add Media button on the first slide.
This is a sample caption from the first slide on the demo site that you can use. Depending on what the subject matter is in your slide photo, you may need to adjust the positioning (margins) and colours based on what your slide is. This allows you to get creative and to make each slide different.
For positioning, I used percentages on the margins which is relative to the window size (responsive effect), but you can use pixels if you are more comfortable with that. Change the colours (HEX values) so that you can colour the text based on the colours in the photo's subject matter. Add any additional inline styles that works best for your needs.
<div class="caption1" style="margin-left: 14%; color: #de8d89;">Responsive</div>
<div class="caption2" style="margin-left: 12.5%; color: #c38939; font-style: italic"><span>for</span> Mobile Viewing</div>
<div class="caption3" style="margin-left: 16%; color: #000;">in Your Favorite Device!</div>