Category Archives: Web development

WordPress Duplicator FTW

When transferring a WordPress instance from a development environment towards the production site I used to manually apply MySQL command line tools for exporting and importing the database, third-party hacks for replacing URLs within the database, and tar and/or scp/rsync for moving files around. This is a pretty straight-forward and reliable work flow.

There is, however, a shining plugin called Duplicator which will simplify these tasks for me (and for you!) in the future and which provides some additional value. It abstracts the process of transferring a website in terms of packages. Package abstractions are used in all kinds of professional applications (think Unix-like operating system distributions, mobile operating systems, programming language extensions, Linux containers, and so on) — I find the idea of WP instance packaging compelling. A Duplicator package contains

  • a file system snapshot, containing all files and directories below the WP root directory
  • a dump of your database
  • a description
  • an installer.php file for deploying the package elsewhere.

Everything but the installer file is automatically archived and checksummed, and gets a proper file name. Eventually, a package is i) a zip file and ii) the installer.php file.

You can create such packages at any point in time from within the dashboard of your running WordPress instance. Packages are stored and indexed, and a list of available packages (created from the current instance) is shown in the dashboard. You can list, download or delete these package at any point in time:

duplicator_interface

For transferring your WordPress instance to another environment, you would transfer both package files to the new location (both go to the same directory) and execute installer.php. At this point in time you need to provide the credentials for the (new) database connection. Furthermore, the install script shows the auto-detected “old URL” and “new URL” of your WordPress instance. When you invoke installation, Duplicator will replace occurrences of the old URL in your database with the new one. It also takes care of adjusting your wp-config.php. In case your .htaccess files needs to be updated in the new location, Duplicator will provide you with instructions how to do so. After that, you are usually done: a new WP instance is up and running, with the same contents as snapshotted before during package creation.

All in all, Duplicator provides a very convenient WP instance packaging solution, as well as all required tools for safely transferring a WP instance to another environment. It is actively developed and supported, and its GUI in the dashboard as well as the installer GUI make a clean impression.

Obviously, Duplicator also serves as a nice one-button-press all-in-one backup solution before performing risky tasks (Just do not forget to download the package! :)).

There is just too much plugin trash out there, and Duplicator for sure is one of those plugins that stand out by usability and professionalism.

Websites using WP-GeSHi-Highlight: a NerdyData search

For some time now I am maintaining WP-GeSHi-Highlight, a code syntax highlighting plugin for WordPress, based on the established PHP highlighting library GeSHi.

The plugin has a very basic feature set, and I have never really promoted it — still, I was wondering how popular it is. I mean, it just works, reliably, and therefore it is a quite appropriate choice for many types of WordPress sites.

I came across NerdyData, a search engine for website source code:

We index the HTML, Javascript, CSS, and plaintext of hundreds of millions of pages.

Honestly, their web interface makes a pretty crappy impression. Nevertheless, It found about 140 websites that include the term “wp-geshi-highlight” in their source: https://search.nerdydata.com/search/#!/searchTerm=wp-geshi-highlight/searchPage=1/sort=pop

This is a short list of some web pages using WP-GeSHi-Highlight, found via NerdyData:

When seeing this, I found interesting that many make use of the simple customization and deviate from the default styling of WP-GeSHi-Highlight code blocks.

WP-GeSHi-Highlight 1.2.2 released

I have released WP-GeSHi-Highlight 1.2.2. WP-GeSHi-Highlight is a code syntax highlighting plugin for WordPress, based on the established PHP highlighting library GeSHi.

This are the changes compared to version 1.2.0:

  • Improve CSS normalization (add box-shadow: none to pre block).
  • Use plugin_dir_path/url() instead of obsolete WP_PLUGIN_DIR/URL constants (improve compatibility with HTTPS-driven websites).
  • Remove obsolete screenshot from release.
  • Minor code cleanup.

WP-GeSHi-Highlight 1.2.0 released

I have released a new version of WP-GeSHi-Highlight. It includes a brand new default CSS file which works great with established themes such as twentytwelve and twentythirteen. It contains basically the same CSS code I am using here on my website. One example (Python):

>>> "wp" + "-" + "geshi" + "-" + "highlight"
'wp-geshi-highlight'

Furthermore, I have incorporated all upstream changes from GeSHi, straight away from their git repo. This brings along tons of language updates, even for bash.

For more information about WP-GeSHi-Highlight, you might want to visit http://gehrcke.de/wp-geshi-highlight.

How to add Magnific Popup to your WordPress blog

A while ago, I wrote a post about the greatness of Magnific Popup (MP), as one of the best — or even the best — modern lightbox solutions. Today, I added MP to my WordPress-driven website. It’s a fairly simple approach, you can easily repeat this.

1) Add MP files to your theme’s directory

Create the directory magnific-popup in your theme’s directory. Download the MP CSS and JS files from GitHub and put both in the magnific-popup directory:

Then, create a file named jquery.magnific-popup-init.js in the magnific-popup directory. It should have the following content:

jQuery(document).ready(function($) {
    $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').each(function(){
        if ($(this).parents('.gallery').length == 0) {
            $(this).magnificPopup({
                type:'image',
                closeOnContentClick: true,
                });
            }
        });
    $('.gallery').each(function() {
        $(this).magnificPopup({
            delegate: 'a',
            type: 'image',
            gallery: {enabled: true}
            });
        });
    });

(This is JS code to be executed in the client’s browser, it scans the HTML document for anchors (links) to image files, and modifies the corresponding HTML elements for integration with Magnific Popup. You may want to adjust it according to the MP docs)

2) Register the MP files with your theme

In order to register the newly placed files with WordPress and your theme, modify the functions.php file of your theme. Add the following code:

add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_styles');
function enqueue_magnificpopup_styles() {
    wp_register_style('magnific_popup_style', get_stylesheet_directory_uri().'/magnific-popup/magnific-popup.css', array('YOUR-THEME-STYLE-NAME'));
    wp_enqueue_style('magnific_popup_style');
}
 
add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_scripts');
function enqueue_magnificpopup_scripts() {
    wp_register_script('magnific_popup_script', get_stylesheet_directory_uri().'/magnific-popup/jquery.magnific-popup.min.js', array('jquery'));
    wp_enqueue_script('magnific_popup_script');
    wp_register_script('magnific_init_script', get_stylesheet_directory_uri().'/magnific-popup/jquery.magnific-popup-init.js', array('jquery'));
    wp_enqueue_script('magnific_init_script');
}

This makes sure that the MP resources become incorporated in the HTML code of your website. See YOUR-THEME-STYLE-NAME there above? You need to replace it with the internal stylesheet handle name of your theme. It is important to do so, it makes sure that WordPress loads the MP CSS after your theme’s CSS. This, in turn, is essential so that MP’s CSS can override certain styles (otherwise the MP styling might be broken, it was in my case). For me, YOUR-THEME-STYLE-NAME would be twentytwelve-style. If you are not sure what this name is for you, you can find it out. Have a look at my blog post WordPress: theme stylesheet handle name.

That’s ist, you are done. Image file anchors in your blog posts or pages are now automatically handled by the Magnific Popup JavaScript code.

It should be straight-forward to create a small WP plugin for this. However, the author of MP has plans for an “original” version of a MP WordPress plugin, possibly with far more features and a nice admin interface.