Block Magazine

 

Theme Instalation

Installation via WP Dashboard:

1. Unzip/extract the main (downloaded) theme package – to get blockmagazine.zip file,
2. Go to Appearance >Themes,
3. click on “Add New” > and “Upload theme”,
4. click on ‘Browse’ button, find blockmagazine.zip file on your computer and press 'Install Now',
5. Activate theme,
6. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!
7. Refresh admin page and BlockMagazine - admin panel' button will appear;
8. Go to BlockMagazine - admin panel (theme options) and setup theme.

 

Installation via FTP:

1. Unzip/extract the main (downloaded) theme package / twice / to get main theme folder ‘blockmagazine’,
2. Using FTP client (e.g. Filezilla) upload 'blockmagazine' folder into 'themes' folder in your WordPress installation ( YOUR_HOSTING_ROOT/YOUR_SUBDIRECTORY/wp-content/themes/ ),
3. Go to Appearance >Themes, find BlockMagazine theme and activate theme,
4. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!
5. Refresh admin page and BlockMagazine - admin panel' button will appear;
6. Go to BlockMagazine - admin panel (theme options) and setup theme.

 

Default Setup

1. After theme activation go to Appearance > Install Plugins, and install and activate Redux Framework plugin!

2. Then go to Block Magazine - admin panel

and hit "Save Changes" button to set default style settings:

You can change styling options later.

 

2. Following message may be visible after theme activation:

Click on 'Begin activating plugins' link and install and activate 'Redux Framework' (if not installed yet) and 'Shortcode Ultimate' plugins. Or you can do this by visiting Appearance » Install Plugins

 

4. IMPORTANT! It is possible that after theme activation are images wrongly cropped and look ugly! In this case use following plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails (from 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.

 

 

 

Homepage Setup

 

1. In Settings > Reading set default front page settings (Your Lastet Posts)',
2. Adjust "Blog pages show at most" number value to set number of posts on the front page and in archives.
   
   

Theme Setup - Admin panel

Theme comes with extensive options panel with functions divided to these sections:

General Settings:

1. Upload / set your Main logo image,
2. Write some 'Intro Text',
3. Select blog layout for your site,
4. Enable/disable 'Uppercase' fonts.

 

 

Primary styling:

1. Choose colors for primary elements: body, container, "ghost" color, text/links, hover, borders etc.,
2. Select font family with color, style and width of the font.

 

Header Styling & Settings:

1. Setup font styling for navigation menu,
2. Set background color or background image for header,
3. Set other colors for header,
4. Set custom margins and width limitation for logo image.

 

Footer Styling:

1. Add footer logo and footer text,
2. Select font colors for footer,
3. Choose colors for footer elements: footer background, text, links, hover, borders etc.,

 

Other Styling:

1. Set font styling for 'Meta' sections (date, category etc. post information)
2. Choose background color for elements (buttons, lines etc.),
3. Select text/link color for elements (buttons, lines etc.),
4. Set color scheme for image backgrounds.

 

 

Headings Typography:

1. Select Font-family for all headings (h1- h6) and 'post titles',
2. Select font weight for all headings (h1- h6) and 'post titles',
3. Select Font-size for all headings (h1- h6) and 'post titles',
4. Select font color for all headings (h1- h6) and 'post titles',

 

Post Settings:

1. Turn On/Off partial post sections.

Social Networks Settings:

1. Enable "Social networks" sections in the footer,
2. Enter the full URL of social network, your profile or account (enter full URL: http:// or https:// including).

 

 

If you are finished click on "Save changes" button!

 

 

 

Custom Post & Page Templates

 

1. Create a page by going to Page > Add New / Create a post by going to Posts > Add New.
2. In Page Attributes / Post Attributes section select custom page template (Left Sidebar Layout, No Sidebar Layout etc.)
3. Click the Publish button to publish your page/post
   

Post Settings

Post Settings:

In post add/edit screen, below the post content is located custom 'Themnific Post Options' tab:

a) You can select the size of the post on the homepage (for Masonry layout),

b) Enable / Disable featured image on the single post.

 

 

 

 

Custom Widgets

Theme comes with few custom widgets (marked as -Themnific).

Go to Appearance > Widgets and setup your sidebar and footer widget areas. Widgets are very easy to setup. Just follow and set partial widgets fields.

 

Used Widgets

Following widgets are used in theme demo:

You can use 'Classic Widgets' plugin if you don't like the new, block interface: https://wordpress.org/plugins/classic-widgets/

In theme demo may be used custom widgets which come with 3dr party plugins (Twitter, Newsletter etc.).
Please see 'Plugins' chapter for more info about these plugins.

 

 

Images

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

In this case use this plugin: http://wordpress.org/extend/plugins/regenerate-thumbnails/ to regenerate old thumbnails from 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.

 

Featured Images - Minimal Sizes

1. Blog template (Default,Small) images: 306x254px;
2. Blog template (Veritcal) images: 306x508px;
3. Blog template (Big) images: 611x508px;
4. Single post: 870x680px;

Custom Menu :

 

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

 

Colored Menu Item (on the right)

1. Toggle 'Screen Options' on the top of the menu screen:

2. Enable 'CSS Classes' and 'Desription' option:

3. Toggle any menu item and type special word into 'CSS Classes' field

 

Mega menu

Toggle any menu item and type 'mega' word into 'CSS Classes' field (see previous steps if the field is not visible/enabled):

Then just add child menu items.

 

 

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.

 

 

Plugins

 

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 Settings > Video Thumbnails:

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

 

 

AddToAny

Plugin page: Plugin Homepage

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

Plugin can be set in WP Dashboard > Settings > AddToAny:

 

 

Recent Tweets Widget

Theme is compatible with Recent Tweets Widget plugin. Plugin is used in demo site.

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

Plugin widget can be set in Appearance > Widegts:

Note!: You need to get "consumer and secret" codes for Recent 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

 

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 documetation for more info about this very flexible plugin.

 

In theme demo is used contacnt form with following markup: https://pastebin.com/tL2M2PMQ

 

 

 

 

Demo Content (XML file)

 

One Click Demo Import

Install and activate 'One Click Demo Import' plugin.

After that import full demo content easily in Appearance > Import Demo Data.

Just hit 'Import' button and wait until import is done (it can take few moments).

 

 

Important!

Due licenses all imported images are for testing purposes only and cannot be used on your live website!!!

You can download free photos for your commercial & personal works on sites like:

http://picjumbo.com/

http://pixabay.com/

https://unsplash.com/grid

 

Translation

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

1. You need to use localized WordPress installation (core) in the firest place:
   
   If not localization will be not successful.
2. .pot file is located in root theme folder inside 'lang' sub-folder: ../blockmagazine/lang/
3. Download poedit software here,
4. Install software it and translate blockmagazine.pot file (line by line),
5. 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:

   • Gettext language codes
   • Gettext country codes

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

6. 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