Using Crayon Manually in PHP
03 MAY 2012 Crayon

Crayon can be used in any PHP environment so it’s possible to extend to another CMS other than WordPress. Here’s a sample of how you’d do that. This script works from the Crayon plugin directory, so you’d need to update any paths. Also make sure you reference correct urls and paths for the defined settings.

<?php 

require_once ('global.php');
require_once (CRAYON_HIGHLIGHTER_PHP);

// These will depend on your framework
CrayonGlobalSettings::site_http('http://localhost/crayon/');
CrayonGlobalSettings::site_path(dirname(__FILE__)); // For WP, this is ABSPATH
CrayonGlobalSettings::plugin_path('http://localhost/crayon/wp-content/plugins/crayon-syntax-highlighter/');

// Should be in the header
crayon_resources();

$crayon = new CrayonHighlighter();
$crayon->code('some code');
$crayon->language('php');
$crayon->title('the title');
$crayon->marked('1-2');
$crayon->is_inline(FALSE);

// Settings
$settings = array(
    // Just regular settings
    CrayonSettings::NUMS => FALSE,
    CrayonSettings::TOOLBAR => TRUE,
    // Enqueue supported only for WP
    CrayonSettings::ENQUEUE_THEMES => FALSE,
    CrayonSettings::ENQUEUE_FONTS => FALSE);
$settings = CrayonSettings::smart_settings($settings);
$crayon->settings($settings);

// Print the Crayon
$crayon_formatted = $crayon->output(TRUE, FALSE);
echo $crayon_formatted;

// Utility Functions

function crayon_print_style($id, $url, $version) {
    echo '',"\n";
}

function crayon_print_script($id, $url, $version) {
    echo '',"\n";
}

function crayon_resources() {
    global $CRAYON_VERSION;
    $plugin_url = 'http://localhost/crayon/wp-content/plugins/crayon-syntax-highlighter/';
    // jQuery only needed once! Don't have two jQuerys, so remove if you've already got one in your header :)
    crayon_print_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', $CRAYON_VERSION);
    crayon_print_style('crayon-style', $plugin_url.CRAYON_STYLE, $CRAYON_VERSION);
    crayon_print_script('crayon_util_js', $plugin_url.CRAYON_JS_UTIL, $CRAYON_VERSION);
    crayon_print_script('crayon-js', $plugin_url.CRAYON_JS, $CRAYON_VERSION);
    crayon_print_script('crayon-jquery-popup', $plugin_url.CRAYON_JQUERY_POPUP, $CRAYON_VERSION);
}

?>

<?php

require_once ('global.php');

require_once (CRAYON_HIGHLIGHTER_PHP);

// These will depend on your framework

CrayonGlobalSettings::site_http('http://localhost/crayon/');

CrayonGlobalSettings::site_path(dirname(__FILE__)); // For WP, this is ABSPATH

CrayonGlobalSettings::plugin_path('http://localhost/crayon/wp-content/plugins/crayon-syntax-highlighter/');

// Should be in the header

crayon_resources();

$crayon = new CrayonHighlighter();

$crayon->code('some code');

$crayon->language('php');

$crayon->title('the title');

$crayon->marked('1-2');

$crayon->is_inline(FALSE);

// Settings

$settings = array(

// Just regular settings

CrayonSettings::NUMS => FALSE,

CrayonSettings::TOOLBAR => TRUE,

// Enqueue supported only for WP

CrayonSettings::ENQUEUE_THEMES => FALSE,

CrayonSettings::ENQUEUE_FONTS => FALSE);

$settings = CrayonSettings::smart_settings($settings);

$crayon->settings($settings);

// Print the Crayon

$crayon_formatted = $crayon->output(TRUE, FALSE);

echo $crayon_formatted;

// Utility Functions

function crayon_print_style($id, $url, $version) {

echo '',"\n";

}

function crayon_print_script($id, $url, $version) {

echo '',"\n";

}

function crayon_resources() {

global $CRAYON_VERSION;

$plugin_url = 'http://localhost/crayon/wp-content/plugins/crayon-syntax-highlighter/';

// jQuery only needed once! Don't have two jQuerys, so remove if you've already got one in your header :)

crayon_print_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', $CRAYON_VERSION);

crayon_print_style('crayon-style', $plugin_url.CRAYON_STYLE, $CRAYON_VERSION);

crayon_print_script('crayon_util_js', $plugin_url.CRAYON_JS_UTIL, $CRAYON_VERSION);

crayon_print_script('crayon-js', $plugin_url.CRAYON_JS, $CRAYON_VERSION);

crayon_print_script('crayon-jquery-popup', $plugin_url.CRAYON_JQUERY_POPUP, $CRAYON_VERSION);

}

Crayon Tag Editor
25 MAR 2012 Crayon, PHP, Projects, WordPress

I’m happy to announce that in 1.9.0, Crayon will feature a built in Tag Editor in both the Visual and HTML editors of WordPress! Normally, you’d have to type the shortcode in HTML editor and make sure you use the right language ID and so forth. Overriding default settings, like changing the theme, font and toolbar settings was more work than necessary. Now these settings are all built into the new user interface.

How It Works

Use on the Visual Editor toolbar, or on the HTML Editor toolbar to open the Tag Editor.
Use the Tag Editor to add code and change settings. Click “Add” to insert the code into the post.
You can edit the generated <pre> tag in both editors. If you’re using the Visual Editor, you can select the code block with your mouse (it will become blue) and click the Tag Editor button again to open the same window and modify both the code and the settings. Then click “Save” when you’re done.

Inline Tags

You can also create and edit Inline Tags by ticking the “Inline Tag” option.

To edit the Inline Tag, once again select the generated <span> with your mouse cursor (it will become green) and click the Tag Editor button.

Overriding Settings

This makes editing code in WordPress super easy, and even more welcoming is the fact you can now override all of Crayons global settings for a single Crayon using the same interface you’re used to in the Settings screen. Any changes you make show up yellow and are automagically added to the code block, and you can then select the code block with your mouse and edit them later

Filter Posts With A Dropdown In WordPress
20 MAR 2012 PHP, WordPress

I made an unusually long answer on StackOverflow, thought I’d share here also. I don’t now about you but Crayon looks prettier to me

Almost 1000 views and not a single comment. Well, I also needed this and decided to make it. I’ve shared the JavaScript and WordPress code below for people in the distant future to use. It looks like a lot, but that’s because I’ve defined some jQuery functions you can use later with .extend. All it’s doing is looking for a select element (a dropdown) with CSS class .content-filter.

Once found, it uses the dropdown’s id to set a GET variable to the value currently selected, then it redirects to this the same URL and adds these GET variables. For example, if the id of the dropdown was product_filter, and this had a value set to date, then it would set the GET variable product_filter=date. It’s great because it doesn’t care about your Wordpess details – all it cares about is the select element.

// A bunch of helper methods for reading GET variables etc from the URL
jQuery.extend({
    urlGetVars : function() {
        var GET = {};
        var tempGET = location.search;
        tempGET = tempGET.replace('?', '').split('&');
        for(var i in tempGET) {
            var someVar = tempGET[i].split('=');
            if (someVar.length == 2) {
                GET[someVar[0]] = someVar[1];
            }
        }
        return GET;
    },
    urlGetVar : function(name) {
        return $.urlGetVars()[name];
    },
    serializeUrlVars : function(obj) {
        var str = [];
        for(var p in obj)
         str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        return str.join("&");
    },
    currentUrl : function() {
        return window.location.href.slice(0,window.location.href.indexOf('?'));
    }
});

// Adds functionality to filter content using a dropdown
var ContentFilter = function ($) {
    $(document).ready(function() {
        // Return to a scroll position if exists
        var scroll = $.urlGetVar('scroll');
        if (typeof scroll != 'undefined') {
            $(window).scrollTop(scroll);
        }
        // Prepare the filter dropdowns
        $('.content-filter').each(function(){
            var me = $(this);
            // e.g. content-filter-product
            var id = me.attr('id');
            // Refresh with selected filter on change
            var refresh = function() {
                var GET = $.urlGetVars();
                GET[id] = me.val();
                // Save scroll position, return to this position on load
                GET['scroll'] = $(window).scrollTop();
                var newVar = $.currentUrl() + '?' + $.serializeUrlVars(GET);
                window.location = newVar;
            };
            me.change(refresh);
        });
    });
}(jQuery);

// A bunch of helper methods for reading GET variables etc from the URL

jQuery.extend({

urlGetVars : function() {

var GET = {};

var tempGET = location.search;

tempGET = tempGET.replace('?', '').split('&');

for(var i in tempGET) {

var someVar = tempGET[i].split('=');

if (someVar.length == 2) {

GET[someVar[0]] = someVar[1];

}

return GET;

urlGetVar : function(name) {

return $.urlGetVars()[name];

serializeUrlVars : function(obj) {

var str = [];

for(var p in obj)

str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));

return str.join("&");

currentUrl : function() {

return window.location.href.slice(0,window.location.href.indexOf('?'));

}

});

// Adds functionality to filter content using a dropdown

var ContentFilter = function ($) {

$(document).ready(function() {

// Return to a scroll position if exists

var scroll = $.urlGetVar('scroll');

if (typeof scroll != 'undefined') {

$(window).scrollTop(scroll);

}

// Prepare the filter dropdowns

$('.content-filter').each(function(){

var me = $(this);

// e.g. content-filter-product

var id = me.attr('id');

// Refresh with selected filter on change

var refresh = function() {

var GET = $.urlGetVars();

GET[id] = me.val();

// Save scroll position, return to this position on load

GET['scroll'] = $(window).scrollTop();

var newVar = $.currentUrl() + '?' + $.serializeUrlVars(GET);

window.location = newVar;

};

me.change(refresh);

});

}(jQuery);

Now the WordPress code. All we really need is to generate the select with some kind of id and set the class to .content-filter. This code asks for a post type like ‘post’ or ‘product’ and makes the select element. It then returns the GET variable for convenience, and if none is set then it defaults to ‘newest’. Notice that the $fields array sets all the different orderby values you’d like to support. You can always access it anywhere in the template with $_GET['product_filter'] or $_GET['post_filter'] depending on what your type is. This means that only one can exist on any given page, but you want that – otherwise jQuery won’t know which to use. You can extend this code to set a custom id or anything you like later.

function ak_content_filter($post_type_id = 'post', &$filter_get_value, $echo = TRUE) {
    $dropdown = '<div class="content-filter-wrapper">';
    // The dropdown filter id for this post type
    $filter_id = $post_type_id.'_filter';
    // The actual dropdown
    $dropdown .= '<label for="'. $filter_id .'">Filter</label><select id="'. $filter_id .'" class="content-filter" name="'. $filter_id .'">';
    // The available ways of filtering, to sort you'd need to set that in the WP_Query later
    $fields = array('date' => 'Newest', 'comment_count' => 'Most Popular', 'rand' => 'Random');
    $filter_get_value = isset($_GET[$filter_id]) ? $_GET[$filter_id] : 'newest'; // default is 'newest'
    foreach ($fields as $field_value=>$field_name) {
        $dropdown .= '<option value="'. $field_value .'" '. selected($field_value, $filter_get_value, FALSE) .'>'. $field_name .'</option>';
    }
    $dropdown .= '</select></div>';
    // Print or return
    if ($echo) {
        echo $dropdown;
    } else {
        return $dropdown;
    }
}

function ak_content_filter($post_type_id = 'post', &$filter_get_value, $echo = TRUE) {

$dropdown = '<div class="content-filter-wrapper">';

// The dropdown filter id for this post type

$filter_id = $post_type_id.'_filter';

// The actual dropdown

$dropdown .= '<label for="'. $filter_id .'">Filter</label><select id="'. $filter_id .'" class="content-filter" name="'. $filter_id .'">';

// The available ways of filtering, to sort you'd need to set that in the WP_Query later

$fields = array('date' => 'Newest', 'comment_count' => 'Most Popular', 'rand' => 'Random');

$filter_get_value = isset($_GET[$filter_id]) ? $_GET[$filter_id] : 'newest'; // default is 'newest'

foreach ($fields as $field_value=>$field_name) {

$dropdown .= '<option value="'. $field_value .'" '. selected($field_value, $filter_get_value, FALSE) .'>'. $field_name .'</option>';

}

$dropdown .= '</select></div>';

// Print or return

if ($echo) {

echo $dropdown;

} else {

return $dropdown;

}

Now the fun part – putting it together in the content page. All our work pays off with some sweet and short code:

// This will fill $product_filter with $_GET['product_filter'] or 'newest' if it doesn't exist
ak_content_filter('product', $product_filter);
$args = array('post_type' => 'product', 'orderby' => $product_filter);
// This is just an example, you can use get_pages or whatever supports orderby
$loop = new WP_Query( $args );

// OR, to avoid printing:
$dropdown = ak_content_filter('product', $product_filter, FALSE);
// ... some code ...
echo $dropdown;

// This will fill $product_filter with $_GET['product_filter'] or 'newest' if it doesn't exist

ak_content_filter('product', $product_filter);

$args = array('post_type' => 'product', 'orderby' => $product_filter);

// This is just an example, you can use get_pages or whatever supports orderby

$loop = new WP_Query( $args );

// OR, to avoid printing:

$dropdown = ak_content_filter('product', $product_filter, FALSE);

// ... some code ...

echo $dropdown;

I used the custom post type ‘product’, but if you’re using ‘post’ just replace that. Someone should probably make this into a plugin if they haven’t already

Word Limiting With Regular Expressions
20 MAR 2012 PHP, Random

Here’s my take on limiting words in a paragraph.

^\s*((?:\S+\s*){0,20})(.*)

That’ll capture the first 20 words and also the rest of the string. Then, you can replace the entire capture with the first capture group (the first 20 words). In PHP:

function ak_limit_words($str, $word_limit) {
    return preg_replace('#^\s*((?:\S+\s*){0,'.$word_limit.'})(.*)#msi', '$1', $str);
}

// Output: 'this is the '
ak_limit_words('this is the sentence...', 3);

function ak_limit_words($str, $word_limit) {

return preg_replace('#^\s*((?:\S+\s*){0,'.$word_limit.'})(.*)#msi', '$1', $str);

}

// Output: 'this is the '

ak_limit_words('this is the sentence...', 3);

Removing Unfinished Sentences From Paragraphs
19 MAR 2012 PHP, Random

These are helpful after you strip a paragraph for a word limit and want to cut off the last incomplete sentence.

// Remove the last unfinished sentence in a paragraph if it contains $min_word_count or less words
function remove_unfinished_sentence($paragraph, $min_word_count = 3, $replace = '.') {
    $min_word_count = $min_word_count > 1 ? $min_word_count : 1;
    return preg_replace('#(\.\s*([^\s\.]+\s+){0,'.($min_word_count-1).'}([^\s\.]+\s*))$#ms', $replace, $paragraph);
}

// Remove the last unfinished sentence in a paragraph if it contains $min_word_count or less words

function remove_unfinished_sentence($paragraph, $min_word_count = 3, $replace = '.') {

$min_word_count = $min_word_count > 1 ? $min_word_count : 1;

return preg_replace('#(\.\s*([^\s\.]+\s+){0,'.($min_word_count-1).'}([^\s\.]+\s*))$#ms', $replace, $paragraph);

}

Of course, if you want to completely remove the last sentence, this will suffice:

// Remove the last sentence in a paragraph
function remove_last_sentence($paragraph, $replace = '.') {
    return preg_replace('#\.\s*[^\.]+$#ms', $replace, $paragraph);
}
// Output: This is some stuff.
remove_last_sentence('This is some stuff. Blah Blah ');

// Remove the last sentence in a paragraph

function remove_last_sentence($paragraph, $replace = '.') {

return preg_replace('#\.\s*[^\.]+$#ms', $replace, $paragraph);

}

// Output: This is some stuff.

remove_last_sentence('This is some stuff. Blah Blah ');