Loading scripts and styles only in pages with shortcode

Posted by

0

Shortcode is very commonly used in WordPress sites, and with shortcode, a number of scripts and styles might be associated with it.

Loading all those shortcode specific scripts on each and every page will add up unnecessary load time for rest of the pages.

So you can instead load the scripts and styles conditionally.

Register script or style, you want to load dynamically:

add_action( 'wp_enqueue_scripts', 'cc_register_shortcode_script_style' );

/**
 * Register style sheet and scripts
 */
function cc_register_shortcode_script_style() {
	wp_register_style( 'my-shortcode-style', '/path/to/mystyle.css' );
	wp_register_script( 'my-shortcode-script' '/path/to/script.js', array(), '1.2.3', true );
}

And enqueue the style and scripts inside your shortcode , so that whenever the shortocde runs the scripts and styles are available on that page only.

add_shortcode('cc_shortcode', 'cc_shortcode_handler');

function cc_shortcode_handler($atts) {
	wp_enqueue_script('my-shortcode-script');
        wp_enqueue_style('my-shortcode-style');

	// actual shortcode handling here
}
 Ref: WordPress Trac Ticket

Global js variables alternative to localization in WordPress

Posted by

1

If you are a WordPress Theme or Plugin developer, then you might already know this, in case you don’t, It’ll come real handy for you.

We often require some values or arrays to be available locally to theme or plugin js, If it is required for a specific JS, you can easily make it available to JS by using WordPress function:

wp_localize_script();

But in case you need the same variable to be available to multiple JS, you can do it so by hooking the JS variable at wp_head

add_action ( 'wp_head', 'my_js_variables' );
function my_js_variables(){ ?>
  <script type="text/javascript">
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;      
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ); ?>;
    var myarray = <?php echo json_encode( array( 
         'foo' => 'bar',
         'available' => TRUE,
         'ship' => array( 1, 2, 3, ),
       ) ); ?>
  </script><?php
}

Above code echoes the variables in <head></head> section of your page, and hence you can use all the variables in your custom Javascript , wherever you want.

You can conditionally echo the code on only few templates or specific pages. Here is an example:

add_action ( 'wp_head', 'my_js_variables' );
function my_js_variables(){ 

 //for specific page templates
 $current_template =  get_page_template();

// return if there is no page template, or if the page template is other than template-x1.php or template-x2.php
 if( !isset($current_template) || ( $current_template != 'template-x1.php' && $current_template != 'template-x2.php' ) ){  return; } ?>
  <script type="text/javascript">
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;      
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ); ?>;
    var myarray = <?php echo json_encode( array( 
         'foo' => 'bar',
         'available' => TRUE,
         'ship' => array( 1, 2, 3, ),
       ) ); ?>
  </script><?php
}

Hope it helps someone :)

Cheers, Happy Coding..!!

Make update or error messages disappear automatically

Posted by

1

It’s a very small code snippet you can use to make your user interface more user appealing.

For the all the updates or error messages, you can apply this jQuery snippet to hide the div automatically after few seconds.

jQuery(document).ready( function(){
  setInterval(function(){
        jQuery('.message.updated').hide('slow', function(){ 
            jQuery('.message.updated').remove(); 
        });
    },8000);
});

Where you can replace the selector  .message.updated with your own custom selector.
Also adjust the time span 8000 to your desired time in ms, after which the division tag disappears.

The hide(‘slow’) function provides a nice animation.

Happy Coding!

Strip Shortcodes in WordPress

Posted by

0

In case you have a list of shortcodes in your WordPress theme and for some posts/ pages, you don’t want to run shortcode, this code snippet could be helpful to you.

You can use this code to strip out one or more shortocdes, as per your requirement.
Just call the function dot1_strip_shortcode for a particular post or category of posts or for the whole lists of posts.

Add this code to your functions.php:

global $remove_shortcode;
/**
* Strips and Removes shortcode if exists
* @global int $remove_shortcode
* @param type $shortcodes comma seprated string, array of shortcodes
* @return content || excerpt
*/
function dot1_strip_shortcode( $shortcodes ){
global $remove_shortcode;
if(empty($shortcodes)) return;

if(!is_array($shortcodes)){
$shortcodes = explode(',', $shortcodes);
}
foreach( $shortcodes as $shortcode ){
$shortcode = trim($shortcode);
if( shortcode_exists($shortcode) ){
remove_shortcode($shortcode);
}
$remove_shortcode[$shortcode] = 1;
}
add_filter( 'the_excerpt', 'strip_shortcode' );
add_filter( 'the_content', 'strip_shortcode' );
}
function strip_shortcode( $content) {
global $shortcode_tags, $remove_shortcode;

$stack = $shortcode_tags;
$shortcode_tags = $remove_shortcode;
$content = strip_shortcodes($content);

$shortcode_tags = $stack;
return $content;
}

Call the function dot1_strip_shortcode(), with proper arguments as per your condition.

e.g. :

dot1_strip_shortcode( 'Test' );
dot1_strip_shortcode( 'Test, new_shortcode' );
dot1_strip_shortcode( array('Test', 'new_shortcode') );

User Tags in WordPress

Posted by

0

Like Post Tags, User Tags Plugin allows to add multiple taxonomies under user section, so that you can provide an option to site users to specify their personal interests in various domains and see who have the same.

user-taxonomies

You can register Taxonomies on the fly, and manage tags for the taxonomies.

user-tags-manager

Every user can than add tags to his profile as per their interests. In profile section user gets an option to add different tags as per their choices.

profile-tags

Tags section allows auto suggestion as well as creating new tags.

You can also `user_tags` shortocde to allow users to add tags from front end.

Post test plugins.com

For each tag there is a page template listing all the users having same interests. There are filters available to modify listing and content for template page:

ut_template_heading : can be used to modify Template Page Heading
ut_tepmplate_content : Can be used to modify users list style,
        args => 1 , $users => list of Users
ut_template_content_empty: display custom message, if there are no users for term
user-tags-template

WordPress Download Link: User Tags