Setup Tutorials for Pure & Simple Pro

Welcome to the Setup Tutorials for Pure & Simple. 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.

Add Breadcrumb navigation

Pure & Simple is ready for navigation, should you decide to implement it using a plugin called Breadcrumb NavXT. Very easy to setup, and it will give you navigation for your pages or posts. To see this in action, please visit the demo site here: Sample Breadcrumbs Install the Plugin Go to Plugins >> Add New Search for “Breadcrumb NavXT” and then click to install and activate it This gets added to your WordPress Settings menu group which you can customize to your needs Once done, the theme has code already in it that displays your breadcrumb navigation on most pages and posts with exception to the “Front Page”. Screencast – Breadcrumb Navigation  

Customize your Theme Colours

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: Go to Appearance >> Customize >> Colours Click on any of the colour selectors and choose your colours Click on Save and Publish Screencast – Customize Your Colours  

Setup your Social Network Icons

Pure & Simple comes with a large selection of available social network icons and a few other options that you can use. I’ve included most of the popular and common options where you can simply activate the ones you want to use and add in the links (URL’s) so visitors can check out your social pages. Currently, this theme offers: Twitter Facebook Google+ Linkedin Pinterest Flickr Youtube Vimeo Instagram Reddit Stumbleupon WordPress Github Dribbble Tumblr RSS When adding your URL’s to the social settings in the customizer, you need to include the full URL like this example: http://twitter.com/styledthemes Activate Your Icons Go to Appearance >> Customize >> Social Networking Go down the settings and enter in the full URL to your social profile pages Click Save and Publish If you need to temporarily disable your social bar, under the Social Networking tab in the customizer, you can check the box…    read more 

Introduction to Post Formats

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: Standard Post Format Aside Post Format Image Post Format Gallery Post Format Audio Post Format Quote Post Format Status Post Format Video Post Format Link Post Format If you would like to read more about WordPress Post Formats, you can visit the Codex page: Post Formats 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: Demo Website 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…    read more 

Choose your Blog Layout and Styling

With Pure & Simple, you get several blog layout templates: Blog Full Width (no left or right sidebars) Blog Left Sidebar Blog Right Sidebar Blog with Left and Right Sidebar Masonry Layout without a Left or Right Sidebars Blog Styles 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 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 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…    read more 

Create a Static Front Page and move the Blog

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: Static Front Page Create a Home Page Go to Pages >> Add New Title this as “Home Page” and if you are putting in content, you can do that now or later Select the page template you want to use, but if you want to make a page like the live demo…    read more 

Change Your Page Width

Pure & Simple offers you a couple website page widths: Full Width (Default) Smaller Width – 1500 pixels wide Smaller Width – 1200 pixels wide 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. Set Your Width Go to Appearance >> Customize >> Basic Settings Select your option for the Page Width setting Click Save and Publish Screencast – Page Width  

Customize the page background

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: Using the default background Upload and use your own background Use a transparent image with background colour Or just have a background colour without an image 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. Transparent Image with Background Colour Go to Appearance >> Background You can upload your own or keep the existing transparent image Click on the colour selector for your background colour Click Save Changes…    read more 

Customize your Header

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: Background Colour Go to Appearance >> Customize >> Colours Find the Header Background Colour setting and click on the colour selector Choose the colour you want Click Save and Publish Background with an Image Go to Appearance >> Header Choose File (your image file) to upload (Suggested width is 2560 pixels if you want coverage for the largest monitors. Suggested height is 260 pixels.) and click Upload You can crop the image to your liking, otherwise you can skip the cropping if you…    read more 

Customize your Site Title or use a Logo

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: Px to EM Customize Your Site Title and Tagline Go to Appearance >> Customize >> Site Title & Tagline Select the colours for your Site Title, Tagline You can also edit the sizes, and adjust the header top, right, bottom, and…    read more