Category Archives: WordPress

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.

WordPress: stylesheet inclusion order

In WordPress, custom style and script resources should be incorporated with the corresponding API calls, such as wp_register_style and wp_enqueue_style. These API calls are usually only indirectly called: they should be registered with the add_action API call, which supports priorities. WordPress then calls the wp_register/enqueue_* functions automatically at the right time. The order of these calls is given by the priorities set up when calling add_action. A big warning: these priorities, however, do not translate into the order in which the script/style resources end up in the HTML. This has been clarified in this StackOverflow answer: http://wordpress.stackexchange.com/a/91964

Stylesheet ordering can only reliably be achieved with WordPress’ concept of “stylesheet dependencies”. These can be defined with the fourth argument to wp_register_style, e.g.:

wp_register_style('magnific_popup_style', get_stylesheet_directory_uri().'/magnific-popup/magnific-popup.css', array('twentytwelve-style'));

The fourth argument in this call is array('twentytwelve-style'). This would make sure that the /magnific-popup/magnific-popup.css inclusion (via HTML link tag) is done after inclusion of the stylesheet with the internal handle name 'twentytwelve-style' (as you can see, you need to know the handle name of a stylesheet in order to define it as a dependency).

Application scenario: the 'twentytwelve-style' is the theme’s main stylesheet in my case. Without explicitly defining this dependency above, my WordPress would incorporate the magnific-popup CSS before incorporating my theme’s CSS. However, I need the magnific-popup CSS to override some CSS rules defined in my theme’s CSS. Likewise, I need to reliably make sure that the magnific-popup CSS is loaded after the theme’s CSS. Therefore the dependency.

This is quite a simple concept — it’s just that the WordPress docs are not so explicit about all this. The most complicated thing in all this was to find out the internal stylesheet handle name of my theme (these are the little quirks people hate WordPress for). I’ve written another small post about how to reliably find out this one: see WordPress: theme stylesheet handle name