soderlind.no » general

Adding WP-PageNavi to the Yoko theme

PerS — Tue, 31 Jan 2012 15:13:51 +0000

I’m using the Yoko theme and WP-PageNavi here at soderlind.no

Yoko is a modern three-column blog theme. A responsive layout optimizes the theme for mobile devices like tablet pcs and modern smartphones (the layout switches to a two- or one-column layout depending on the screen size the theme is viewed on).

Here’s how I added WP-PageNavi:

Downloaded WP-PageNavi from the WordPress plugin directory
From the Yoko theme folder, copied author.php, category.php, index.php, search.php and tag.php to my Yoko child theme folder and added wp_pagenavi(); to each file. I replaced
```
	← Older posts', 'yoko' ) ); ?>
	→', 'yoko' ) ); ?>
```
with
```
	
```

Configured WP-PageNavi (in Settings -> PageNavi)

Page Navigation Text

Text For Number Of Pages:    
Text For Current Page:       %PAGE_NUMBER%
Text For Page:               %PAGE_NUMBER%
Text For First Page:         1
Text For Last Page:          %TOTAL_PAGES%
Text For Previous Page:	     «
Text For Next Page:	     »
Text For Previous:           ...
Text For Next:               ...	

Page Navigation Options

Use pagenavi-css.css:        unchecked
Page Navigation Style:       Normal
Always Show Page Navigation: checked
Number Of Pages To Show:     5
Number Of Larger Page
Numbers To Show:             0
Show Larger Page Numbers
In Multiples Of:             10

Added the following to the style.css in my Yoko child theme folder:

.wp-pagenavi {
	clear: both;
	text-align:center;
	height:30px;
	padding-left: 22.507%;
}

@media screen and (max-width : 620px) {
	.wp-pagenavi {
		padding-left: 0;
	}
}

.wp-pagenavi a, .wp-pagenavi span, #pagenavi .page {
    border: 1px solid #BFBFBF;
    margin: 2px;
    padding: 3px 5px;
    text-decoration: none;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #000000;
}
.wp-pagenavi span.current {
    font-weight: bold;
}

Adding custom headers to the WordPress plugin directory

PerS — Tue, 10 Jan 2012 20:34:57 +0000

As an experiment, Matt has turned on custom headers for the plugin directory.

How to add a custom header:

Make a 772×250 pixel jpeg or png

In the plugin root directory, create a new directory “assets”:

mkdir assets

After you’ve created the assets directory, you should have the following directories in the plugin root:

$ ls -l
total 0
drwxr-xr-x  4 per  _www  136 Jan 11 22:19 assets
drwxr-xr-x  3 per  _www  102 Jan 11 19:57 branches
drwxr-xr-x  3 per  _www  102 Jan 11 19:57 tags
drwxr-xr-x  5 per  _www  170 Jan 11 19:59 trunk

Copy the 772×250 pixel jpeg or png to the assets directory:
```
cp my-custom-plugin-header.png assets/banner-772x250.png
```
Add the assets directory to svn:
```
svn add assets
```
Check it in:
```
svn ci -m 'Adding custom header'
```

I’ve added a custom header to four of my plugins, please have a look: lorem shortcode, WebPutty Helper, WP-DenyHost and Remove “Comments are closed”.

Modernizr 101

PerS — Thu, 24 Nov 2011 20:31:51 +0000

.. or, why I like it.

When developing for the web, I’ve always been a fan of checking for functionality using object detection, I NEVER try to detect which browser you are using.

Modernizr does this much better that the other methods I’ve seen (and used).

Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications.

It tests for over 40 next-generation features, all in a matter of milliseconds

It creates a JavaScript object (named Modernizr) that contains the results of these tests as boolean properties

It adds classes to the html element that explain precisely what features are and are not natively supported

It provides a script loader so you can pull in polyfills to backfill functionality in old browsers

As stated above, Modernizr adds classes to the HTML tag, one per feature, pre-fixing the one that’s not supported in the browser with “no-”. This is the classes added to the HTML tag when I open a page in;

Chrome 17.0.942.0 dev:

 class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

Firefox 8.0.1:

 class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase no-indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

Safari 5.1.1 (7534.51.22):

 class="js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio no-localstorage no-sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

IE9

 class="ie ie9 js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

Lot’s of red for IE9, but this is not a “which brower is best” article, but how you can use Modernizr to give the user the experience expected which ever browser she is using today or tomorrow. Eg:

.no-cssgradients .glossy { // Internet Explorer
    background: url("images/glossybutton.png");
}

.cssgradients .glossy {
    background-image: linear-gradient(top, #555, #333);
}

You can also use Modernizr to load the JavaScript libraries needed:

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

A bit more advanced example

// Give Modernizr.load a string, an object, or an array of strings and objects
Modernizr.load([
  // Presentational polyfills
  {
    // Logical list of things we would normally need
    test : Modernizr.fontface && Modernizr.canvas && Modernizr.cssgradients,
    // Modernizr.load loads css and javascript by default
    nope : ['presentational-polyfill.js', 'presentational.css']
  },
  // Functional polyfills
  {
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // You can also give arrays of resources to load.
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Run this after everything in this group has downloaded
      // and executed, as well everything in all previous groups
      myApp.init();
    }
  },
  // Run your analytics after you've already kicked off all the rest
  // of your app.
  'post-analytics.js'
]);

Finally, to learn more about Modernizr and the philosophy behind it, you should watch this presentation by Faruk Ates, the creator of Modernizr:

Click here to view the embedded video.

Resources:

Modernizr Documentation
A List Apart: Taking Advantage of HTML5 and CSS3 with Modernizr
Web Designer Notebook: How to use Modernizr

Front-end editor in WordPress 3.3 is easy

PerS — Sun, 25 Sep 2011 10:47:31 +0000

Thanks to the work done by Andrew Ozz et al., adding a front-end editor in WordPress 3.3 is very simple.

Syntax:

wp_editor( $content, $editor_id, $settings = array() );

// default settings
$settings =   array(
	'wpautop' => true, // use wpautop?
	'media_buttons' => true, // show insert/upload button(s)
	'textarea_name' => $editor_id, // set the textarea name to something different, square brackets [] can be used here
	'textarea_rows' => get_option('default_post_edit_rows', 10), // rows="..."
	'tabindex' => '',
	'editor_css' => '', // intended for extra styles for both visual and HTML editors buttons, needs to include the

radial navigation in html5

PerS — Thu, 25 Mar 2010 18:00:41 +0000

Sorry no IE (might work in IE9 platform preview), so open these in a modern browser:

WordPress plugin template

PerS — Thu, 04 Mar 2010 10:21:45 +0000

UPDATE: As of WordPress 3.3, you shouldn’t use the wp_print_styles hook, I’ve updated the Adding JavaScript section below to reflect this change.

You can create a personalized plugin template by using my WordPress Plugin Template Creator

When I rewrote my WP-DenyHost plugin, I wanted to do it as fast as possible. Instead of reinventing the wheel (again), I googled after a plugin template and found a very good one at Pressography. It had most of what I needed in a plugin template.

Modifications to the Pressography plugin template

I’ve made some changes to the Pressography plugin template and I have explained them below. Before you continue to read this article, you should view the video at Pressography, it presents the idea behind the plugin template and how it works. You get the full source of my modified plugin template by using my WordPress Plugin Template Creator

Being able to use new functionality in WordPress, I’ve decided that my plugins will only support WordPress one minor version lower than the current i.e. the current is 2.9 and hence my plugins and this plugin template will only supports WordPress 2.8 and later.

plugins_url()

WordPress 2.8 extended the plugins_url() function which makes it easy to find the plugin location. In the plugin template constructor, I use plugins_url() to find the languages files and the plugin itself:

function __construct(){
	//Language Setup
	$locale = get_locale();
	$mo = plugins_url("/languages/" . $this->localizationDomain . "-".$locale.".mo", __FILE__);
	load_textdomain($this->localizationDomain, $mo);

	//"Constants" setup
	$this->url = plugins_url(basename(__FILE__), __FILE__);
	$this->urlpath = plugins_url('', __FILE__);

	//Initialize the options
	$this->getOptions();

	//Actions
	add_action("admin_menu", array(&$this,"admin_menu_link"));
	add_action('admin_enqueue_scripts', array(&$this,'{plugin_slug}_script')); // or wp_enqueue_scripts or login_enqueue_scripts
	add_action("init", array(&$this,"{plugin_slug}_init"));
}

Adding JavaScript

I’ve done it and I still see plugin authors adding scripts using the wp_head function. There’s only one correct way of adding scripts, and that’s using wp_enqueue_script via one of the script hooks (~~admin_print_scripts, wp_print_scripts~~ wp_enqueue_scripts, login_enqueue_scripts and admin_enqueue_scripts). wp_enqueue_script makes sure that the script loads in the correct order and that a script is only loaded once (e.g. If another plugin has already loaded jQuery, my plugin will not load jQuery, but use the script already loaded).

I’ve added the ~~wp_print_scripts~~ admin_enqueue_scripts hook to the plugin template (see the constructor above). Use the wp_enqueue_scripts or login_enqueue_scripts if you want to load the script on the front-end or login page. The ~~wp_print_scripts~~ admin_enqueue_scripts hook adds the {plugin_slug}_script function in which I enqueue the scripts:

function {plugin_slug}_script() {
	wp_enqueue_script('jquery'); // other scripts included with WordPress: http://tinyurl.com/y875age
	wp_enqueue_script('jquery-validate', 'http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js', array('jquery'));
	wp_enqueue_script('{plugin_slug}_script', $this->url.'?{plugin_slug}_javascript', array('jquery-validate')); // load embedded javascript
	wp_localize_script( '{plugin_slug}_script', '{plugin_slug}_lang', array(
		'required' => __('Please enter a number.', $this->localizationDomain),
		'number'   => __('Please enter a number.', $this->localizationDomain),
		'min'	   => __('Please enter a value greater than or equal to 1.', $this->localizationDomain),
	));
}

wp_localize_script, in the code above, creates a JavaScript object that passes the language strings to the embedded JavaScript:

Embedding JavaScript

When I write my plugins I like to keep the code in one file, that’s why I also embed the JavaScript code:

if (isset($_GET['{plugin_slug}_javascript'])) {

	Header("content-type: application/x-javascript");
	echo<<
Note: If you prefer to keep your JavaScript code in a separate file, you can add it by adding the following to {plugin_slug}_script:
function {plugin_slug}_script() {
	if (is_admin()){ // Only run when in wp-admin. Other conditional tags at http://codex.wordpress.org/Conditional_Tags
		wp_enqueue_script('jquery'); // other scripts included with WordPress: http://tinyurl.com/y875age
		wp_enqueue_script('jquery-validate', 'http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js', array('jquery'));
		wp_enqueue_script('{plugin_slug}_script', $this->urlpath.'/myscript.js', array('jquery)); //load your script
		wp_localize_script( '{plugin_slug}_script', '{plugin_slug}_lang', array(
			'required' => __('Please enter a number.', $this->localizationDomain),
			'number'   => __('Please enter a number.', $this->localizationDomain),
			'min'	   => __('Please enter a value greater than or equal to 1.', $this->localizationDomain),
		));
	}
}

WordPress Plugin Template Creator
While writing this article, I decided to create a tool that will create a personalized plugin template. The WordPress Plugin Template Creator takes your input, creates the necessary slugs and returns a personalized plugin template you can build your own plugin with.

When .LESS is more

PerS — Wed, 03 Mar 2010 22:01:06 +0000

@the-border: 1px;
@base-color: #111;

#header {
	color: @base-color * 3;
	border-left: @the-border;
	border-right: @the-border * 2;
}

#footer {
	color: (@base-color + #111) * 1.5;
}

ul
{
	list-style-type: none;
	height: 30px;

	li
	{
		float: left;
		padding-right: 15px;

		a
		{
			padding: 5px;
			display: block;
			color: black;
			text-decoration: none;
		}

		a:hover
		{
			background-color: @menu_color - #222;
		}
	}
}

Curious? 4GuysFromRolla has a nice article about .LESS

btw, if you’re not doing ASP.NET, you can create css from .less by using the command line compiler:

dotless.Compiler.exe -m Styles.less Styles.css

jQuery 101: Adding unobtrusive ajax to your existing form page

PerS — Thu, 25 Feb 2010 17:50:48 +0000

Using jQuery and the form and validate plugins, it is simple to add unobtrusive ajax to your existing form page

1, Modify your existing form page

Add to your form. This field will tell the processing script, process_input.php in my example, if the values in the form were submitted using ajax or as an ordinary form submit, defaulting to isAjax = 0 (false).
Add class="required" to the fields that requires input
Add the where you want the ajax output


	
	Name:

2, update your process_input.php code

The process_input.php, uses the value in isAjax to decide how output is displayed

Welcome";
	echo $_POST['name'];
}
?>

3, Add the jQuery code

Here’s the complete form page










	
	Name: