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):

• Widgetify Banner
  The banner helps you create a banner with a background picture that cuts across the full width of the screen.


• Widgetify Blog Group
  The blog group helps you create a blog group in two variants (portrait & landscape).


• Widgetify Contact Form
  The contact form helps you create a basic contact form that submits to an email.


• Widgetify Content Box
  The content box helps you create a content area with title, text and associated image.


• Widgetify Gallery
  The gallery helps you create a collection of pictures with a slideshow to help the user browse through.


• Widgetify Google Map
  The google map helps you add the classic google map into your website easily by specifying an address.


• Widgetify HTML Container
  The HTML container helps you add raw HTML code into your page by adding its widget to your page.


• Widgetify Icon Group
  The icon group helps you add a set of (font-awesome, themify) icon columns into your page.


• Widgetify Icon Metro
  The icon metro helps you add a set of icons belonging to the same category using a metro effect.


• Widgetify Photo Canvas
  The photo canvas helps you add a group of pictures with equal heights all joined together like boxes.


• Widgetify Post Combo
  The post combo helps you add a post combo in a box-like format that contains equal height on both sides.


• Widgetify Post Group
  The post group helps you add a group of posts belonging to a category to your web page.


• Widgetify Post Metro
  The post metro helps you add a metro effect to a post group. Just simply add widget and specify category and you're good.


• Widgetify Slider
  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.


• Widgetify Social Media
  The social media widget helps you add a social media sticker (facebook, twitter, instagram...) to your web page.

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):

• widgetify-hero
  This is used for styling gigantic texts shown in your slider and metro group (blog & icon) widgets.


• widgetify-caption
  This is used for styling captions on your widgets.


• widgetify-summary
  This is used for styling summaries that come immediately after the caption on your widgets.


• widgetify-sub-caption
  This is used for styling sub-captions on post titles in your widgets.


• widgetify-text
  This is used for styling normal texts on your widgets.


• widgetify-anchor
  This is used for styling anchors found in your widgets.


• widgetify-button
  This is used for styling buttons found in your widgets.


• widgetify-control
  This is used for styling your widgetify form controls.


• widgetify-block-padding
  This is used to specify the level of padding within your container-fluid sections.


• widgetify-section
  This is used for styling widgetify sections.


• widgetify-section-*
  This is used for styling section paddings.


• widgetify-margin-*
  This is used for styling margin distances.


• widgetify-overlay
  This is used for styling the overlays over backgrounds.


• widgetify-banner
  This is used for styling your widgetify banner section.


• widgetify-blog-group
  This is used for styling your widgetify blog group section.


• widgetify-contact-form
  This is used for styling your widgetify contact form section.


• widgetify-content-box
  This is used for styling your widgetify content box section.


• widgetify-gallery
  This is used for styling your widgetify gallery section.


• widgetify-google-map
  This is used for styling your widgetify google map section.


• widgetify-html-container
  This is used for styling your widgetify html container section.


• widgetify-icon-group
  This is used for styling your widgetify icon group section.


• widgetify-icon-metro
  This is used for styling your widgetify icon metro section.


• widgetify-photo-canvas
  This is used for styling your widgetify photo canvas section.


• widgetify-post-combo
  This is used for styling your widgetify post combo section.


• widgetify-post-group
  This is used for styling your widgetify post group section.


• widgetify-post-metro
  This is used for styling your widgetify post metro section.


• widgetify-slider
  This is used for styling your widgetify slider section.


• widgetify-social-media
  This is used for styling your widgetify social media section.

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.

• widgetify_banner_caption
  You can add a custom display to your banner caption by doing so:

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.

• BootStrap 3.3.7
• Row Spacer

Requirements

WordPress

Contributions

Anyone and everyone is welcome to contribute.