Pick

A Responsive WordPress Blog Theme


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

Install theme

After you download the package from ThemeForest, unzip it. You'll see a file pick.zip in theme folder, which is the main file that needed to upload and install. You can either choose to upload and installl the theme using WordPress theme install or use FTP function.

Install theme using WordPress install function

Upload and install using FTP

If you get any fail when install theme by Wordpress install function, we recommend to use FTP:

Must Install requires plugins

After install Pick theme you will see a notification to install requires plugin. Than you must have to install and active those plugins like the following screenshot.

Import demo content

If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

After completing all above steps, go to Posts, Pages and other sections to see imported data.

Import widget demo content

If you are new to WordPress and have problems with setting up the widget you might want to import the demo widget data file that comes with the theme. The following actions will import some dummy widget data from the live preview:

The importer Widget Importer & Exporter page like the following screenshot.

Setup Menu And Mega Menu

Following these steps to create a blog menu:

Here is a screenshot of blog menu creation

How to create Mega Menu?

1. Click On Appearance > Menus

2. Click Screen Options top of the page and Check CSS Classes.

3. Menu name will show when  you select a menu.

4. Add "megamenu" On CSS Class.  if you want to show mega menu.

5.  First think how much column you want to in mega menu. If you want to add 4 column give value "col-lg-3 col-md-6", If you want to add 3 column give value "col-lg-4 col-md-6", If you want to add 2 column give value "col-lg-6 col-md-6", If you want to add 6 column give value "col-lg-2 col-md-6"

6. Add more link and drag this link under the step-5 with left indentation.

7.  Select Top Menu.

8. And at last Save Menu.

All the step are given on the direcion on the following screenshot.

Pick comes with a fantastic a powerful admin panel from where you can update almost every part of the theme. Just go to your WordPress admin panel and click on Appearance>Pick Options

From the Pick Options, you can manage overall Color Schema, Typhography, Layout Changing, Post Settings, Featured Post, About Page, Contact Page, Search Page, Footer Section, 404 Page ect  The Pick Options panel looks like this. I think when you see every section of this option palel you will understand. So i do not describe everything part by part here.

 

Setup About page and Contact page

After installating and activating Pick, you need to perform the following tasks to enable About page and Contact page. 

  1. Go to WordPress Admin Panel's Settings Menu, click on Permalink and pickup one (we suggest that you pick up postname) and click on Save
  2. Create a new page. Enter "About Me" as title and keep the content field blank. Now select "About Me" as page template from the right side page template dropdown menu. Now save/publish it
  3. Same way create another new page with a title "Contact" and keep the content blank. Now assign it "Contact" page template from the right side page template dropdown menu. Now save/publish it
  4. From menu section just add this link into menu.

Screenshot below:

From this section in pick Options, you can manage the appearance and content of About Me page. This section looks like the following screen. 

 

From this section in pick Options, you can manage the appearance and content of Contact page. This section looks like the following screen. 

In Contact Page has a contact form. That has built with Wordpress Contact Form 7 Plugin. To show Contact form in Contact page you need to do a little task. When you import pick xml demo contact a contact form will import also. Here is a screenshot below:

Just copy the shortcode in 2 no. selection ans paste it above screenshot Contact Page option no. 3 Contact Form 7 Shortcode Field and Save It. That's All.

If you don't  want to import  sample-content.xml  data, You can create a Contact Form 7 dynamic form from this code:

<div class="row">
    <div class="col-md-4 padding-right">

       [text* name id:name class:form-controller placeholder "Name *"]  
  
    </div>

    <div class="col-md-4 padding-left-right">

        [email* email id:email class:form-controller placeholder "Email *"] 

    </div>

    <div class="col-md-4 padding-left">

        [text* subject id:subject class:form-controller placeholder "Subject *"]

    </div>
    <div class="col-md-12">

        [textarea* message id:message class:form-controller 45x8 placeholder "Write a Comment...."]

    </div>
    <div class="col-md-12">

        [submit id:submit "Submit"] 

    </div>
</div>

And here is the Contact Form HTML extracture: 

<div class="row">
    <div class="col-md-4 padding-right">
        <p>
            <input type='text' name='name' id='name' class="form-controllar"  aria-required="true" placeholder="Name*">
        </p>
    </div>
    <div class="col-md-4 padding-left-right">
        <p>
            <input type='text' name='email' id='email' class="form-controllar"  aria-required="true" placeholder="Email*">
        </p>
    </div>
    <div class="col-md-4 padding-left">
        <p>
            <input type='text' name='subject' id='subject' class="form-controllar"  aria-required="true" placeholder="Subject*">
        </p>
    </div>
    <div class="col-md-12">
        <p>
            <textarea name='message' id='message' class="form-controllar" aria-required="true" rows="8" cols="45" placeholder="Write a Comment....">
</textarea>
        </p>
    </div>
    <div class="col-md-12">
        <p class="form-submit">
            <input type="submit" value="Submit" id="submit" name="submit">
        </p>
    </div>
</div>

We've created extra 12 custom widget for this Pick theme. 

If you want to show this widget. Just drag the widget in the widget area.

 

Mailchimp Widget Configuration 

How to setup Mailchimp widget ?

step 1:  Need to create a mailchimp account from Mailchimp.com or if you have account than go step two.

step 2: Login your mailchimp account and make a list 

and fill the necessary informations than click save.

step 3: After step one and two you will show that interface 

than click Signup forms > Embedded forms 

step 4: After clicking Embedded forms Select button than you will show

and you need to copy form action URL

step 5:  Go Theme admin Panel > Apprerance > Widgets

Drag the widget to your selected location

Step 6: 

1. To change the widget title

2. Paste the action URL which copied from mailchimp embeded form action URL

3. Description about Newsletter to show above form ffield and under the widget title. 

4. To change the subscribe button name.

5. To show or hide first and last name field


and click Save Button 

*** Finish ***

Here is a screenshot of Instagram Widget. This Instagram Widget will show above Footer Widget

 

To add or manage Instagram Widget go to  the following screenshot.

Now you need to configure Instagram Widget by your Instagram information like the following screenshot. 

 

Post Format

Post Formats is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.

In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.

Pick theme supports the following post formats:

Using post format in pick lets you differentiate post from each other and make the blog page / single page looks more beautiful.

When you edit a post, select a format you want to apply to that post on the Format meta box on the right:

When you choose a format, a corresponding meta box will appear below the content editor, here's the list of them:

Meta field for Gallery:

 

Meta field for Audio:

 

Meta field for Video:

Meta field for Quote:

Meta field for Link:

 

Meta field for Status:

 

All you need to do is just enter all information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc.

 

You can manage total layout settings from Pick Options Panel. But you if you want to show different layout of individual post or pages you can do this. And you can also add custom css and js for a single post and pages.

For single post you can follow the screenshot:

For single page you can follow the screenshot:

 

In Pick Theme has 11 shortcode

  1. Button Shortcode
  2. Progress Bar Shortcode
  3. Status Shortcode
  4. Alert Shortcode
  5. Video Shortcode
  6. Audio Shortcode
  7. Tooltip Shortcode
  8. Dropcap Shortcode
  9. Columns Shortcode
  10. Accordion Shortcode
  11. Tab Shortcode

In Wordpress post editor when you click on shortcode icon the shortcode list will show. Then use your desire shortcode from the list. 

 

Describe below about shortcode:

Column Shortcode:

[row]
   [column number=" "] Column content will stay here [/column]
[/row]

Column Shortcode Demo:

[row]
  [column number="6"] Column content will stay here [/column]
  [column number="2" offset="2"] Column content will stay here [/column]
[/row]

number attribute for column and offset attribute for margin. You can use highest 12 column.

Status Shortcode:

[status type=" " url=" " background=" "]

In type attribute give value "facebook" or "twitter" (without Quotation) And url give facebook, twitter or google_plus status url.

In url attribute give your desire status url

With value Facebook shortcode like this :

[status type="facebook" url="https://www.facebook.com/envato/posts/10153577094401209"]

If you want to add background behind status just give image url to background attribute

Accordion Shortcode:

[collapse_group]
   [collapse id=" " title=" "] Content will stay here [/collapse]
   [collapse id=" " title=" " expanded="true"] Content will stay here [/collapse]
   [collapse id=" " title=" "] Content will stay here[/collapse]
[/collapse_group]

In id attibute every time use different value Like (collapse_one, collapse_two, collapse_three).

In title attribute give your collapse title.

If you want to expanded collapse add a attribute like this (expanded="true").

Button Shortcode:

[button type=" " size=" " text=" " disabled="true"]  

 

In type attibute give button type - Like (default, primary, success, info, warning, danger).

In title attribute give your custom button title.

In size attribute give button size. Like (btn-normal, btn-lg, btn-sm, btn-xs).

If you want to show disable button add a attribute like this (disabled="true").

Button Shortcode Code:

[button type="primary" size="btn-lg" text="Custom Title"]

Progress Bar Shortcode:

[progress_bar type=" " width=" " animation="true" striped="true" title=" "]

In type attibute give progress bar style type - Like (primary, success, info, warning, danger).

In title attribute give your custom progress bar title.

In width attribute give progress bar with. Like (40, 60). It range has 1-100. Don't give % value here just add integer value, percent will automatic add.

If you want to show striped progress bar just  add a attribute like this (striped="true").

If you want to show striped animation just  add a attribute like this (animation="true").

Progress Bar Shortcode demo:

[progress_bar type="primary" width="43" animation="true" striped="true" title="43%"]

Tooltop Shortcode:

[tooltip title=" "] Content will stay here [/tooltip]

In title attribute give your custom tooltip title.

Alert Shortcdoe:

[alert type=" " dismiss="true"] Content will stay here[/alert]

In type attibute give alert style type - Like (primary, success, info, warning, danger).

If you want to add close button in alert shortcode just add a attribute (dismiss="true").

If you give anchor link in alert add a class (alert-linkin anchor. Like below

<a href="#" class="alert-link">this important alert message</a>

Alert Shortcdoe demo:

[alert type="info" dismiss="true"]Lorem ipsum dolor sit amet consectetur[/alert]

How to use Dropcap?

If you want to use dropcap just use span tag with dropcap class in wordpress editor. Use Text Mode in editor when use dropcap.

<span class="dropcap">W</span>

Note: In list lost no shortcode will show. All shortcode will show in single post page.

If you want want to post in Featured  Section, You just need to select Featured Category when post.

Note: You don't need to create Featured Category, When you installed pick theme A Featured Category would automatically create.

Here is a screenshot:

Note: Must use same size image in fetuared post.

From this section in Pick Options, you can manage the appearance and content of Featured Post. This section looks like the following screen. 

 

Here is a screenshot of author info box. This box will show in Single page, Page page And Author Page.

 

To manage author info box go to  the following screenshot.

Screenshot below:

You can export and import your admin panel settings from the Import/Export settings section

 

Tell WordPress which language file to use.

If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation.

You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation.

ust add the line below to your wp-config.php or change it if it already exists:

define ('WPLANG', 'fr_FR');

First Method: Using Codestyling Plugin

The easiest way to translate your theme locally is by using the Codestyling Localization plugin. After you have installed and activated the plugin, simply go to Tools > Localization (shown in your language) and translate the theme from your WordPress backend following the plugin instructions

Second Mothod: Using Poedit

Poedit is a common program which you can use to translate the theme. It’s available for free on poedit.net. After you have installed Poedit, you can open it and select File > New Catalog from POT file. Then select the .pot file from the theme you wish to translate which you can find in the /languages/ folder of theme. Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example es_ES.po). Normally Poedit automatically creates the .mo file and saves it, too. The last step you have to do is to upload your created language files to the language folder of your theme using FTP.

SCSS is a CSS Pre-processor which helps in writing CSS with the use of dynamic functionalities like variable and mixins making CSS dynamic language. Where attributes can be called as variables and valuees can be passed through function called mixins. For more detailed documentation visit: http://sass-lang.com/.

Using Scss
 
You will require a less compiler which can compile .scss extension to .css extension. There are many good compiler like Codekit, Koala, Preprops . and more. In my personal choice is Preprops. Or you can use Koala. Because it is open source.
 
Pick Theme Scss Directory.
sass
   --variables-site
      --color.scss
      --typhography.scss
      --option.scss
      --stracture.scss
   --mixin
      --mixin-master.scss
   --typhography
     --headings.scss
     --copy.scss
   --elements
     --list.scss
     --table.scss
   --forms
     --fields.scss
     --buttons.scss
   --navigation
     --links.scss
     --menu.scss
     --pagination.scss
     --navigaton_responsive.scss
   --modules
     --accessibility.scss
     --alignment.scss
     --clearings.scss
     --infinite-scroll.scss
   --layout
     --heading-content.scss
     --featured-content.scss
     --main-content.scss
     --widget-contetn.scss
     --footer-contetn.scss
     --layout-responsive
   --site
     --others
        --404.scss
        --about.scss
        --contact.scss
     --primary
        --aside.scss
        --comments.scss
        --post-and-pages.scss
      --secondary
         --widget.scss
      --site_responsive.scss
    --media
       --captions.scss
       --galleries.scss
       --media.scss

All Section are fully commented. For this you can change easily.

 

I've used the following images, icons or other files as listed.

WORDPRESS PLUGINS & LIBRARIES

JAVASCRIPT / JQUERY PLUGINS 

CSS PLUGINS

 

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

SoftHopper