soderlind.no

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;
}

WordPress plugin: Remove “Comments are closed”

PerS — Wed, 11 Jan 2012 03:55:59 +0000

On posts where comments are closed, the plugin will remove the text ‘Comments are closed.’ The plugin supports any languages/text domains, and will remove the text from themes and plugins.

Prerequisite: Since the plugin is filtering gettext, your theme/plugin must be localized.

The plugin is available in the WordPress plugin directory

Plugin source code:

Changelog:

1.2 removed unnecessary code
1.1 initial public release

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”.

WordPress and WebPutty

PerS — Mon, 19 Dec 2011 22:24:53 +0000

I’ve written a simple plugin that allows you to modify your WordPress sites using WebPutty.

So what’s WebPutty?

WebPutty is a simple CSS editing and hosting service.
WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control.

There’s a video at YouTube

Integration:
In WordPress, add the WebPutty integration code to your theme, or add it using my plugin. The integration code looks like:

Plugin installtion and activation:

The plugin is available in the WordPress Plugin Directory
Install and activate it.
Go to Settings -> WebPutty Helper and add the integration code from WebPutty (see images below)

Integrating WebPutty and WordPress using my plugin:

Change log:
0.0.1: Initial version

Todo:

Add option to remove local styles
Anything else? Please add your wishes as a comment below

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