Write About It

Introduction

Firstly, thank you for purchasing Write about it. In this guide, I’ll walk you through the basic set up of the theme and how to use it’s features. If you need more help then please jump onto the support forum at http://simnorlabs.com/support

 

Initial Installation

You will need to have WordPress already set up, instructions on setting up WordPress can be found here.

Once you have WordPress installed, unzip the files you’ve downloaded from ThemeForest, you’ll find a zip file labelled WriteAboutIt-ThemeToUpload.zip, this is the file you will need to upload to WordPress. A knowledge base article explaining how to get this file and which files you need from ThemeForest can be found here.

In your WordPress admin, navigate to Appearance -> Themes. At the top of this page you should see a tab labelled “Install Themes”, click this tab and then in the little menu beneath the tabs, click the “Upload” link.

Upload the ThemeToUpload.zip file using the upload field on this page, and then click the “Install Now” button.

Once the theme has been installed you should see a screen like this:

install_1a

Click the “Activate” link.

You should see the theme welcome screen, from here you can quickly access the customizer, widgets and menus admin pages as well as install the shortcodes and widgets plugins if you would like to use those features on your site, more on those later.

install_2

If you go to your site, you should see the new theme in action.

 

Introduction to the customizer

The customizer is a WordPress feature that allows you to easily tweak certain elements of your site in real time, for example you can add your logo, edit the main colour, choose your fonts and change the copyright text and see those changes happening live on your site. Once you’re happy with them you just click the “Save and Publish” button. This theme uses the customizer instead of a theme options panel.

To access the customizer you need to go to the “Appearance” page in the WordPress admin area and next to the theme image you should see a link labelled “Customize”.

customize_1

Clicking this link will take you back to the home page of your site with the customizer panel on the left ready for you to make your changes.

The customizer is split into sections, clicking on a section title will display the options for that section.

 

Changing the site title and tagline

If you prefer not to use a logo on your site, you can simply use a title and tagline instead, to change this, open the “Site Title & Tagline” section and edit the two fields.

 

Uploading your logo

To upload your logo, open the “Logo” section. If you haven’t uploaded a logo before you will see a box labelled “No Image”

customize_1a

On clicking this box you should see an upload area appear below.

customize_1b

Click the “select a file” link and navigate to your logo on your computer and upload it. You should now see it appear where the “No Image” label used to be, it should also update on the website after a few seconds.

You can also set a retina logo, this should be twice the size of the main logo, then on the iPhone it will half the size of the image so that it takes advantage of the retina screen to make the logo crisper.

 

Setting the header background image

If you would like to use just a solid colour for the header background then you can change this colour in the “Styling” section of the customizer, details of that can be found in the “Setting up the site colour” section of this documentation.

To set the header background image open the “Header Background” section of the customizer.

You should see a box labelled “No Image”, click this box and then click the “select a file” link:

customize_1b

Navigate to the image you would like to use as your background image, the image in the demo is a public domain image which you can download here. There are loads of free images you can use on this site. If you prefer to use patterns for the header then there is a nice selection of patterns here.

Once you’ve uploaded the image, the “No Image” box should update to show a preview of the image.

customize_header_back_1

The image by default will be set at 10% opacity, if you would like to increase/decrease this then you can change the value in the field “Header Background Opacity (in %)”, so if you want the image to be 50% opacity then change the 10 to 50.

The theme will make the image 100% width of the header, if you are using a tiled pattern/image instead, then you may want to repeat the background, to do this you need change the “Header Background Repeat” option from “no-repeat” to “repeat”.

The final field in this section is the “Header Top and Bottom Padding” field, by default this is 35 pixels, but you may want to change this, for example if you want more of the header image to show you would want to increase the padding accordingly.

 

Adding/editing the header icons

By default the search icon and rss icon will show. You can add up to 5 header icons (excluding the search icon). The icons come from the FontAwesome icon font.

To disable the search icon, open the “Header Icons” section of the customizer and tick the “Hide search icon” checkbox.

To add other icons, you simply need to add the icon class and the link you would like it to take the visitor to when clicked. There are multiple icons to choose from, all of which can be seen on this page.

In this example, we’ll add an icon to our twitter profile. Firstly open the “Header Icons” section of the customizer. You should already have the RSS icon set, so we’ll add the Twitter icon as the “Header Icon 2″, so if you go to the FontAwesome page, and find the twitter icon, it says the class to use is icon-twitter:

customize_header_icon_2

So copy and paste that into the “Header Icon 2″ text box.

customize_header_icon_1

And then simply add a link into “Header Icon 2 Link URL”

customize_header_icon_3

Repeat the process for any other icons you’d like to add.

 

Choosing a site layout

This theme comes with three site layouts, by default the sidebar will be to the right of the content, however you can change this so that the sidebar is on the left or you can disable the sidebar completely so that the content area becomes the full width of the site.

To change the site layout click the “Layout” section of the customizer and simply click on one of the images, after a few seconds you should see it update on the site.

cusomize_sitelayout

 

Setting up the site colour

The theme comes with the ability to change the site colour, this colour is used for the header background and the site links, buttons etc. To change this click the “Styling” heading in the customizer and you should see a button labelled “Select Color”.

customize_colour

Clicking this button will show a colour picker, you can select a preset colour from the bottom of the panel or you can click and drag the circle in the main area. You should see the colour automatically change on the site.

customize_colour_2

To go back to the default theme colour at any time just click the “Default” button.

 

Changing the site fonts

The theme comes with the ability to use a number of Google Fonts as well as normal web safe fonts. To change these open the “Styling” section of the customizer and you should see two select fields, one for the heading font and one for the paragraph font. Headings are for things like the site title, page titles and post titles, the paragraph font is for the actual text in a post or page.

Simply choose a font from the select fields and within a few seconds you should see it update on the site.

Developer Note

I have only included a set number of Google web fonts in the theme, if you would like to manually add more then you can edit the includes/arrays.php file or you can set the fonts to a normal web safe font and then add some custom css to override those using the Google web fonts @import statement to bring in the font css.

 

Adding custom css

Adding custom css is easy, just open up the “Styling” section of the customizer and add your custom css into the box, after a few seconds you should see it update live on the site. If you want to add a lot of css then I’d suggest either creating a child theme or using a custom css plugin.

 

Choosing the post elements to display

This theme comes with full post format support, however you may not want the avatar and comments number to show on a link post, so in the customizer I’ve given you the ability to toggle the elements to display on each of the post formats. To do this open the “Post Elements” section of the customizer and simply tick or untick the checkboxes, after a few seconds you should see your changes appear on the site.

customizer_formats

 

Changing how the gallery is displayed on gallery posts

This theme has a custom gallery for gallery posts that displays above the gallery post, as such you may want to disable the gallery that would show in the actual post (the thumbnails). To do this open up the “Gallery Settings” section of the customizer and tick where you’d like the gallery to appear and untick where you would like it to not appear.

customizer_gallery

 

Changing the copyright message

At the bottom of the site you’ll see a copyright message, this can be any text you like. To edit this, open the “Footer” section of the customizer and edit the text.

 

Setting up your menu

This theme comes with two spaces for menus, the main header menu and the footer menu. To set up your menus navigate to the Appearance -> Menus page in your WordPress admin area.

In the “menu name” field give you menu a name (eg, Main Menu).

menu_1

and click the “Create Menu” button. The page will reload.

On the left you’ll see a “Theme Locations” box, select the menu you just created from the “Main Menu” select field and click “Save”.

menu_2

Now you can start adding items to your menu. So on the left hand side of the menus page under the “Theme Locations” box you should see some more boxes, “Custom Links”, “Pages” and “Categories”. To add an item to the menu, simply tick the items you’d like to add and click the “Add to Menu” button.

menu_3

Your menu items will then appear on the right of the page.

If you would like to re-organise these menu items then you simply click and drag the items around on the right side panel. If you would like an item to appear as a drop down item in the menu then click the menu item and drag it to the right, you should see a dotted box appear underneath the item that is indented.

menu_4

Once you are happy with your menu order, click the “Save Menu” button in the top right and your menu should be updated on the website.

For more detailed instructions on setting up menus you can follow the guide here.

 

Setting up your widgets

This theme uses my “Simnor Widgets” plugin which can be found here. For an explanation on why I use plugins for this feature, you can read this knowledge base article.

To set up the plugin, in your WordPress admin area, navigate to Plugins -> Add New.

In the “Search” field type “Simnor Widgets” and click the “Search Plugins” button.

widgets_1

Click the “Install Now” link.

widgets_2

You should then get a message alert appear, click “OK”.

It will then download and install the plugin for you, once completed click the “Activate Plugin” link. You will then have Simnor Widgets fully installed.

To add the widgets, simply go to the Appearance -> Widgets page and drag the widgets from the left “Available Widgets” box into either the “Sidebar” or the “Footer Widgets” boxes on the right. You may need to click the arrow in the heading of those boxes before dragging the widgets over.

To edit the widget options, click the arrow in the widget header to toggle the options form and then fill out the fields requested and click the “Save” button on the widget.

If you would like to remove a widget from the site then click the “Delete” link in the widget options.

 

Adding social links to author profiles

If you have multiple authors you may want to take advantage of the social link options this theme provides for the author profiles. To add a social link for an author, navigate to the Users section of your WordPress admin and click the “Edit” link under the author’s username. If you’re editing your own account you can just navigate to Users -> Your Profile instead.

user_1

Here you can edit the usual stuff like your name, biography and password. If you scroll down to the bottom, you should see a section labelled “Profile Social Links”, you can add up to 10 links here. To add a link, first choose an icon by clicking the “Choose icon” button and then clicking on the icon you’d like to use.

user_2

Then in the text box to the right of the icon, enter the URL you’d like to link the icon to. Remember to add http:// before a link so that it links correctly.

user_3

 

Using shortcodes

This theme uses my “Simnor Shortcodes” plugin which can be found here. For the reasons why I am using a separate plugin for this functionality please read the widgets section in this guide.

In your WordPress admin area, navigate to Plugins -> Add New.

In the “Search” field type “Simnor Shortcodes” and click the “Search Plugins” button.

shortcodes_1

Click the “Install Now” link.

shortcodes_2

You should then get a message alert appear, click “OK”.

It will then download and install the plugin for you, once completed click the “Activate Plugin” link. You will then have Simnor Shortcodes fully installed. When you next go to add/edit a page or post you should see a new button on the toolbar that looks like this:

shortcodes_3

In the editor place your cursor where you would like the shortcode to appear and then click the toolbar button, this will open an inline window. Clicking a tab on the left of this window will give you the options for each individual shortcode, fill out the options and then click the “Insert Shortcode” button and the shortcode will appear in your editor.

For full instructions on using Simnor Shortcodes you can check out the dedicated user guide here.

 

Adding posts and using post formats

Post formats are a way of identifying a post as a particular type of post which allows the theme to display it differently. So for example, if you wanted to add a gallery to your post then by specifying the post format as a “gallery” post, the theme then understands that you want it to use the gallery specifically designed for the theme, or if the post is a quote, then the theme knows to display it in a quote style instead of a normal paragraph text style.

To select a post format for a post, find the “Format” box to the right of the post editor and select the format you’d like to use.

post_formats_1

and then follow the instructions below for the specific post formats.

 

Adding a normal post

You don’t need to do anything different if you are adding a normal (standard) post. Simply add a title and some content and a featured image if you would like to use one. Featured images will get automatically resized if they are too big, the image you upload should be no smaller than 660 pixels width if you are using a site layout with a sidebar and 940 pixels width if you are using the full width mode.

 

Adding an aside post

An aside is similar to a Facebook status message, in other words a short piece of text, typically a few lines maximum. This will not show a title, avatar and meta information by default but you can turn these on if you wish in the theme customizer. To add an aside post, give your post a title, add your aside content in the post editor as usual and choose the “Aside” format from the “Formats” box.

 

Adding a gallery post

Choosing the gallery post format will allow you to have the gallery appear above the post on the site and your visitors will be able to use the arrows at the bottom right of the images to navigate through the gallery.

To create a gallery post, choose the “Gallery” format from the “Formats” box and then add your post content as usual. To add the actual gallery to a post click the “Add Media” button.

gallery_1

In the inline window that appears, choose the “Upload Files” tab and click the big “Select Files” button.

gallery_2

Your computer’s file manager should show. Add the files you’d like to use in your gallery. Once they are uploaded (you’ll see a status bar on each image as they upload), click the “Create Gallery” link in the left column. The files you just uploaded will be ticked and you should see something like this at the bottom of the window:

gallery_3

If you want to remove or add an image then simply tick/untick the images from the main panel of the window or upload some more.

Once you’re happy, simply click the “Create a new gallery” button and your gallery will appear in the main panel.

Here you can click and drag your images around into the order you’d like them and add a caption underneath the image. The caption will appear next to the gallery navigation arrows on the website.

gallery_4

On the right you’ll see some extra options if you want to use the default WordPress gallery (thumbnails) instead of the theme gallery.

Once you’re happy click the “Insert gallery” button and the gallery will be added to your post.

 

Adding a link post

An link is simply a bit of text with a link attached to it. In this theme it will show the link in large text with a link icon to the left of it. To add a link post just add the link to the post editor as you would a normal link and choose the “Link” format from the “Formats” box.

 

Adding an image post

An image post is the same as a normal (standard) post, simply add an image to the post content. If you would like to have an image appear above the post then you can use the Featured Image option as usual.

 

Adding a quote post

Quote posts use a blockquote for the quote text and a cite tag for the credit. To do this create a post and choose the “Quote” format from the “Formats” box, then in the post editor add your quote as normal text. Highlight the text you would like to use as the quote and click the blockquote button in the toolbar:

quote_1

To the top right of the editor you should see two tabs, click the “Text” tab and you’ll see something like this:

quote_2

Just before the </blockquote> add the following:

<cite>Credit Name Here</cite>

Replacing “Credit Name Here”, with the text you’d like to show as the credit, so you should have something like this:

quote_3

 

Adding a status post

A status post is similar to a tweet, so it’s normally a short (less than 140 characters) paragraph of text. Add it as you would a normal post and select the “Status” format from the “Formats” box.

 

Adding a video post

The theme can handle YouTube or Vimeo videos by simply adding a link to the video, or you can add your own embed code if you would like to use another service.

To add a video post, choose the “Video” format from the “Formats” box. Under the post editor you should see a small options panel.

video_1

If you would like to show a YouTube or Vimeo video then simply paste the URL from YouTube or Vimeo into the “YouTube/Vimeo URL” textbox.

If you would like to use some embed code or even add a shortcode if you’re using a plugin for your videos then you can add it into the “Video Embed Code” box. The theme will resize the video to 100% width x 380 pixels height. If you would like to change this then you can add the following into the “Custom CSS” option in the “Styling” section of the customizer.

.post-video-holder iframe,
.post-video-holder embed { width: 600px; height: 380px; }

replacing the pixel values to the width and height you’d like.

 

Adding an audio post

Audio posts will use the MediaElement.js script to create the audio player.

To add an audio post, select the “Audio” format from the “Formats” box. Then click on the “Add Media” button from the top left of the post editor. An inline window will appear, you should see a big button labelled “Select Files”, click this button and find the .mp3 file you’d like to use from your computer.

On the right of the window you should see a section labelled “ATTACHMENT DISPLAY SETTINGS”, underneath this you’ll see a select field and a text box. If the select box doesn’t already read “Media File”, then change it to “Media File”. Then select the link that’s in the textbox and copy it to your clipboard. You can close the inline window now.

audio_1

In the post editor type the following shortcode:

[audio xxxx]

replace xxxx with the link you copied, so you should have something like:

[audio http://simnorlabs.com/themeforest/themes/write-about-it/wp-content/uploads/sites/2/2013/03/originaldixielandjazzbandwithalbernard-stlouisblues.mp3]

That’s it, save the post and you should see on the front end, the shortcode will change to a fully functional audio player.

 

Adding a chat post

A chat post is simply a chat transcript. Add it as you would a normal post and select the “Chat” format from the “Formats” box.

 

Using page templates

There are a few page templates in Write about it. To choose a page template, add a page as you would normally and in the right sidebar you should see a box labelled “Page Attributes”. In this box is a select field labelled “Template”, all you need to do is select the name of the template you’d like to use from this select field and that page will use that page template.

page_1

The following are the page templates available in Write about it:

Archives: Archives will list your last 20 posts, the last 12 months of post archive links and your categories.

Blog Authors: If you have multiple authors on your site then the blog authors page template will loop through all of your authors and show their avatar, name, bio, social links and latest 5 posts along with a link to their author archives.

Full Width Page: Simply put, this is a page where it does not load the sidebar, instead the content will span the full width of the page area.

TimelineTimeline is a list of all your posts separated by month in a timeline style.

 

Additional Help

If you require additional help, then please visit the support area at http://simnorlabs.com/support