Tutorials

Aug 13 2016 ·Written by Jon Barratt

The custom Clip installed with WP Clips contains three custom files for adding functions, styles and jQuery. But, what if you want to add a new JS or CSS file, or customize / replace a theme or plugin’s existing file (e.g. responsive-menu.js or responsive-menu.css)?

Note: You can easily override individual class selectors within the Clip‘s custom-style.css file. However, when applying significant customization to small or accessory stylesheets, it is better practice to replace the file.

Adding a New JS or CSS File

Create a new file within the Clip and enqueue it via the Clip‘s custom-functions.php file. For example, if including both new-script.js and new-style.css files, you would add the following –

add_action( 'wp_enqueue_scripts', 'clip_new_scripts_styles' );
function clip_new_scripts_styles() {
    wp_enqueue_script( 'clip-new-script', content_url( 'clips/clip-custom/new-script.js' ), array( 'jquery' ), '', true );
    wp_enqueue_style( 'clip-new-style', content_url( 'clips/clip-custom/new-style.css' ), array(), '' );
}

The above code assumes that the new files are added direct to the custom Clip’s root folder.

Customizing / Replacing an Existing JS or CSS File

Copy the original file to the Clip folder and apply the required customizations, then dequeue the original file (via its $handle) and enqueue the new file via custom-functions.php. For example, if customizing a theme’s responsive-menu.js and responsive-menu.css files, you would add the following –

add_action( 'wp_enqueue_scripts', 'clip_new_scripts_styles' );
function clip_new_scripts_styles() {
    wp_dequeue_script( 'responsive-menu-script' );
    wp_enqueue_script( 'clip-new-scripts', content_url( 'clips/clip-custom/js/responsive-menu-copy.js' ), array( 'jquery' ), '', true );
    wp_dequeue_style( 'responsive-menu-style' );
    wp_enqueue_style( 'clip-new-styles', content_url( 'clips/clip-custom/css/responsive-menu-style.css' ), array(), '' );
}

The above code assumes the $handles for the original theme files are responsive-menu-script and responsive-menu-style; and that the new files are added to new or existing /js and /css folders within the custom Clip.

Refer to the links below for  wp_enqueue_script() and wp_enqueue_style() function parameters and syntax –

https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

Note: If you are building a Precoded Clip, use the clip-functions.php file instead of custom-functions.php and adjust file paths accordingly.

May 25 2016 ·Written by Jon Barratt

Managing your Clips‘ custom code translations is very simple with WP Clips. Firstly, when you install, update or upgrade the plugin, a new /languages/wp-clips.pot file is added, containing all translatable text within the plugin. But, what about the strings in your customizations? Well, here a couple of easy steps to follow:

1. Use the ‘wp-clips’ text domain for translatable strings in your core and custom Clips. This is loaded by the plugin only once and is the most efficient way to manage your Clip translations.
2. Update your wp-clips.pot file after any changes to your custom Clips or Precoded Clips, or when updating or upgrading the plugin.
3. Update your ‘wp-clips.pot’ file either locally or remotely.

If installed locally, download and install the Poedit translation editor, open the wp-clips.pot file and ‘Update’ the wp-clips.pot file from its sources.

If installed remotely, you can either download a copy of your WP Clips plugin folder, update the file within the folder and then overwrite the file to the remote server. Or, if you wish to update via WordPress admin, install the Loco Translate plugin, go to ‘Manage Translations’, locate and click the wp-clips.pot file, then ‘Sync’ and ‘Save’.

Yup, it’s just that easy!

 
Helpful Resources

How to Internationalize Your Plugin – WordPress.org Plugin Handbook
I18n for WordPress Developers – WordPress.org Codex
Localization – WordPress.org Plugin Handbook

 

May 05 2016 ·Written by Jon Barratt

The custom Clip installed with WP Clips contains three custom files for adding functions (PHP), scripts (JS/jQuery) and styles (CSS). But, what about page templates? How do you customize an existing template (e.g. front-page.php) or add a new template (e.g. new-page.php)?

Well, there are several methods available, each with its own application –

1. Customize the native template and log any changes (existing templates).
2. Copy a custom page template from the Clip to the child theme folder (new templates).
3. Point directly to a custom template in the Clip (existing and new templates).

Customize the native template and log any changes

Limiting files, functions and calls is always preferable in terms of efficiency. So, if there are only minor changes to an existing template, best practice is to modify the native template directly and log your changes in the custom Clip‘s log.txt file. If the template is ever refreshed or updated, simply refer to your record to reinstate the changes.

Copy a custom page template from the Clip to the child theme folder

If you want to add a new page template and have it appear under Page Attributes > Templates in WordPress admin, you can add the template to your custom Clip directory and set a function to copy the file to your child theme directory.

For example, if adding a new-page.php template, you would add the new template file to your custom Clip directory and the following code to your custom-functions.php file –

//* Copy new page template to active theme folder
add_action( 'after_setup_theme', 'clip_new_page_template' );
function clip_new_page_template() {
    $newdir = get_stylesheet_directory() . '/new-page.php';
    if( ! file_exists( $newdir ) ) {
        $dir = dirname( __FILE__ ) . '/new-page.php';
        copy( $dir, $newdir );
    }
}

In this case, should your child theme ever be refreshed or updated, the new template will automatically be reinstated. This method might also be useful for plugins which permit template overrides within the active theme folder.

Point to a custom template in the Clip (recommended).

For major customizations or new templates, the recommended method is to refer directly to a new template or customized template copy within the custom Clip. This is achieved using the template_include filter hook and a suitable condition to engage the template.

For example, if including a portfolio-page.php template on a page called ‘portfolio’, you would add the new template file to your custom Clip directory and the following code to your custom-functions.php file –

//* Point to new page template in clip folder
add_filter( 'template_include', 'portfolio_page_template', 99 );
function portfolio_page_template( $template ) {
    if( is_page( 'portfolio' )  ) { // this is the condition
        $new_template = dirname( __FILE__ ) . '/portfolio-page.php';
        if ( '' != $new_template ) {
            return $new_template ;
        }
    }
    return $template;
}

Alternatively, if overriding your theme’s front-page.php template, the condition would be –

if( is_front_page() ) {

Note that with this method, the template is included only when the condition(s) is being met and does not appear in admin’s Page Attributes > Templates.

So, there you go!

Adding new templates or customizing existing templates is really very simple. Remember, you can do almost anything within the custom Clip directory – from adding image folders to enqueuing javascript files to referencing alternate templates. WP Clips offers the ideal customizing environment for your child themes and plugins.