wp-widgetify/README.md

The Widgetify WordPress Plugin is a collection of WordPress widgets designed to help web designers build sections of their web page easily via widgets.

# wp-widgetify
The Widgetify WordPress Plugin is a collection of WordPress widgets designed to help web designers build sections of their web page easily via widgets.

## NPM
You can install directly via NPM to your project folder.
```
npm install wp-widgetify
``` 

### Usage
Once installed, log into your WordPress admin dashboard and head over to the **Widgets** section of your Widgetify theme. You should see all the available widgets for your usage. The following are a list of the standard widgetify widgets available for your use and their functions (to see more on specific use case, refer to documentation):
<ul>
  <li>
    <strong>Widgetify Banner</strong><br/>
    The banner helps you create a banner with a background picture that cuts across the full width of the screen.
  </li><br/>
  <li>
    <strong>Widgetify Blog Group</strong><br/>
    The blog group helps you create a blog group in two variants (portrait & landscape).
  </li><br/>
  <li>
    <strong>Widgetify Contact Form</strong><br/>
    The contact form helps you create a basic contact form that submits to an email.
  </li><br/>
  <li>
    <strong>Widgetify Content Box</strong><br/>
    The content box helps you create a content area with title, text and associated image.
  </li><br/>
  <li>
    <strong>Widgetify Gallery</strong><br/>
    The gallery helps you create a collection of pictures with a slideshow to help the user browse through.
  </li><br/>
  <li>
    <strong>Widgetify Google Map</strong><br/>
    The google map helps you add the classic google map into your website easily by specifying an address.
  </li><br/>
  <li>
    <strong>Widgetify HTML Container</strong><br/>
    The HTML container helps you add raw HTML code into your page by adding its widget to your page.
  </li><br/>
  <li>
    <strong>Widgetify Icon Group</strong><br/>
    The icon group helps you add a set of (font-awesome, themify) icon columns into your page.
  </li><br/>
  <li>
    <strong>Widgetify Icon Metro</strong><br/>
    The icon metro helps you add a set of icons belonging to the same category using a metro effect.
  </li><br/>
  <li>
    <strong>Widgetify Photo Canvas</strong><br/>
    The photo canvas helps you add a group of pictures with equal heights all joined together like boxes.
  </li><br/>
  <li>
    <strong>Widgetify Post Combo</strong><br/>
    The post combo helps you add a post combo in a box-like format that contains equal height on both sides.
  </li><br/>
  <li>
    <strong>Widgetify Post Group</strong><br/>
    The post group helps you add a group of posts belonging to a category to your web page.
  </li><br/>
  <li>
    <strong>Widgetify Post Metro</strong><br/>
    The post metro helps you add a metro effect to a post group. Just simply add widget and specify category and you're good.
  </li><br/>
  <li>
    <strong>Widgetify Slider</strong><br/>
    The slider helps you add a full screen slider to the top part of your page. It is very handy and efficient for a slider.
  </li><br/>
  <li>
     <strong>Widgetify Social Media</strong><br/>
     The social media widget helps you add a social media sticker (facebook, twitter, instagram...) to your web page.
  </li><br/>
</ul>

### CSS Classes
By default, Widgetify uses a number of CSS classes for styling. You can also add your own custom classes by way of hooks. Listed below are the standard Widgetify classes (to see more on specific use case, refer to documentation):
<ul>
  <li>
    <strong>widgetify-hero</strong><br/>
    This is used for styling gigantic texts shown in your slider and metro group (blog & icon) widgets.
  </li><br/>
  <li>
    <strong>widgetify-caption</strong><br/>
    This is used for styling captions on your widgets.
  </li><br/>
  <li>
    <strong>widgetify-summary</strong><br/>
    This is used for styling summaries that come immediately after the caption on your widgets.
  </li><br/>
  <li>
    <strong>widgetify-sub-caption</strong><br/>
    This is used for styling sub-captions on post titles in your widgets.
  </li><br/>
  <li>
    <strong>widgetify-text</strong><br/>
    This is used for styling normal texts on your widgets.
  </li><br/>
  <li>
    <strong>widgetify-anchor</strong><br/>
    This is used for styling anchors found in your widgets.
  </li><br/>
  <li>
    <strong>widgetify-button</strong><br/>
    This is used for styling buttons found in your widgets.
  </li><br/>
  <li>
    <strong>widgetify-control</strong><br/>
    This is used for styling your widgetify form controls.
  </li><br/>
  <li>
    <strong>widgetify-block-padding</strong><br/>
    This is used to specify the level of padding within your container-fluid sections.
  </li><br/>
  <li>
    <strong>widgetify-section</strong><br/>
    This is used for styling widgetify sections.
  </li><br/>
  <li>
    <strong>widgetify-section-*</strong><br/>
    This is used for styling section paddings.
  </li><br/>
  <li>
    <strong>widgetify-margin-*</strong><br/>
    This is used for styling margin distances.
  </li><br/>
  <li>
    <strong>widgetify-overlay</strong><br/>
    This is used for styling the overlays over backgrounds.
  </li><br/>
  <li>
    <strong>widgetify-banner</strong><br/>
    This is used for styling your widgetify banner section.
  </li><br/>
  <li>
    <strong>widgetify-blog-group</strong><br/>
    This is used for styling your widgetify blog group section.
  </li><br/>
  <li>
    <strong>widgetify-contact-form</strong><br/>
    This is used for styling your widgetify contact form section.
  </li><br/>
  <li>
    <strong>widgetify-content-box</strong><br/>
    This is used for styling your widgetify content box section.
  </li><br/>
  <li>
    <strong>widgetify-gallery</strong><br/>
    This is used for styling your widgetify gallery section.
  </li><br/>
  <li>
    <strong>widgetify-google-map</strong><br/>
    This is used for styling your widgetify google map section.
  </li><br/>
  <li>
    <strong>widgetify-html-container</strong><br/>
    This is used for styling your widgetify html container section.
  </li><br/>
  <li>
    <strong>widgetify-icon-group</strong><br/>
    This is used for styling your widgetify icon group section.
  </li><br/>
  <li>
    <strong>widgetify-icon-metro</strong><br/>
    This is used for styling your widgetify icon metro section.
  </li><br/>
  <li>
    <strong>widgetify-photo-canvas</strong><br/>
    This is used for styling your widgetify photo canvas section.
  </li><br/>
  <li>
    <strong>widgetify-post-combo</strong><br/>
    This is used for styling your widgetify post combo section.
  </li><br/>
  <li>
    <strong>widgetify-post-group</strong><br/>
    This is used for styling your widgetify post group section.
  </li><br/>
  <li>
    <strong>widgetify-post-metro</strong><br/>
    This is used for styling your widgetify post metro section.
  </li><br/>
  <li>
    <strong>widgetify-slider</strong><br/>
    This is used for styling your widgetify slider section.
  </li><br/>
  <li>
    <strong>widgetify-social-media</strong><br/>
    This is used for styling your widgetify social media section.
  </li><br/>
</ul>

### Hooks/Extensions
You can extend the functionality of your widgetify widgets by adding the following hooks to your **functions.php** file or plugins. To see more on specific use case, refer to documentation. For e.g.
<ul>
  <li>
    <strong>widgetify_banner_caption</strong><br/>
    You can add a custom display to your banner caption by doing so:
  </li>
</ul>

```
add_action('widgetify_banner_caption', 'your_custom_function');
function your_custom_function($title) {
  //your code...
}
```

### Tooling
Widgetify utilizes Bootstrap 3.3.7 and Row Spacer for UI frameworking.
<ul>
  <li>BootStrap 3.3.7</li>
  <li>Row Spacer</li>
</ul>

### Requirements
WordPress

### Contributions
Anyone and everyone is welcome to contribute.