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