Story Magazine

Theme Documentation

Hello there...

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to contact me via the support page. Thanks so much!

Created: 6.12.2017
By: wpmasters

* Please note, that theme support does not include:

  • Customization and installation services
  • Support for third party software and plug-ins

 

Theme Instalation

Installation via WP Dashboard:
  1. Unzip the main (downloaded) theme package – to get story-magazine.zip file,
  2. Go to Appearance >Themes,
  3. click on “Add New” > and “Upload theme”,
  4. click on ‘Browse’ button, find story-magazine.zip file on your computer and press 'Install Now',
  5. Activate theme,
  6. Go to Appearance > Customize and setup theme.

 

Installation via FTP:
  1. Unzip the main (downloaded) theme package / twice / to get main theme folder ‘story-magazine’,
  2. Using FTP client (e.g. Filezilla) upload 'story-magazine' folder into 'themes' folder in your WordPress installation ( YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/ ),
  3. Go to Appearance >Themes, find Story Magazine theme and activate theme,
  4. Go to Appearance > Customize and setup theme.

 

Default Setup

1. After theme activation go to Appearance > Customize

img

2. You can change the color scheme of your website here:

img

 

3. Mosaic section: In customizer, in the left menu is possible to select a category for the main featured section (mosiac) which will be visible at the top of the homepage:

img

 

4. IMPORTANT! It is possible that after theme activation images are wrongly cropped and look ugly! In this case use following plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails (from previous the theme).
After plugin installation, start regeneration in Tools > Regen. Thumbnails. This process can take a while and you cannot close tab/window until regeneration is done.

 

 

 

Homepage Setup

 

Quick Overview

Setup is very easy and intuitive. These steps are required to create magazine layout:

- Homepage setup (empty homepage)

- Creating of 'magazine layout' in Appearance > Customize > Widgets

- Usage of "Home" widgets in 'Homepage Content' section.

  1. In 'Pages' section create new page > name it 'Home'
  2. Select 'Widgetable Builder' template for this page and save the page:
    img
  3. Go to Settings > Reading and created 'Home' page set as Static page > Front page,
    img
  4. An empty homepage is created now! In next steps, we'll create homepage content using 'Home' widgets inside 'Homepage Content' widget section.

 

'Homepage Content' widget section.

Important!

I recommend creating few classic blog posts before you start creating templates in Layout Creator. Set 'featured images' for all your posts.

  1. Go to Apperance > Customize > Widgets
    img
    img
  2. Add widgets marked as "Home" into 'Homepage Content' section.

    img
  3. You can add as many 'Home' widgets as you want to, you can select featured categories for these widgets.
  4. Save / publish 'Homepage Content' widget section and you are done!

 

Blocks Screenshots

  1. Home 1 - block displays latest or featured blog posts (classic posts).
    img
  2. Home 2 - block displays latest or featured blog posts (classic posts).
    img
  3. Home 3 - block displays latest or featured blog posts (classic posts). It is possible to select two featured categories in this widget.
    img

Blog Template

  1. If you want to create 'blog' page, create empty page (Default template),
  2. name it 'Blog' (or similar),
  3. go to Settings > Reading and set this page as 'Post page'
    img

 

  

Custom Templates

 

  1. Create a page by going to Page > Add New.
  2. In Page Attributes section select custom page template (Widgetable Builder, Full Width page etc.)
  3. Click the Publish button to publish your page.

 

Images

IMPORTANT! It is possible that after theme activation images are wrongly cropped and look ugly!

In this case use this plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails from the previous theme.
After plugin installation, start regeneration in Tools > Regen. Thumbnails This process can take a while and you cannot close tab/window until regeneration is done.

Images and thumbnails are generated automatically.

To display thumbnails correctly upload images via WP interface using "Set featured image" button.
After image upload set featured image.

 

Galleries: Native (grid) gallery
  1. If you want to create post with gallery, you need to create classic wp gallery

    doc
  2. Classic wp gallery has 'grid' layout (styling) with lightbox image preview (if 'link to media file' is selected).
    doc
  3. You can enable/create Tiled Gallery when you install 'Tiled Galleries Carousel Without Jetpack' plugin:
    doc

 

Custom Menu

 

! Create own custom menus first! Please see following tutorial!

 

The theme includes two menu sections in the header:

You need to create two custom menus in Appearance > Menus and one custom menu save for Main Menu (Left) display section and the other for Main Menu (Right) display section:

 

Custom menu (in sidebar)

1. Create another custom menu (in Appearance > Menus) and add any pages / links into it.

2. go into Appearance > Widgets and using 'Custom Menu' widget display this menu in Sidebar (Pages); (current page will be highlighted).

 

 

Menu Icons

 

1. Before (or after) menu label add this piece of code

<i class="fa XXX"></i>

Enter full icon code - 'fa' class is required.

2. For XXX you can set any icon name. You can find all icon names on Font Awesome homepage.

3. You can see how-to video here. It is not tutorial for my theme but the process is the same.

Font Awesome - Update (optional)

1. Download latest Font Awesome package.

2. In downloaded file is 'font' folder with 4 font files (.eot, .svg, .ttf, .woff)

3. Upload all these font files into 'fonts' folder (located in main theme folder) on your server.

4. Upload css files (font stylesheets) to 'styles' folder on your server.

 

 

 

 

 

Plugins

 

 

Recent Tweets Widget

he theme is compatible with Recent Tweets Widget plugin. The plugin is used on demo site.

In search field (Plugins > Add New) insert 'Recent Tweets Widget' and Install plugin.

Plugin widget can be set in Appearance > Widgets:

Note!: You need to get "consumer and secret" codes for 'Tweets' widget:

  1. Go to https://dev.twitter.com/apps/new and log in, if necessary
  2. Enter your Application Name, Description and your website address. You can leave the callback URL empty.
  3. Accept the TOS, and solve the CAPTCHA.
  4. Submit the form by clicking the Create your Twitter Application
  5. Copy the consumer key (API key) and consumer secret from the screen into widget fields

 

 

MailChimp for WordPress

You can easily create newsletter subscribe form with 'MailChimp for WordPress' Plugin: Plugin Homepage

Into search field (in Plugins > Add New) insert 'MailChimp for WordPress' and Install this plugin

Plugin can be set in MailChimp for WP section:

In demo is used subscribe form with following markup: https://pastebin.com/BsQVPApN

 

Shortcodes Ultimate

You can generate different shortcodes using 'Insert shortcode' button on all Post/Page screens:

img

 

Social Pug

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'Social Pug' and Install this plugin.

Plugin can be set in Settings > AddToAny:

The theme is compatible with Simple Share Buttons Adder too.

 

Tiled Galleries Carousel Without Jetpack

In search field (Plugins > Add New) insert 'Tiled Galleries Carousel Without Jetpack' and Install this plugin.

Tiled gallery styling can be set in 'Add / Edit Gallery' screen directly:

 

Contact Form 7

Plugin page: Plugin Homepage

Into search field (in Plugins > Add New) insert 'Contact Form 7' and Install this plugin

You can create own contact form(s) in main wp menu > Contact.

You can display created 'contact form' on any page using shortcode.

Please read plugin documentation for more info about this very flexible plugin.

 

 

 

 

Translation

This theme is translation/localization ready and comes with story-magazine.pot file. File is located in ../story-magazine/lang/ folder.

  1. You need to use localized WordPress installation (core): WordPress in Your Language.
    If not localization will be not successful.
  2. Download poedit software here,
  3. Install it and in this software translate story-magazine.pot file (line by line),
  4. Once you have translated all the strings, you can save this as your .po file.

    The filename of your .po / .mo file is crucial! Gettext uses the ISO 639 standard for language abbreviations and ISO 3166 for locales. If your translation is written in deutsch for example, your file name will look like de_DE.po. Capitalization is also important here. For a full list of language and country codes, check out these two links:

    Once you save, POEdit by default automatically creates a .mo file alongside your .po file. Put these files into 'lang' folder.

  5. Access your wp-config.php file found in your WordPress' root folder. Your file should already contain define('WPLANG', ''); but if it does not, you can add it in. You simply need to add your language and locale code into the define. If you were to translate your theme into German, you would have this:
    define('WPLANG', 'de_DE');

Your internationalization is complete!

 

 

 

 


Once again, thank you so much for purchasing this theme.

Go To Table of Contents