How do I change number of columns in a proper way in twentyfourteen child theme?

Question

How do I change number of columns in a proper way in twentyfourteen child theme?

bestprogrammerintheworld

2016年6月10日 07:54

I'm trying to deactive and reactive a javascript in my childtheme - from the twentyfourteen theme (so updates won't effect things).

What I really want to do is to change column width from 4 to 3 in the footer but I don't want to change /js/functions.js directly in the main theme (maybe there is another/better way achieving this. please tell!)

I'm putting this in functions.php in the child-theme:

/* activate and decative js class */
class aadjs {
    public function __construct() {
        add_action( 'wp_enqueue_scripts', array( $this, 'deactivejs'), 100 );
    }

    public function deactivejs() {
        wp_dequeue_script( 'twentyfourteen-script' ); 
        add_action( 'wp_enqueue_scripts', array( $this, 'reactivatejs'), 100);
    }

    //Why isn't this function executed?
    public function reactivatejs() {
        echo  get_stylesheet_directory_uri() . '/js/functions.js'; 
        exit;       
        wp_enqueue_script( 'twentyfourteen-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140616', true );
    }               

}
$x = new aadjs();

I want to deactive js and then reactive js but reactivatejs is not called. What am I doing wrong? The path to the new js file in the child-theme is set correctly and it does exist.

The /js/functions.js I want to change:

_window.load( function() {
        // Arrange footer widgets vertically.
        if ( $.isFunction( $.fn.masonry ) ) {
            $( '#footer-sidebar' ).masonry( {
                itemSelector: '.widget',
                columnWidth: function( containerWidth ) {
                    return containerWidth / 4;
                },
                gutterWidth: 0,
                isResizable: true,
                isRTL: $( 'body' ).is( '.rtl' )
            } );
        }

    } );

TO (notice the 3)

_window.load( function() {
        // Arrange footer widgets vertically.
        if ( $.isFunction( $.fn.masonry ) ) {
            $( '#footer-sidebar' ).masonry( {
                itemSelector: '.widget',
                columnWidth: function( containerWidth ) {
                    return containerWidth / 3;
                },
                gutterWidth: 0,
                isResizable: true,
                isRTL: $( 'body' ).is( '.rtl' )
            } );
        }

    } );

Topic theme-twenty-fourteen child-theme Wordpress javascript

Category Web

Pieter Goosen · Accepted Answer · 2016年6月10日 07:54

I'm not sure why you are using exit() in yourreactivatejs()` method as this breaks the method before it even loads your script (hopefully this is for debugging purposes).

I also do think that in is unnecessary to create a class to this, a simple spaghetti function would do perfectly. Anyways, if you need to use a class, the class's constructor is not suppose to any work, the constructor is suppose to initialize the class. You would want to to take your action outside of the constructor. Also, when it comes to removing scripts and styles, you would want to deregister and dequeue.

Here are possible solutions:

CLOSURES - not really recommended as they cannot be removed

add_action( 'wp_enqueue_scripts', function ()
{
    // Remove your script
    wp_dequeue_script( 'twentyfourteen-script' );
    wp_deregister_script( 'twentyfourteen-script' );

    // Add new script
    wp_enqueue_script( 'lets-be-unique-here', get_stylesheet_directory_uri() . '/js/functions.js', ['jquery'], '20140616', true );
}, 100 );

NORMAL SPAGHETTI

add_action( 'wp_enqueue_scripts', 'addjs', 100 );
function addjs()
{
    // Remove your script
    wp_dequeue_script( 'twentyfourteen-script' );
    wp_deregister_script( 'twentyfourteen-script' );

    // Add new script
    wp_enqueue_script( 'lets-be-unique-here', get_stylesheet_directory_uri() . '/js/functions.js', ['jquery'], '20140616', true );
}

CLASS WITH ACTION OUTSIDE

class AddJS
{
    public function addjs ()
    {
        // Remove your script
        wp_dequeue_script( 'twentyfourteen-script' );
        wp_deregister_script( 'twentyfourteen-script' );

        // Add new script
        wp_enqueue_script( 'lets-be-unique-here', get_stylesheet_directory_uri() . '/js/functions.js', ['jquery'], '20140616', true );
    }
}

THEN

add_action( 'wp_enqueue_scripts', ['AddJS','addjs'], 100 );

OR

$addjs = new AddJS();
add_action( 'wp_enqueue_scripts', [$addjs,'addjs'], 100 );

CLASS WITH ACTION INSIDE CLASS

class AddJS
{
    public function addAction ()
    {
        add_action( 'wp_enqueue_scripts', [$this,'addjs'], 100 );
    }

    public function addjs ()
    {
        // Remove your script
        wp_dequeue_script( 'twentyfourteen-script' );
        wp_deregister_script( 'twentyfourteen-script' );

        // Add new script
        wp_enqueue_script( 'lets-be-unique-here', get_stylesheet_directory_uri() . '/js/functions.js', ['jquery'], '20140616', true );
    }
}
$addjs = new AddJS();
$addjs->addjs();

How do I change number of columns in a proper way in twentyfourteen child theme?

CLOSURES - not really recommended as they cannot be removed

NORMAL SPAGHETTI

CLASS WITH ACTION OUTSIDE

CLASS WITH ACTION INSIDE CLASS

About