Outsider Wordpress Theme

About

Outsider Wordpress Theme

Personal Blog Wordpress Theme

Outsider Wordpress Theme is responsible masonry style personal blog theme.

Installation

Install Theme

Please note: This theme is made for WordPress.ORG and not WordPress.COM

In order to proceed with the theme installation, you need to make sure you have the latest version of WordPress on your self-hosted site. Useful link: Installing WordPress

To install this theme, you must have a working version of WordPress already installed. For information on installing the WordPress platform, please see the WordPress Codex. Upon downloading the .zip file, you'll have all files you need inside. Extract the .zip file and inside you will find the theme zip file called “outsider.zip”, that is the file you need to install.

Follow the steps below to install a theme. You can choose from 2 options to install.

Option 1: Wordpress Upload

  1. Navigate to Appearance > Themes
  2. Click Add New then Upload Theme
  3. Click Choose File and Navigate to find the outsider.zip file on your computer and click Install Now button
  4. After complete installation, click Activate button to active this theme

If you see some error (e.g.: The uploaded file exceeds the upload_max_filesize directive in php.ini), use Option 2: FTP Upload.

Option 2: FTP Upload

  1. Find and unzip the outsider.zip file on your computer
  2. Login to your site via FTP or cPanel
  3. Browse to wp-content/themes
  4. Upload unzipped outsider folder
  5. Log into WordPress and go to Appearance > Themes
  6. Find the Outsider Theme and click Activate button

Useful link: FTP Clients

Demo Content

Included XML file allows you to quickly set up your theme the same way our demo is set up. Please note, the XML file does not include images. Placeholders are used instead.

Follow the steps below to import Demo Data XML File

  1. Navigate to WP Admin > Tools > Import
  2. Select and install WordPress importer
  3. Once its installed, select the XML file and upload it. It can take a few minutes to install and upload all content.

Update Theme

If new version of Outsider theme is available, you can update it. To update follow steps below:

Important! Before we get started you need to back up your database and your current theme. Since we’re replacing and updating theme files, there’s a chance something could go wrong so it’s best to play it safe and have a backup.

  1. Download and unzip Theme package (this is package with theme, documentation, license etc.).
  2. Unzip archive with main theme: outsider.zip
  3. Login to your site via FTP or cPanel.
  4. Browse to wp-content/themes
  5. Delete the old theme - delete outsider folder
  6. Upload new theme - folder outsider

All data in the database are safe because anything does not change in database after updating theme files.

f you made any custom adjustments to the theme files, these adjustments will be deleted. Of course, you can add them to a new theme.

Useful link: How to Upgrade WordPress Themes Even If They Are Customized

Settings

Reading Settings

This is defaul Wordpress setting, but it's good to check it.

  1. Go to Settings > Reading
  2. Check if Your latest posts option is selected
  3. Check Blog pages show at most - number of posts displayed on home page and change if necessary. Default value is 10. Our demo uses 12 post per page.
reading option

Permalinks

WordPress offers you the ability to create a custom URL structure for your permalinks and archives. The best practice is setting to Post name. Then your permalink structure will be as follows: http://yoursite.com/sample-post/

permalinks option

Note: With this setting there is no problem if you have Wordpress using autoinstaller installed or if you are using a regular hosting. The problem may occur if you use a custom server or VPS. In this case, you must edit the .htaccess file, possibly also set permissions. Read more: Using Permalinks.

Theme settings

Outsider theme has custom menu section Layout settings with two subsections Layout settings and Advanced options. Here you can find few basic settings for your theme which can not be easily customized with Customizer or another global settings.

Layout settings

permalinks option
Infinite Scrolling

Infinite Scroll transforms a traditional "Next Page" navigation into an AJAX-powered infinite scrolling UI pattern. The new content can be loaded automatically (default option) each time you scroll to the end of the existing content, or it can be triggered to load by clicking a Load more button (if enabled) at the end of the existing content.

Posts sidebar

Enable or disable sidebar for post pages.

Filter settings

Select how to generate filter links on homepage. First option created links automatically. If you choose second option, Filter as menu with custom categories selection, links are created from categories names. You need create new menu in Appearance > Menus section and put your categories as menu items. The third option is to hide the filter and not show it on homepage.

Advanced options

permalinks option
Google Maps

If you put your map online you may need to control if the requests quota is not exceeded and be able to increase it. With an API key you can also set which web domains are allowed to access your maps – this will protect you from any unauthorized usage. To get it visit Google Maps APIs.

Twitter feed

You need to have a twitter App for your usage in order to obtain OAuth credentials. To get it visit Twitter Apps.

Customizer

You can use the Customizer (Live Preview) to preview and modify many of your site’s appearance settings. To access the Customizer from the dashboard click Dashboard and big button Customize your site or select in menu Appearance > Customize.

From Dashboard to Customizer

And this is Customizer Interface:

Customizer

Customization

Site identity

Our theme has three headings (hero) variants (Learn more about Heading settings).

Now let's focus on site identity, i.e. navbar brand (text or logo) site title and subtitle.

In the first option - static background - they are all elements visible. For customization simply write your text values and replace logo. See image below:

Custom Logo

In the second option (full-width slider) and third option (unique svg slider) are site title and subtitle hidden. They are, of course, replaced by post titles and meta informations. In this case, you can still change navbar brand (text or logo).

Logo
Custom Logo

Template uses navbar fixed on top. After scroll navbar background changes from transparent to white and font color from white to black.

If you use a logo that looks good on both backgrounds, then simply upload it.

What if you need a different logo for different backgrounds? One for transparent and one for white background? We have a simple solution.

With sprite and css transforms we can see another image variant on the same place. Basic idea is to create one big image that contains two small images placed one above the other.

Sprite

Best formats are .png and .svg. Using css transform we move image verticaly. You can see only one half of the picture. If navbar has class navbar-inverse (is transparent) then you see white title. After scroll if navbar has class navbar-light (is white) you see black (blue or another color) title.

Favicon

Learn more about Creating Favicon.

Colors

Customize color settings. You can use hex, rgb or rgba colors. The basic settings are:

Colors

Not all settings are always visible. Some settings will appear when the appropriate modification is active. Example: If is Gradient slider Hero option active - you can see four new settings. See image below.

Colors

There are two ways to customize the menu: via Dashboard or via Customizer.

Header Menu

  1. Open Appearance > Menus
  2. Type custom Menu Name
  3. Select Pages that will appear in the menu and click Add to menu button
  4. Assign Menu with menu Display location. Header Menu
  5. Click Save Menu button
Menu

Footer Menu (Social Menu)

  1. Open Appearance > Menus
  2. Type custom Menu Name
  3. Collapse Custom Links and type URL (this is URL to your social network profile) and Link text - this is social network name /see note/. Click Add to menu button
  4. Assign Menu with menu Display location Footer Menu
  5. Click Save Menu button
Footer Menu

/note Type social network name (lowercase or uppercase - both are correct) then icon is generated automatically if network or service is from list: Facebook, Twitter, Instagram, Googleplus (google-plus, google plus, google+), Pinterest, Linkedin, Tumblr, Reddit, Medium, Messenger, Whatsapp, Skype, Vine, Vk, Email, Rss, Behance, Dribbble, Github, Wordpress, Telegram, Codepen, Youtube, Xing.

Filter Menu

  1. Open Appearance > Menus
  2. Type custom Menu Name
  3. Collapse Categories and select Categories that will appear in the menu and click Add to menu button
  4. Assign Menu with menu Display location Filter Menu
  5. Click Save Menu button

This menu is optional. If you choose option Filter as menu with custom categories selection on Layout settings you need this menu. Read also Filter settings.

Widgets

Go to Appearance > Widgets and manage widgets.

Widgets

You see Available widgets on the left side. This theme also includes 2 new widgets: Outsider Featured posts and Outsider Recent posts.

Available widget areas are located on the right. They are:

How to manage widgets (from Dashboard):

  1. Go to Appearance > Widgets
  2. Choose a Widget and either drag it to the sidebar where you wish it to appear, or click the widget, (select a destination sidebar if your theme has more than one) and click the Add Widget button. Once in place, WordPress automatically updates the Theme.
  3. To customize the Widget features, click the down arrow in the upper right corner to expand the Widget's interface.
  4. To save the Widget's customization, click Save.
  5. To remove the Widget, click Delete.

Learn more about Wordpress Widgets.

Right Sidebar

This sidebar is displayed on post pages. Remember: you need also enable Sidebar for your theme. Lear more: Theme settings.

Featured / Recent Posts Bar

This bar displayed 3 recent or 3 featured posts on post pages below the post text (and below comments if enabled) . Use our theme widgets (Outsider Featured posts or Outsider Recent posts) and drop them into this area.

Aside Bar

This area is displayed below Featured / Recent Posts Bar and above Footer.

Heading settings

This theme has 3 heading (or hero) options. That's what a visitor sees when he opens your website.

  1. Static background: static image as background and site identity as content
  2. Fullwidth slider: slider with 3 Featured or 3 Recent posts resized to full viewport size
  3. Unique svg slider: slider with 3 Featured or 3 Recent posts

Static background

This is default option. It contains static hero background image and site identity (title and description).

To change background image simply use image uploader.

Hero static settings

Fullwidth slider

Slides are generated automatically. They are displayed last 3 posts from Recent post or Featured posts.

Unique svg slider

The principle is the same as Fullwidth slider. Simply select slides source: Recent or Featured posts.

Hero slider settings

Layout style

Open Customizer > Layout style

Layout style

Select theme layout style: Clean layout (default) or Card layout.

Clean layout is clean variant - white background and minimalist look. Card layout is gray backround, post items as cards on homepage, sample posts and pages are wrapped into white wrapper etc.

Show meta

Show meta info: date and category on post preview / cards.

Display Preloader

Enable or disable page preloader.

Layout style

Write custom copyright information and select footer color variant default or inverse.


Footer options

Share options

Simply select and check social networks. Share links on post pages are generated automatically.


Share options

Avatar (Optional)

In Wordpress profile photo and avatars for comments are generated by Gravatar. Learn more How to Use Gravatars in WordPress.

If you do not use Gravatar, you can use the plugin, e.g: Simple Local Avatars or WP User Avatar

  1. Go to Plugins > Add New
  2. Search plugin Simple Local Avatars or WP User Avatar (or custom choice)
  3. Install plugin and Activate it
  4. Go to Users > Your Profile
  5. At the bottom of the page find Avatar and upload your image
Custom Avatar

Page templates

This template contains page templates for pages: About and Contact. It also contains pages for Author, Archive, Categories, Tags and Search results but those pages and their content are generated automatically. To use the About and Contact pages, you need to create them. Let's do this.

Page About

  1. Click Pages > Add new.
  2. Enter page title
  3. In metabox Page Attributes select Template About
  4. Click Publish button !!!
  5. After page reloading you see new metabox under text editor. Enable or disable Twitter feed here (OAuth credentials must be filled on Layout settings > Advanced options otherwise feed is not displayed on live page.)
  6. Write content in editor
  7. Select Featured Image
  8. Click Update button (as in 4)
Page Contact

Remember: To see new page in the result, you must add this page to the menu. See Menus.

Page Contact

  1. Click Pages > Add new.
  2. Enter page title
  3. In metabox Page Attributes select Template Contact
  4. Click Publish button !!!
  5. After page reloading you see new metabox under text editor. Metabox contains multiple inputs for Address, Google map and Contact form. /see note/
  6. Write content in editor
  7. Click Update button (as in 4)
Page Contact

/note:

Remember: To see new page in the result, you must add this page to the menu. See Menus.

Publishing

Visit official Wordpress page to learn about Writing Posts.

What needs to be mentioned: Featured image, Featured post. Read more below.

Featured Image, is an image that is chosen as the representative image for Posts (or Pages). Learn more here: Post Thumbnails

Why should you set Featured Image? This image is shown for each post on your home page.

Featured image metabox

Featured post

Find Featured post metabox under the editor. To mark an post as recommended, check the box.

Featured post metabox

Shortcodes

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.
Learn more about Shortcodes.

The following shortcodes are included with WordPress: [audio], [caption], [embed], [gallery], [playlist], [video].

Our theme also has other custom shortcodes:

Shortcode Shortcode with full arguments
[blockquote] [blockquote cite="John Doe"]Lorem ipsum dolor[/blockquote]
[button] [button href="http..." class="secondary" size="btn-lg"]Content[/button]
[code] [code inline=true scrollable=false xclass=false]<?php echo 'Hello World!' ?>[/code]
[contact_form] No arguments, just [contact_form]
[google_map] [google_map location="795 Folsom Ave, San Francisco, CA 94107"]
[icon] [icon size=12]home[/icon]
[progress] [progress bg="secondary" striped=false animated=false label=true min=0 max=100]75[/progress]
[twitter_feed] [twitter_feed user="@CreativeMarket" count=6]
[url] [url href="http://example.com"]Example[/url]

Arguments: class, size, label, animated, etc. are properties from Bootstrap components.

How to use it?

Open Editor (on Post or Page) and insert shortcode wherever you want:


Shortcodes editor view

Shortcodes result example:

Shortcodes result

Child Theme

You can easily modify your website using child themes without ever changing the parent theme. When a new version of the parent theme appears, you can safely update it as all your modifications are saved in the child theme.

Basic Child theme is included in general package as outsider-child.zip.

Learn more about Child Themes also Theme Handbook: Child Themes

Credits

Plugins, files, extensions and libraries used in template

Framework

Plugins

Fonts

Photos and Images
Not included in download package

Support

Please feel free to contact us, if you have question or problem about this theme.

Your Themekiosk Team