Tag: Theme Editing

Enqueing Scripts In A Genisis Child Theme

Just managed to implement my solution for NumScroller on Tees Valley Arts website and of course their site had to be awkward.

Apparently a Genesis Child Theme requires a few more parameters when calling “wp_enqueue_script” than the Beans Theme.

/**
 * Adds script (David Stockdale).
 */
add_action( 'wp_enqueue_scripts', 'add_my_script' );
/**
 * Adds script for NumScroller (David Stockdale).
 */
function add_my_script() {
	wp_enqueue_script(
		'numscroller-1.0', // name your script so that you can attach other scripts and de-register, etc.
		get_stylesheet_directory_uri() . 
		'/lib/numscroller-1.0.js', // this is the location of your script file.
		array( 'jquery' ), // this array lists the scripts upon which your script depends
		'', //Not needed with Beans.
		true //Not needed with Beans.
	);
}

Filed under: WordPressTagged with: ,

Adding Scrolling Numbers with “NumScroller”

After fiddling with “NumScroller” for a while I finally got it working!

Add to “functions.php”:

/**
 * Adds script.
 */
add_action( 'wp_enqueue_scripts', 'add_my_script' );
/**
 * Adds script.
 */
function add_my_script() {
    wp_enqueue_script(
        'numscroller-1.0', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/lib/admin/assets/js/numscroller-1.0.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Add the “Numbscroller-1.0” JQuery Plugin as a script file (named “numscroller-1.0.js”):

/**
* jQuery scroroller Plugin 1.0
* (With a minor update by David Stockdale wrapping it in a jQuery)
* http://www.tinywall.net/
* 
* Developers: Arun David, Boobalan
* Copyright (c) 2014 
*/
jQuery(document).ready((function($){
    $(window).on("load",function(){
        $(document).scrollzipInit();
        $(document).rollerInit();
    });
    $(window).on("load scroll resize", function(){
        $('.numscroller').scrollzip({
            showFunction    :   function() {
                                    numberRoller($(this).attr('data-slno'));
                                },
            wholeVisible    :     false,
        });
    });
    $.fn.scrollzipInit=function(){
        $('body').prepend("<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>" );
    };
    $.fn.rollerInit=function(){
        var i=0;
        $('.numscroller').each(function() {
            i++;
           $(this).attr('data-slno',i); 
           $(this).addClass("roller-title-number-"+i);
        });        
    };
    $.fn.scrollzip = function(options){
        var settings = $.extend({
            showFunction    : null,
            hideFunction    : null,
            showShift       : 0,
            wholeVisible    : false,
            hideShift       : 0,
        }, options);
        return this.each(function(i,obj){
            $(this).addClass('scrollzip');
            if ( $.isFunction( settings.showFunction ) ){
                if(
                    !$(this).hasClass('isShown')&&
                    ($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.showShift)>($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))&&
                    ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))<($(this).outerHeight()+$(this).offset().top-settings.showShift)
                ){
                    $(this).addClass('isShown');
                    settings.showFunction.call( this );
                }
            }
            if ( $.isFunction( settings.hideFunction ) ){
                if(
                    $(this).hasClass('isShown')&&
                    (($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.hideShift)<($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))||
                    ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))>($(this).outerHeight()+$(this).offset().top-settings.hideShift))
                ){
                    $(this).removeClass('isShown');
                    settings.hideFunction.call( this );
                }
            }
            return this;
        });
    };
    function numberRoller(slno){
            var min=$('.roller-title-number-'+slno).attr('data-min');
            var max=$('.roller-title-number-'+slno).attr('data-max');
            var timediff=$('.roller-title-number-'+slno).attr('data-delay');
            var increment=$('.roller-title-number-'+slno).attr('data-increment');
            var numdiff=max-min;
            var timeout=(timediff*1000)/numdiff;
            //if(numinc<10){
                //increment=Math.floor((timediff*1000)/10);
            //}//alert(increment);
            numberRoll(slno,min,max,increment,timeout);
            
    }
    function numberRoll(slno,min,max,increment,timeout){//alert(slno+"="+min+"="+max+"="+increment+"="+timeout);
        if(min<=max){
            $('.roller-title-number-'+slno).html(min);
            min=parseInt(min)+parseInt(increment);
            setTimeout(function(){numberRoll(eval(slno),eval(min),eval(max),eval(increment),eval(timeout))},timeout);
        }else{
            $('.roller-title-number-'+slno).html(max);
        }
    }
}));

Add this custom html to your page/post:

<span class='numscroller' data-min='1' data-max='700000' data-delay='5' data-increment='10'>0</span>

And Voila:

0
Filed under: WordPressTagged with: ,

Adding New Files To A Theme (Using Only Theme Editor)

To add a new file to theme using only theme editor, add this to “Header.php”:

touch('wp-content/themes/your_theme_directory/your_new_file_name.php');

then visit your sites home page and the file will be created!

Remember to delete it immediately after adding it!

I used:

touch('wp-content/themes/Beans-master/lib/admin/assets/js/numscroller-1.0.js');

To add “numscroller-1.0.js” to my website (more on that later if I can make it work).

Filed under: WordPressTagged with: ,

Embed Customisation Supporting “Co-Authors Plus” (With Archive Links)

More fiddling with embedded posts, this time making changes to the code outlined in Embed Customisation Supporting “Co-Authors Plus” in order to make every authors name into a link to their post archive page.

/**
 * Removes the title (David Stockdale).
 */
add_filter('embed_site_title_html','__return_false');
/**
 * Adds the author's names (David Stockdale).
 */
add_action( 'embed_content', 'embed_author' );
/**
 * Adds the author div to the embed iframe (David Stockdale).
 */
function embed_author() {
    $output = '<div class="wp-embed-author"><ul>';
	$coauthors = get_coauthors();
	foreach( $coauthors as $coauthor ): 
		$output .= '<li>';
		$authorArchiveLink = get_author_posts_url($coauthor->ID);
		$output .=  "<a href=$authorArchiveLink> $coauthor->user_firstname $coauthor->user_lastname</a>";
		$output .= " ";
		$output .= get_avatar( get_userdata( $coauthor->ID ), 20 );
		$output .= '</li>';
	endforeach;
	$output .= '</ul></div>';
    echo $output;
}

Filed under: WordPressTagged with: ,

Embed Customisation Supporting “Co-Authors Plus”

So i went in to do some volunteer work today planning to implement the changes to the website outlined in Embedded Post Customisation only to realise that their site uses “Co-Authors Plus” (meaning posts and pages can have multiple authors).

Thus I fiddled around until I figured out how to get each co-author and display them all, with my first attempt simply outputting them all in a single line as shown here:

/**
 * Removes the title (David Stockdale).
 */
add_filter('embed_site_title_html','__return_false');
/**
 * Adds the author's names (David Stockdale).
 */
add_action( 'embed_content', 'embed_author' );
/**
 * Adds the author div to the embed iframe (David Stockdale).
 */
function embed_author() {
    $output = '<div class="wp-embed-author">';
	$coauthors = get_coauthors();
	foreach( $coauthors as $coauthor ): 
		$output .=  ' ';
    	$output .=  $coauthor->user_firstname;
		$output .= " ";
		$output .=  $coauthor->user_lastname;
		$output .= " ";
    	$output .= get_avatar( get_userdata( $coauthor->ID ), 20 );
	endforeach;
	$output .= '</div>';
    echo $output;
}

My second attempt was slighly more elegant as it outputted the authors as a list.

/**
 * Removes the title (David Stockdale).
 */
add_filter('embed_site_title_html','__return_false');
/**
 * Adds the author's names (David Stockdale).
 */
add_action( 'embed_content', 'embed_author' );
/**
 * Adds the author div to the embed iframe (David Stockdale).
 */
function embed_author() {
    $output = '<div class="wp-embed-author"><ul>';
	$coauthors = get_coauthors();
	foreach( $coauthors as $coauthor ): 
		$output .=  '<li>';
    	$output .=  $coauthor->user_firstname;
		$output .= " ";
		$output .=  $coauthor->user_lastname;
		$output .= " ";
    	$output .= get_avatar( get_userdata( $coauthor->ID ), 20 );
		$output .= '</li>';
	endforeach;
	$output .= '</ul></div>';
    echo $output;
}

However this had it’s own problems as a small enough image combined with a long enough list could look rather messy….

Perhapse I can place the list within columns? For now i’ll submit the second version and see what the boss thinks.

Filed under: WordPressTagged with: ,

Theme Editing

A compilation of posts containing useful information on theme editing (both code that I’ve made use of in the theme editor in the past and general tips and tricks). I’m mostly posting this so I’ll have access to all this code anywhere I go. But maybe this will be of use to someone in the future.

Filed under: WordPressTagged with: ,

Embedded Post Style Customisation

After figuring out how to customise embedded posts a bit I was still annoyed by the fact that they were all bright white on my dark-themed website.

Thus i spent some more time fiddling with embedded post customisation until I figured out this:

/**
 * Customises the style/colours of embedded posts.
 */
add_action( 'embed_head', 'embed_styles' );
/**
 * Embed the plugin's custom styles.
 */
function embed_styles() {
    echo <<<CSS
<style>
  .wp-embed {
    background-color:#ccc;
	color:#444;
  }
</style>
CSS;
}

Apparently you can apply “custom styles” to embedded posts.

Filed under: WordPressTagged with: ,

Embedded Post Customisation

Have you ever wanted to remove that unsightly site title?

Ever wanted to show who worked on the post?

Well I have and after quite a bit of searching and fiddling I figured it out.

/**
 * Removes the title.
 */
add_filter('embed_site_title_html','__return_false');
/**
 * Adds the author's name.
 */
add_action( 'embed_content', 'embed_author' );
/**
 * Add the author div to the embed iframe.
 */
function embed_author() {
    $output = '<div class="wp-embed-author">';
    $output .= '&mdash; ';
    $output .= get_the_author();
	$output .= " ";
    $output .= get_avatar( get_the_author_meta( 'ID' ), 20 );
    $output .= '</div>';
    echo $output;
}

Just slap this into your theme somewhere (in Beans they have a file called “Embed” that i slipped it into) and voilà! Your site title will disappear and be replaced with the author of the post!

Filed under: WordPressTagged with: ,