Styling different pages in WordPress is a relatively easy process if you make use of the default body classes that are made available to you, especially the unique page ID class “page-id-123“.
The problem with using the ID class to identify an individual page is that a page ID can quite easily change when working with a development version or even migrating your blog from one install to another. Continue reading “WordPress append page slug to body class”
When inserting images into post or page content WordPress automatically adds three class name to the image tag along with the other attributes, these are the alignment (alignnone), size (size-full) and the attachment id (wp-image-123).
If you need to add additional class names to the defaults without having to manually add them every time you insert a new image, you can make use of either the get_image_tag_class or get_image_tag filters. Continue reading “WordPress append image dimensions as class names”
Whilst designing a new layout for one of my current projects, I wanted to be able to provide the end user with the ability to quickly scan over a series of statistics.
The main page should act as overview of everything that is going on, therefore I wanted to avoid overcrowding it with lots of large graphs and instead simply show the basic trends.
A few months back I came across an implementation of Sparklines – data-intense, design-simple, word-sized graphics – which are often used to demonstrate stock market activity in a simple visual graphic.
I was just going to use a pre-made script from the many already available, but instead decided to knock one up myself and created a small PHP Class to generate and output a sparkline image using the GD Library.
To create a sparkline I can now simply include the class and then initiate it in a variation of the following:
$sparkline = new Sparkline(); $sparkline->data = Array(3,38,2,8, ... ,38,13,4,23); $sparkline->output(); // Display image
This PNG image is generated and output to the browser:
A number of other setup options are available to customise the output further:
$sparkline->bg = '#000000'; // Background colour
$sparkline->width = 150;
$sparkline->height = 50;
$sparkline->line = '#336699'; // Line colour
$sparkline->points = '#333333'; // Start & end points
$sparkline->thickness = 2; // Line thickness
$sparkline->scale = 5; // Anti-aliasing scale size
$sparkline->output('saved/test.png', true); // Save to location and display
All colours must be provided in hexadecimal format and if you are attempting to save the image the destination location must be writeable by Apache.
The Sparkline PHP Class source code is available for anyone to use as they may like, although I must confess it hasn’t been fully tested as yet!
Stv.Whtly 