Functionality Plugins
This is plugins i write to add more feature for Genbu Theme site. Mostly a very simple feature, i used to add all feature in my theme, i used to think that it will be easier to maintain, but it’s not true. Using plugin make it more portable and easier to maintain.
1. Genbu Simplebox to Gallery
with Simplebox for WordPress i need to create a rel="simplebox_group" in img tag to make it work, i need to make it work for all Gallery Shortcode. The code is very simple:
/* Filter WP attachment link */
add_filter( 'wp_get_attachment_link', 'gt_simplebox_to_gallery');
/**
* Replace a tag (link) with simple box group "rel"
* and that's it. done.
*/
function gt_simplebox_to_gallery ($content) {
return str_replace("<a", "<a rel='simplebox_group'", $content);
}
2. Genbu User Role Change Notification
i need to send user email notification when i update their user role. WordPress have `wp_mail` function for that. Here’s the code:
/* add action to set user role hook */
add_action( 'set_user_role', 'gt_role_update_notification', 10, 2);
/**
* Email Notification
* set email content, and send it.
*/
function gt_role_update_notification( $user_id, $new_role ) {
/* get blog url */
$site_url = get_bloginfo('wpurl');
/* get user id */
$user_info = get_userdata( $user_id );
/* set email send to user email */
$to = $user_info->user_email;
/* set email subject*/
$subject = "Role changed: {$site_url}";
/* set email message */
$message = "Hello {$user_info->display_name} your membership is updated on {$site_url}, you are now a {$new_role}";
/* send the email */
wp_mail($to, $subject, $message);
}Post Type Plugins
for every post type i register, i create a plugin, this plugin will register the post type and also for layout and template modification for archive and singular post type. For Genbu Theme site, i register 5 Custom Post type:
- Theme : for child theme section
- Plugin: for plugins section
- Docs: for documentation section
- Feature: for theme feature section.
I’ll explain only one post type “Theme” cause all plugin is basically the same.
Genbu Post Type Theme
What this plugin do:
- Register Custom Post Type “theme”
- Add thumbnail Image, theme demo link, theme download link in Sidebar.
- Add tabbed content (using Twitter Bootstrap) for changelog and other info.
- Modify filter with Genbu Atomic
Register Custom Post Type “theme”
registering custom post type in WordPress is simple.
/**
* Post Type "Theme"
* for child theme
*/
/* add register post type to init hook */
add_action( 'init', 'gt_themes_post_type' );
/**
* Register "Themes" Post Type
* for child theme listing.
*/
function gt_themes_post_type() {
/* post type label */
$labels = array(
'name' => _x('Themes', 'post type general name'),
'singular_name' => _x('Theme', 'post type singular name'),
'add_new' => _x('Add New', 'book'),
'add_new_item' => __('Add New Theme'),
'edit_item' => __('Edit Theme'),
'new_item' => __('New Theme'),
'all_items' => __('All Themes'),
'view_item' => __('View Themes'),
'search_items' => __('Search Themes'),
'not_found' => __('No Themes found'),
'not_found_in_trash' => __('No Themes found in Trash'),
'parent_item_colon' => '',
'menu_name' => 'G | Themes'
);
/* post type args */
$args = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'has_archive' => true,
'hierarchical' => false,
'menu_position' => null,
'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields' )
);
/* register */
register_post_type('theme',$args);
}
Add thumbnail Image, theme demo link, theme download link in Sidebar.
all info about theme dowload link and theme demo link is added from custom field/post meta. for theme download link i use: “genbu_home_theme_demo” field. and for download link i use “gt_theme_id” link. i just need to `add_action` to `genbu_open_sidebar` hook.
/* in setup function */
add_action('genbu_singular-theme_open_sidebar','gt_pt_theme_download_demo');
/**
* Create Demo and Download Link
* With Thumbnail above sidebar
*
*/
function gt_pt_theme_download_demo(){
global $post;
/* get meta content */
$download = get_post_meta($post->ID, 'gt_theme_id', true);
$demo = get_post_meta($post->ID, 'genbu_home_theme_demo', true);
/* create the links */
$links = ''; // empty variable
$links .= tamatebako_image( 'genbu-medium', '300', '250', 'left-image', false );
if ($demo)
$links .= '<a target="_blank" href="'.$demo.'">Demo</a>';
if ($download)
$links .= do_shortcode ('[download id="'.$download.'" format="2"]');
/* echo the link output */
echo $links;
}Add tabbed content (using Twitter Bootstrap) for changelog and other info.
i actually add/register twitter bootstrap tabbed in “gt” child theme. all css is not added via plugin but added in theme stylesheet.
Download Twitter Bootstrap Tabbed Elements
In Twitter Bootstrap Customize you can download only the elements/script you need.
i download the Togglable tabs Jquery Plugin, and added in js folder in my theme, and register the script:
/* reg bootstrap tab script */ wp_register_script( 'gt-bootstrap-tab', trailingslashit( get_stylesheet_directory_uri() ) . 'js/bootstrap-tab.min.js', array( 'jquery' ), '2.0.4', true );
and add the css in my child theme style.css.
Enqueque the script from plugin
now all i need is to enqueue the script in this plugin. I only need to enqueue the script in theme singular pages.
if ( is_singular('theme') )
wp_enqueue_script( 'gt-bootstrap-tab' );Modify Content HTML to add Togglable tabs
now everything is ready. the script is loaded, css is added in stylesheet. Now, i just need to filter `the_content` and add tabbed html element.
/* singular theme display tab */
add_filter('the_content', 'gt_pt_theme_tab_content' );
/* tabbed content */
function gt_pt_theme_tab_content($content){
global $post;
/* only modify theme content */
if (is_singular('theme') || is_page('396')){
/* get meta content */
$color = get_post_meta($post->ID, 'genbu_home_theme_color', true);
/* download monitor category for changelog */
$dl_cat = get_post_meta($post->ID, 'gt_theme_cat', true);
/* download monitor category for Beta Release */
$beta_cat = get_post_meta($post->ID, 'gt_theme_beta', true);
$tab = '<div>'; //open sesame
/* tab */
$tab .= '<ul>'; //open tab
$tab .= '<li><a href="#tab1" data-toggle="tab">Description</a></li>'; //desc tab
if($color) $tab .= '<li><a href="#tab2" data-toggle="tab">Color</a></li>'; //color tab
if($dl_cat) $tab .= '<li><a href="#tab3" data-toggle="tab">Changelog</a></li>'; //changelog tab
if($beta_cat) $tab .= '<li><a href="#tab4" data-toggle="tab">Beta</a></li>'; //changelog tab
$tab .= '</ul>'; //close tab
/* tab content */
$tab .= '<div>'; //open tab content
/* description tab content */
$tab .= '<div id="tab1">';
$tab .= wpautop(get_the_content());
$tab .= '</div>';
/* color tab content */
$tab .= '<div id="tab2">';
if($color) $tab .= wpautop(do_shortcode($color));
$tab .= '</div>';
/* changelog tab content */
$tab .= '<div id="tab3">';
if($dl_cat) $tab .= do_shortcode('[downloads query="category='.$dl_cat.'&orderby=date&order=dsc" format="1" wrap="div" before="<div>" after="</div>"]');
$tab .= '</div>';
/* beta tab content */
$tab .= '<div id="tab4">';
if($dl_cat) $tab .= do_shortcode('[downloads query="category='.$beta_cat.'&orderby=date&order=dsc" format="1" wrap="div" before="<div>" after="</div>"]');
$tab .= '</div>';
$tab .= '</div>'; //close tab content
$tab .= '</div>'; //close sesame
$content = $tab;
}
return $content;
}Modify filter with Genbu Atomic
What is Genbu Atomic?
Genbu Atomic
Genbu Theme have atomic function to make it easier for me to filter elements in template files. It require php 5.3 to work, and in child theme i need to enable it with
`add_theme_support(‘genbu_atomic’)`. This is how to enable genbu atomic function in my child theme:
/* enable atomic function */
add_action( 'after_setup_theme','enable_genbu_atomic', 9 );
function enable_genbu_atomic(){
add_theme_support( 'genbu-atomic' );
}i need to add it in `after_setup_theme` hook with priority 9, so i can use the function directly in my child theme setup function or from a plugin. In short this function can modify multiple filter hook in one array based on context of the page. (thank you Hybrid Core!).
To enable php 5.3 in in my Hosting, Hostgator, i need to add this line in .htaccess file:
# Use PHP 5.3 AddType application/x-httpd-php53 .php
How to use Genbu Atomic
i need to change layout, byline, meta, and other things in singular “theme” and “theme” archive pages, i just need to add genbu atomic in setup function with priority 11
/**
* display the theme using atomic feature in genbu
*/
add_action( 'after_setup_theme', 'gt_pt_theme_display', 11 );
function gt_pt_theme_display(){
/* check if genbu atomic function exist */
if( function_exists('genbu_atomic') ){
/* theme post type archive atomic setup */
genbu_atomic(array(
/* change theme layout in to full width */
'theme_layout' => array( 'layout' => 'layout-1c-fullwidth' ),
/* change archive template with gallery laege 300x250 px image */
'loop_template' => 'blog-gallery-large',
/* don't display the byline/author info */
'byline' => '',
/* disable excerpt */
'entry_summary' => array('disable' => '1', 'more' => '' ),
/* don't display post meta (taxonomy) */
'entry_meta' => '',
/* don't display affiliate link */
'entry_affiliate' => '',
/* change loop info (below the title) */
'loop' => array(
'info' => 'Browsing "[tmb-title]" - [tmb-count] child themes found.',
),
/* use this config in theme post type archive page */
),'archive-theme');
/* theme post type singular setup */
genbu_atomic(array(
/* don't display byline */
'byline' => '',
/* don't display thumbnail, cause it's added in sidebar */
'singular_template' => array('template' => 'singular-thumbnail-none'),
/* disable post meta info (taxonomy) */
'entry_meta' => '',
/* don't display affiliate link */
'entry_affiliate' => '',
/* use this config in theme post type singular page */
),'singular-theme');
/* end if */
}
}
Thank You So Much