=== Expressions Theme for Wordpress === Contributors: @kevinhaig - Kevin Archibald Donate Link: http://kevinsspace.ca/expressions Tags: one-column, two-columns, left-sidebar, right-sidebar, fluid-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready Requires at least: 4.1 Tested to: 4.3 Stable Tag: Version: 2.2.0 License: GNU General Public License V3 License URI:http://www.gnu.org/licenses/quick-guide-gplv3.html Expressions WordPress Theme, Copyright (C) 2015 Kevin Archibald Expressions is distributed under the terms of the GNU GPL ========================================================================== User Documentation ========================================================================== Introduction -------------------------------------------------------------------------- Thanks for trying Expressions WordPress Theme. This theme offers flexibility and options to meet most user requirements. There is no up sell to this theme. All options are already includes. So try it out and if you decide to use it make sure you donate something to show your appreciation. Donate link: kevinsspace.ca/expressions-wordpress-theme/ Demo Site: demo2.kevinsspace.ca/ Author Site: kevinsspace.ca Remember that The GPL License allows for a lot of freedoms and I am a believer in GPL. But GPL does not mean free to use and not donate. GPL software can be sold. So try it and donate if you use it.....don't be a freeloader. -------------------------------------------------------------------------- Basic Set Up -------------------------------------------------------------------------- When you initially load the theme you are going to look at it and say WOW this is nothing like the screen shot, in fact this is nothing at all :) Don't worry, it is a few steps to get you up and running. ------------------- Menu ------------------------------------------------- 1. Go to the menu panel under "Appearance" => "Menus" 2. Input your menu name, I use "main menu" 3. Click the "Create Menu" button 4. Select menu items from the Pages panel 5. Save the menu Your menu system is now ready to go. Simply select the pages and add them to the menu. You can drag the menu item to indent it and it will appear under the parent. To create a dummy menu item just use "#" in the "Custom Links/URL" section, give the link a title and click the "Add to Menu" button. Dummy menu items come in handy when you are setting up drop down menu items. In the default menus set up the Home page and the Sample Page are included in the menu. If you want to delete them just click the down arrow for each menu item and remove them. The menu can now be accessed through Appearance=>Customize. You can also set the menu to display left, center, or right, and add a border to it. Go to Appearance->Customize and select Expressions General->Header Options to do these things. ref: https://codex.wordpress.org/WordPress_Menu_User_Guide ------------------- Social Links ----------------------------------------- Setting up your Social Links is a 2 step process. *** Step 1 *** - Go to Appearance->Customize and Expressions eneral->Social Links. - input the urls for the links you want to include. - save and update - exit from Customizer *** Step 2 *** - Go to Appearance->Widgets - Grab the Expressions Social Links Widget and drag it to the Right Header Area widget panel and drop it there. - The widget will open up, delete the title - check off the social links you want - Save the widget settings Note that this can also be accomplished from within the Customize Panel. Also note that you can use the Expressions Social Links Widget in any of the widgets panels you see there. ------------------- Header ----------------------------------------------- *** Upload a Header Image or LOGO *** 1. Go to Appearance->Customize 2. Select Header Image 3. Select Add a New Image. Follow instructions to upload the image from your desktop or select an image in your media panel. This theme is responsive meaning that images are automatically scaled to screen width. Your logo will be scaled as the screen size is changed. If the logo is on the left it is scaled to 28% of the screen width, if it is positioned in the center it is scaled to 50% of the screen width. The scaling occurs only if the available width is less then the original logo size. The logo is not scaled larger. Logo height is automatically set to maintain the proportion of the original logo. Tip: Keep your logo under 200 px wide, and keep the height reasonable, so it looks good. Also I will typically create the logo as a jpeg or png image. Banner Image - If you decide to use a banner image instead of a logo, use an image no more than 960px wide and 320px high (200px high is better). *** Set up your Header *** 1. Go to Appearance->Customize 2. Select Expressions General->Header Options 3. Select Show LOGO, Center LOGO, Show Blog Title, and Show Blog Description. 4. To set up a full width banner ensure that the Show LOGO, Show Blog Title, and Show Blog Description are NOT selected. When you do this the banner image is presented to the width of the header. In addition a Left Header Area - widget area is activated, allowing you to add text(such as a blog title) in the form of a widget. 5. Make sure you save your selections. ------------------- Footer/Copyright Areas ------------------------------- 1. Go to Appearance->Customize 2. Select Expressions General->Footer Options 3. You can choose not to display the footer or the copy rightstrip. 4. Footer can be 3 or 4 columns. The footer columns are widgetized, and are populated by going to Appearance->Widgets. Simply drag a widget to the footer panel. 5. The copyright area is populated by adding html to the left, center, and right sections. You can also lesve any of these blank. 6. Make sure you save your selections. ------------------- Blog Set Up ------------------------------------------ 1. Go to Appearance->Customize 2. Select Expressions General->Blog Options 3. There are a number of options, that have adequate documentation in the option description, how ever there are a couple that deserve some attention. Blog Page Feature Options - this is a drop down that allows you to set up a feature image or slider in your blog posts. Simply select the one you want. Blog Feature Category - The feature slider is populated by creating feature posts of a specified category. In this drop down, you select the feature category you defined when you set up your posts. 4. Make sure you save your selections. -------------------------------------------------------------------------- Using the Theme -------------------------------------------------------------------------- ------------------- New Post --------------------------------------------- To create a new post select New Post from within the admin panel. *** Expression Post Options *** At the bottom of the edit panel you will see a Expression Post Options panel. Options are described below. Do not displaty this post - Post will not be displayed in the blog. Note that to keep the posts out of recent post or archive lists you will have to go to Appearance->Customize and then select Jot Options->Remove Categories, and select the category that you would like to have removed from posts and lists. Exclude Feature Image Link - The feature image can be shown with or without a link. If selected the image will be linked to the post. Feature Image Custom Link - If a custom link is entered it will be used. Use Post Title instead of Image Caption - When you upload and insert a featured image, you can add a caption and description. If present the caption is shown in a black strip at the bottom of the image. You can use the post title instead of the image caption if you select this checkbox. ------------------- New Page --------------------------------------------- To create a new page select New Paget from within the admin panel. *** Expression Page Options *** Title - you can select to not display a title. Sidebars - You can specify any widgetized panels available to be used in any of the sidebar positions on the page. This gives you great flexibility for your theme. Simply select the one you want to use, then go to Appearance->Widgets and poplate that widget panel/container with a widget. Feature Slider - If you are using a Feature Template you will need to select the feature type and the category you used to set up the feature posts. Portfolio Pages - If you are selecting the Portfolio Template there are a few options to consider. Portfolio pages are populated using feature posts, so you will need to select the feature category you used to set up your posts. You will also be able to select the number of columns, and whether you want to use post content or image caption and description. -------------------- Feature Posts --------------------------------------- The blog page, static home page, feature template, and portfolio template all use feature posts to populate them. 1. Create a specific category such as "feature 1" to use for your feature posts. 2. Add a new post using the created category and insert the featured image. 3. Tip: Images can be linked to the post, image file, or a custom link. 4. Repeat for new images. Tip: When I upload any images I typically process them to 1024px wide using Picassa, that way the file is big enough for any size required in the theme, and small enough to keep download size reasonable. Another thing is to keep the quality around 80% as this compression will also help keep image sizes reasonable yet keep quality at a higher level. One more thing, when showing more then 1 feature image, keep all the uploaded images EXACTLY the same size. -------------------- Post Formats ---------------------------------------- The theme includes all available post formats. You don't have to use them if you don't want to, just post everything in Standard format. The demo site includes examples of all post formats, and the user is referred to that site, as the post content code will be shown there. *** Using Kevins Post Format Helper Plugin *** Yes there is a better way. I have developed a plugin that uses shortcodes to ease the pain of Audio, Video, and Quote Post Formats. Unfortunately WordPress has a policy of not allowing these kind of shortcodes within themes. The plugin is available at: kevinsspace.ca/expressions-wordpress-theme/ Once the plugin is installed and activated it will offer quick buttons for the Audio, Video, and Quote Post Formats. To set up a post format, select New Post and click the post format you want in the panel on the right hand side. *** Standard Post Format *** You don't have to use any of the other post formats. This is the default. *** Aside Post Format *** The Aside Post Format is typically styled without a title. Similar to a Facebook note update. In the Expressions Theme I have excluded all links, meta (except author), and the title. Only content is shown. Just enter the content, preferably in one paragraph. *** Audio Post Format *** The Audio Post Format is designed for audio tracks. The player is from mediaelement.js and it allows audio embeds. Code:
A message from the theme author http://localhost/expressions/wp-content/uploads/2014/06/audio_post_example.mp3
Using Post Format Helper or shortcode : [kapf_audio link="http://audio.url"] message [/kapf_audio] *** Chat Post Format *** The Chat Post Format allows you to have multiple chatters. Basically you put : author 1:text author 2:text etc *** Gallery Post Format *** The Gallery Post Format is really set up for a single gallery. It allows the user to post a gallery and not have all the pictures presented. The number of pictures are counted and displayed as a caption to the most recent image in the gallery. Only the post excerpt is allowed. I used the twenty-eleven content-gallery.php as a guide for this format. If you want all the pictures to be shown in a thumbnail grid then do the post in Standard Format. Select the "Insert Media" button and upload the pictures you want to load. Insert them as a gallery and the following short code will be inserted: [gallery ids="1731,1730,1729,1728,1727,1726,1725,1723,1721" size="wide-thumbnail" link="file"]. I will insert a few extra short code variables to ensure I set up the gallery the way I want. The final shortcode shhould look like the one in the screenshot. Setting file="link" forces the links to the picture, and Colorbox will pick it up. The size="wide-thumbnail" option presents the gallery in wide format, which I like better. *** Image Post Format *** The Image Post Format is basically the same as the Standard Post Format. The only difference is that there is a drop shadow on the images. Thus not ideal for embedding in your post, but you can if you want. It is really designed for single images with a little text. *** Link Post Format *** The Link Post Format is basically the same as the Standard Post Format. The styling identifies the tag and presents it in a more stylish way. *** Quote Post Format *** There are different ways to post a quote, so I'll just show an example with the post content. Remember to be able to use the shortcodes you will need to install the "Kevins Post Format Helper Plugin". Quote using Post Format Styles:
Honesty is a gift we can give others. It is also a source of power and an engine of simplicity. Sam Harris
Quote (famous quote ny theme author) using Post Format Shortcode Helper: [kapf_quote author="Kevin" link="http://kevinsspace.ca/"] No use looking up a dead horses ass. [/kapf_quote] Quote using Post Format Shortcode Helper - with no links : [kapf_quote author="Robert Frost" link=""] Two roads diverged in the wood and I took the one less traveled by, and that has made all the difference. [/kapf_quote] *** Status Post Format *** The Status Post Format is a short status update, similar to a Twitter status update. Included in this format is a time stamp, author avatar and a author name. Comments are permitted. Just enter the content in a paragraph. *** Video Post Format *** Presents a video with added styling. Using the post format styling:
Test content inside video. http://youtu.be/GNP001ljDEA
Use the Post Format Shortcode: [kapf_video] Test content inside video. http://youtu.be/-GBUq7ij2dM [/kapf_video] -------------------------------------------------------------------------- Advanced Set Up -------------------------------------------------------------------------- ------------------- Nivo Slider ------------------------------------------ 1. Go to Appearance->Customize 2. Select Expressions General->General Options The theme uses Nivo slider. You set the Transition Effect, the Pause Time, and the Transition Time. ------------------- jQuery Plugins---------------------------------------- 1. Go to Appearance->Customize 2. Select Expressions General->General Options The colorbox.js, fitvids.js, and responsive post images jquery plugins can all be disabled. It is handy to have these in the event you wish to use a different plugin, or need to troubleshoot a problem. ------------------- Exclude Categories ----------------------------------- 1. Go to Appearance->Customize 2. Select Expressions General->Exclude Categories You can select any category you want to exclude from the blog or Archive template. Also, if using the Expression Recent Posts, and Categories widget, these categories will not be included. ------------------- Sidebar Locations ------------------------------------ 1. Go to Appearance->Customize 2. Select Expressions General->Exclude Categories. In this panel you can set the single page to full width. You can also select a right or left side bar for all the core WordPress pages. ------------------- Custom CSS Box --------------------------------------- 1. Go to Appearance->Customize 2. Select Expressions Styles->General Styles You can add any custom css you want here. It is ideal for small changes. If you plan alot of changes, consider a child theme. Note the load order of theme specific css : 1 - Theme style.css or Parent style.css(if using a child theme) 2 - Child style.css (if using a child theme. 3 - skin css 4 - Custom css ------------------- Skins ------------------------------------------------ 1. Go to Appearance->Customize 2. Select Expressions Styles->Skin Options Enable and select a skin here. A skin is a predefined set of styles for your theme. ------------------- Fonts ------------------------------------------------ 1. Go to Appearance->Customize 2. Select Expressions Styles->Font options Select a font for headers (Titles) and a font for body (main text). Can be either a standard font or a Google Font. As of version 2.2 the font loading code changed, @fontface fonts have been removed and only Google fonts are permitted. Rather than providing a selection of Google font you can now enter any Google font you want to use. You do this by manually entering the link and the font family style. Below are the links and styles for the previously supported Google fonts, and any of the @fontface fonts, available at Google fonts. Only take the link part of what Google gives you. For example if the link is only use //fonts.googleapis.com/css?family=Allerta *** Expression Google fonts included in previous versions *** - Alerta - url: //fonts.googleapis.com/css?family=Allerta style: font-family: 'Allerta', sans-serif; - Arvo - url: //fonts.googleapis.com/css?family=Arvo style: font-family: 'Arvo', serif; - Cabin - url: //fonts.googleapis.com/css?family=Cabin style: font-family: 'Cabin', sans-serif; - Corben - url: //fonts.googleapis.com/css?family=Corben style: font-family: 'Corben', cursive; - Droid Sans - url: //fonts.googleapis.com/css?family=Droid+Sans style: font-family: 'Droid Sans', sans-serif; - Droid Serif - url: //fonts.googleapis.com/css?family=Droid+Serif style: font-family: 'Droid Serif', serif; - Lekton - url: //fonts.googleapis.com/css?family=Lekton style: font-family: 'Lekton', sans-serif; - Molengo - url: //fonts.googleapis.com/css?family=Molengo style: font-family: 'Molengo', sans-serif; - Nobile - url: //fonts.googleapis.com/css?family=Nobile style: font-family: 'Nobile', sans-serif; - Raleway - url: //fonts.googleapis.com/css?family=Raleway style: font-family: 'Raleway', sans-serif; - Ubuntu - url: //fonts.googleapis.com/css?family=Ubuntu style: font-family: 'Ubuntu', sans-serif; - Vollkorn - url: //fonts.googleapis.com/css?family=Vollkorn style: font-family: 'Vollkorn', serif; *** Expression @fontface Google Replacements *** - Gentium - url: //fonts.googleapis.com/css?family=Gentium+Basic style: font-family: 'Gentium Basic', serif; - Josefin - url: //fonts.googleapis.com/css?family=Josefin+Sans style: font-family: 'Josefin Sans', sans-serif; - Lobster Two - url: //fonts.googleapis.com/css?family=Lobster+Two style: font-family: 'Lobster Two', cursive; - Old Standard - url: //fonts.googleapis.com/css?family=Old+Standard+TT style: font-family: 'Old Standard TT', serif; - PT Seriff - url: //fonts.googleapis.com/css?family=PT+Serif style: font-family: 'PT Serif', serif; - PT Sans url: //fonts.googleapis.com/css?family=PT+Sans style: font-family: 'PT Sans', sans-serif; - Puritan - url: //fonts.googleapis.com/css?family=Puritan style: font-family: 'Puritan', sans-serif; - Source Code Pro - url: //fonts.googleapis.com/css?family=Source+Code+Pro style: font-family: 'Source Code Pro', sans-serif; - Titillium - url: //fonts.googleapis.com/css?family=Titillium+Web style: font-family: 'Titillium Web', sans-serif; ------------------- Expressions Static Home Page ------------------------- *** Create a Static Home Page *** 1. Create New Page and call it Home Page (or something like that) 2. Select Home Page template 3. If using a slider select the slider type and category from the Expressions Page Options Panel. 4. Publish the Page *** Create a Blog Page *** 1. Create a New Page and call in Blog 2. Select Default Template. 3. Publish the Page *** Set them up in WordPress *** 1. Go to Appearance->Customize 2. Select Static front Page 3. Front Page Displays->A static page 4. Front Page->Home Page 5. Posts Page->Blog *** Populate the sections. *** 1. Go to Appearance->Customize 2. Select Expressions Home Page There are 8 Home Page Layout Options that can be used in the Static Home Page. In each area you can select any of 8 sections to display. The first panel lets you select which section to put in each area. Then make sure the section you are using is populated with the information you want to display. *** Section 1 *** This section allows HTML text on the left and an optional link button on the right. *** Section 2 *** This section contains 3 service boxes. In each box you can upload an image, add a title (no html) and text (html allowed). You can also add a link button which is great if you want to link to a full page about the service you are introducing. Image uploads can be done using the media uploader. Make sure you insert the image after the upload as it adds the link to the cell. Tips: Keep image width less than 200 px. Jpeg images are bordered, png images are not bordered. Also keep the images the same size (if you are using them), and try to set the text length the same so the buttons line up. Check the responsiveness of your set up by changing the window size. A fair bit of fiddling around is required, but it is worth it. *** Section 3 *** This section is the same set up as Section 1. *** Section 4 *** This section contains 2 service boxes. In each box you can upload an image, add a title (no html) and text (html allowed). You can also add a link button which is great if you want to link to a full page about the service you are introducing. The layout is a little different then Section 2, with the image being placed on the left and the text on the right. *** Section 5 *** This section is the same set up as Section 1. *** Section 6 *** This section is the same set up as Section 4. *** Section 7 *** This section is the same set up as Section 1 *** Section 8 *** This section contains 4 service boxes. In each box you can upload an image, add a title (no html) and text (html allowed). You can also add a link button which is great if you want to link to a full page about the service you are introducing. Image uploads can be done using the media uploader. Make sure you insert the image after the upload as it adds the link to the cell. Tips: Keep image width less than 150 px. Jpeg images are bordered, png images are not bordered. Also keep the images the same size (if you are using them), and try to set the text length the same so the buttons line up. Check the responsiveness of your set up by changing the window size. A fair bit of fiddling around is required, but it is worth it. NOTE - The textarea boxes in the sections all allow HTML. If the buttons and images are not used the complete area is available for this HTML. So it becomes complete free form. --------------------------------------------------------------------------- Widgets --------------------------------------------------------------------------- ------------------- Expressions Author Widget ----------------------------- Drag the widget over to a widget panel and fill out the options. Note that if you have a gravatar set up from gravatar.com, for the email you input then that gravatar will show up. ------------------- Expressions Category Widget --------------------------- This widget is the same as the WordPress Categories Widget with the exception that categories in the exclude list from the Jot Options Panel will not be included. ------------------- Expressions Recent Posts Widget ---------------------- This widget is the same as the WordPress Recent Posts Widget with the exception that posts that are setup not to show in the post meta checkbox, and posts from the exclude categories in the exclude list from the Jot Options Panel will not be included. -------------------------------------------------------------------------- Recommended Plugins -------------------------------------------------------------------------- WP-PageNavi - https://wordpress.org/plugins/search.php?q=pagenavi Jot is set up to use this great plugin, providing styled page navigation for your site. Just install and activate, the Jot theme takes care of the rest. Contact Comment Basics - http://kevinsspace.ca/ This is a plugin I wrote, and it provides a contact form shortcode and a contact widget, captcha is available for the contact form and for your comments system. Panache Pizazz - http://kevinsspace.ca/ This is also a plugin I wrote and if you are an HTML (text) blogger it will be a great tool for you. It adds blogging and page building shortcodes; lists, dropcaps, columns, tabbed content, accordion content, toggle section, quotes, divider, float clear, special text, link buttons, and message boxes.