Author Archive

Random Redirection In WordPress


  

If you run an online magazine, most of your readers will never go through your archive, even if you design a neat archive page. It’s not you; it’s just that going through archives is not very popular these days. So, how do you actually make readers dig in without forcing them? How do you invite them to (re)read in a way that’s not boring? How do you make your WordPress magazine more interactive?

Have you tried random redirection?

Call it recycling if you like, but random redirection doesn’t have to be about retreading familiar territory. Through random redirection, you offer readers a chance to hop randomly through your posts and discover content that they somehow missed.

The concept really is simple. All you have to do is create a hyperlink — named, say, “Random articleâ€� — that when clicked will redirect the reader to a randomly pulled article.

WordPress supports random redirection out of the box, but it’s not very obvious. All of the required functions are in the core, but they’re not bound in any common workflow. For instance, generating a “Random article� link in the main menu simply by checking a box in the administration section is not possible.

To implement random redirection in WordPress, you will usually need to work with the following three things:

  • A page to process the redirection,
  • A query to pick a post from the database,
  • Some sort of mechanism to initiate the redirection.

Of course, many of you might want to use a plugin. That’s absolutely fine, as long as you don’t need any more features than what it offers.

You would probably come across Matt Mullenweg’s Random Redirect plugin first. Then you would probably try Random Redirect 2, which expands on that.

Instead, today I’ll guide you through a custom implementation that I use. It’s not the “right� way to implement random redirection; it’s just one plugin-less solution to start with and build on.

We’ll be working with the three things mentioned in the list further up. Let’s go into the concept in detail.

The Simple Solution

We’ll be implementing random redirection through a WordPress page, which we’ll simply call “Random.� Creating this new page in the admin section will be the last step we take, though. Why? Because we don’t want to make the redirection page accessible before it’s been fully implemented.

According to the WordPress template hierarchy, if you create a page template file named page-random.php, whenever a user loads the page assigned to the slug random, it will load through the page-random.php template. This is a well-known benefit of WordPress and is also useful for our random redirection.

The page-random.php page template will not include the usual calls for loading the header, sidebar and footer templates, because our “Random� page won’t generate any visible output for the user; it will simply jump (that is, redirect) to a randomly chosen article. Because we need to make only one request from the database (to select one random article to redirect to), we will make only one call to the get_posts() function in the template, and we’ll use a foreach loop to process the output.

The get_posts() function receives only two arguments as its input, with which we’re specifying that we want to fetch only one post randomly. The orderby argument set to rand is what enables randomization in WordPress. We don’t need to specify the post_type because it’s already set to post by default for get_posts(). We also don’t need to specify the post_status because it defaults to publish, which is exactly what we need.

// source code from page-random.php

// Random Redirection Page Template

// set arguments for get_posts()
$args = array(
    'numberposts' => 1,
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = get_posts ( $args );

// process the database request through a foreach loop
foreach ( $my_random_post as $post ) {
  // redirect the user to the random post
  wp_redirect ( get_permalink ( $post->ID ) );
  exit;
}

So, we first save the data from get_posts() into a variable and then process it through the foreach loop. The magic happens in the foreach loop, when the redirection is initiated through the wp_redirect() function, which has the post’s permalink as its input.

random-redirection-wordpress-add-random-page
Creating a “Random� page through WordPress’ administration interface

Now the only thing we need to do is go to WordPress’s administration section, create a blank new page with the slug random, and publish it. Then, when you visit http://www.mywebsite.com/random/, you will be automatically redirected to a random article.

random-redirection-wordpress-add-random-page-main-menu
Adding a link to the “Random� page in the main menu.

We can now add a link in the main menu to make the page easily accessible.

Using WP_Query Instead

The implementation above can easily be adapted to directly use the WP_Query class, instead of the get_posts() function.

// source code from page-random.php implemented through WP_Query

// Random Redirection Page Template

// set arguments for WP_Query()
$args = array(
    'posts_per_page' => 1,
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}

The main benefit of using WP_Query is that it can accept more arguments than the get_posts() function, thus offering more flexibility when you’re building specific queries.

A Few More Examples

With both get_posts() and WP_Query, we can be very specific and implement random redirection for posts of custom types or posts that belong to particular categories.

For example, we could make WordPress redirect to articles published only in the “Travel� category:

// set arguments for WP_Query()
$args = array(
    'category_name' => 'travel', // remember, we are using category slug here
    'posts_per_page' => 1,
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}

Or we could redirect to posts from all categories except “Uncategorized�:

// set arguments for WP_Query()
$args = array(
    'category__not_in' => array(1), // id of the category to be excluded
    'posts_per_page' => 1,
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}

How about limiting randomization to posts published in 2011?

// set arguments for WP_Query()
$args = array(
    'posts_per_page' => 1,
    'year' => '2011',
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}

Maybe even add filtering by custom field? Let’s limit random redirection to posts that have a custom field with the value strawberry assigned.

// set arguments for WP_Query()
$args = array(
    'posts_per_page' => 1,
    'meta_value' => 'strawberry',
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}

The example above could easily be transformed to limit random redirection to posts that have the custom field long_description assigned. Remember, our only condition here is for the post to have the custom field assigned. It doesn’t matter what the value of the long_description custom field is.

// set arguments for WP_Query()
$args = array(
    'posts_per_page' => 1,
    'meta_key' => 'long_description',
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}

Instead of posts, we could also implement random redirection for pages:

// set arguments for WP_Query()
$args = array(
    'post_type' => 'page',
    'posts_per_page' => 1,
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}

We could even create random redirection for custom post types:

// set arguments for WP_Query()
$args = array(
    'post_type' => 'my-custom-post-type',
    'posts_per_page' => 1,
    'orderby' => 'rand'
);

// get a random post from the database
$my_random_post = new WP_Query ( $args );

// process the database request through WP_Query
while ( $my_random_post->have_posts () ) {
  $my_random_post->the_post ();
  // redirect the user to the random post
  wp_redirect ( get_permalink () );
  exit;
}

As you can see from these examples, we can add a random redirection link to a WordPress website with just a few lines of code. Nothing complicated, nothing too advanced.

random-redirection-wordpress-wikipedia-wikihow

If random redirection still doesn’t make sense to you, hop on over to Wikipedia and WikiHow and see how their links to random articles work.

Play The Randomization Game!

Now that you know how easy implementing a random redirection page in WordPress is, you can start planning for your own random output.

All in all, it’s a great feature. Every online magazine should have it. It requires only a single click per request; it’s unpredictable, it’s fun, and it will be useful to your readers.

Further Reading

(al)


© Goce Mitevski for Smashing Magazine, 2012.


Creating Graphs With Adobe Illustrator

Smashing-magazine-advertisement in Creating Graphs With Adobe IllustratorSpacer in Creating Graphs With Adobe Illustrator
 in Creating Graphs With Adobe Illustrator  in Creating Graphs With Adobe Illustrator  in Creating Graphs With Adobe Illustrator

Office applications are getting very advanced these days offering all sorts of fancy features for data visualization. Graph generation is a standard feature in desktop applications like Microsoft Excel or OpenOffice.org Calc, but it can also be achieved in non-spreadsheet applications like Adobe Illustrator.

If you’re unfamiliar with the process of creating graphs in Adobe Illustrator, this article will help in giving you some insight into the work-flow. It might also help you decide whether Illustrator is the right tool for this kind of assignment.

[Offtopic: by the way, did you know that we are publishing a Smashing eBook Series? The brand new eBook #3 is Mastering Photoshop For Web Design, written by our Photoshop-expert Thomas Giannattasio.]

What Type of Graphs Can You Create in Illustrator?

Adobe Illustrator offers 9 graph types to visualize data. You can choose from the following:

  • Column Graph
  • Stacked Column Graph
  • Bar Graph
  • Stacked Bar Graph
  • Line Graph
  • Area Graph
  • Scatter Graph
  • Pie Graph
  • Radar Graph

There is also the possibility for making combinations from the existing graph types to achieve greater diversity. The only graph type that can’t be combined is the scatter graph.

Creating graphs in Illustrator is as simple as selecting the Graph Tool (from the Tools panel), clicking on your Artboard and dragging and thus forming the area size of the graph. It is also possible to type in the width and height of the graph, which is useful if you want to create graphs with specific dimensions. If you decide to type in the dimensions of the graph, you should bear in mind that those dimensions are applied to the whole graph object (including labels, legend and x, y values), not just the graph chart.

Once you create this graph size and shape you will see that it’s available as a single element (layer) in the Layers panel, usually with the name <Graph>. This might seem confusing at first but you’ll get used to it very quickly.

The Two Faces of Illustrator Graph Functionality

Creating graphs in Adobe Illustrator is generally a straightforward task but once you get into advanced techniques of graph design, functionality can get quite annoying. You’ll be surprised to discover that basic tasks like scaling and aligning are not instantly applicable on graphs.

Face 1 (Graphs as Objects)

The reason for the initial exceptional lack of functionality of the graph objects in Illustrator is that they are quite simply, ‘objects’. That is to say, they are special groups of sub-elements that have a limited number of attributes the user can control. Graph objects are less flexible than usual Illustrator layers, layer elements and groups of layer elements.

Graph-layers in Creating Graphs With Adobe Illustrator

Here are most of the limitations of Adobe Illustrator’s graph creation functionality that are instantly noticeable:

  • Transform panel is not available for graph objects.
  • No transform controls are available for selected graph objects, thus no instant scaling or rotation is possible.
  • Graph objects cannot be aligned to other objects nor can other objects be aligned to them.
  • Two or more graph objects cannot be grouped.
  • It’s not possible to create a clipping mask from a graph object.
  • A graph object cannot be transformed into a symbol.

Maybe it’s not really wise to initially dig for limitations, as you may get the impression that you’re left with very few things that you can actually do to graphs in Illustrator. Of course, that’s the wrong impression. As noted, creating graphs in Adobe Illustrator is generally a straightforward task.

But through knowing the limitations of your tool can actually help you plan early and work smarter.

Face 2 (working with sub-elements of the Graph Object)

Illustrator Graphs have sub-elements. The sub-elements are the brightest aspect of the graph creation process in Adobe Illustrator. They are flexible and you can do all sorts of modifications to them. From repositioning, scaling, mirroring, adjusting opacity and offsetting paths to applying special effects like brush strokes, glowing edges, pixelation etc. Sub-elements are your true friends as long as you don’t make further changes in the graph data!

The appearance of the following sub-elements can be modified:

  • lines
  • labels
  • data points
  • graph legends
  • graph shadows
  • value axises
  • columns
  • pieces of pie graphs

However, if you make a change in the graph data, you instantly loose the control over the sub-elements’ appearance and reset it to the bare minimum – fill + stroke. Actually, you reset the appearance of sub-elements with any action that causes the graph object to regenerate. That’s why, as even Adobe advises, the sub-elements in graphs should always be styled as the final design process of a graph.

What about ungrouping Illustrator graphs?

Is it possible? Absolutely. As long as you’re aware that ungrouping graphs removes the possibility of further changes in the graph data. Having this firmly in mind, it is only useful to ungroup a graph object once you’re sure that you won’t have to revisit its “Graph Dataâ€�, “Graph Typeâ€� or “Graph Designâ€� windows.

Graph ungrouping means simultaneously an increase AND a decrease in flexibility.

Ungrouping-graphs in Creating Graphs With Adobe Illustrator

Ungrouping the Graph Object means an increase in flexibility because it makes all graph sub-elements behave like usual Illustrator layers, thus unleashing the full power of layer editing in Illustrator.

It is at the same time a decrease in flexibility because it’s a one-way road. After the ungrouping, the graph object turns into a group of layer elements (as funny as this sounds), and looses its touch with the special graph creation functionalities.

So, it’s wise to use Adobe Illustrator for designing graphs one step at a time. First prepare graph data, than design the graph. This might seem too obvious, but it’s very, very easy to get carried away in the creative process, forgetting about the two faces (before and after ungrouping) of the graph object. I know, as I have made this mistake several times.

What if you want to modify several graphs at once?

That’s a very legitimate question and it deserves a decent answer.

You most certainly can select several graph objects at once, and apply various effects and transformations to them. With the help of the Group Selection tool, you can even select sub-elements from different graph objects and style them as you wish. Besides other things, you can also change the Graph Type of multiple graph objects at once.

Unfortunately, what you can’t do is change graph data on more than one graph object at once. It’s impossible and it’s a shame. Instead of being able to change the data of 50 various graphs in an instance, you will need to do 50 separate changes (and waste valuable time).

How do Graphs Perform in Legacy Illustrator Formats?

Graphs-in-legacy-formats in Creating Graphs With Adobe Illustrator

Every incremental release of Adobe Illustrator offers options for saving working files in legacy formats. This way you can ensure that your designs will work in older versions of Adobe Illustrator.

However, even though the possibility is there, the practical value of this Illustrator feature, for graphs, is minimal.

A personal example

While preparing the final release of “The Graphs2â€�, saving to legacy formats added extra “featuresâ€� to my designs. For example, while working on a legacy AI file, after editing the graph data on a randomly chosen graph object, the graph object repositioned itself to false coordinates, and made the design appear to be broken. After testing this on other graph objects, I figured that it was a rule and not an exception. I wasn’t able to get rid of this “featureâ€� until I decided to minimize the backwards compatibility of my designs and save into Illustrator CS4 format.

Adobe does warn about the consequences of saving in legacy formats, but this is certainly a feature for Illustrator Graphs that could be improved.

What Could Adobe Improve in its Illustrator Graphs Functionality?

It would be really nice not to have to worry about loosing touch with the graph data after graph ungrouping. Why do graph objects have to be limited? In fact, why do graphs need to be generated in the form of objects? Why not serve them in the usual way – as a group of separate layers?

Perhaps Adobe should spend more time modularizing the graph creation functionality and serve them throughout the whole Creative Suite. Data visualization is important and shouldn’t be treated as a gray zone, as a pending process in the development of the Creative Suite, especially not in the development of Adobe Illustrator.

Some ‘would be nice to have’ stuff for Illustrator graphs

In terms of flexibility and accessibility, Adobe Illustrator’s graph creation functionalities are not polished at all. The main features are very obvious, but a lot of small pieces are missing for a rock solid graph creation module.

  • Axes: Though it might be illogical for some, why isn’t there an option for generating graphs without value axes? Hiding them manually takes additional time and it’s specially annoying if you need to use the “Show Allâ€� option for hidden layers, while trying to exclude the value axes from reappearing. An extra option that will allow hiding and showing of value axes is needed in the “Graph Typeâ€� window.

No-soft-shadows-for-graphs in Creating Graphs With Adobe Illustrator

  • Shadows: Why would you implement a shadow sub-element for graph objects if you don’t provide proper options to control its appearance? And, who needs rough shadows these days when ray-tracing has spoiled us like children? We need realistic shadows for graph objects in Illustrator. We need to be able to control the light angle, the dens and the opacity of the shadow, the level of softness. We need all things that you normally get when applying a “Drop Shadowâ€� layer style on a Photoshop layer. While saying this, there are manual ways of getting smooth graph shadows, like applying “Drop Shadowâ€� effect on sub-elements or applying “Featherâ€� effect on the default graph shadow sub-element.
  • Inter-object styling: What’s the point of providing styling options for graph sub-elements, when there’s no freedom in choosing when to apply them. The appearance reset for graph sub-elements has to go away! Data has to be separated from presentation. We need to be able to make unlimited changes to graph data regardless of the appearance of the graph object or its sub-elements. We need to be able to change things whenever we feel like we want to, not necessarily last.

Summary of Illustrator Graph Features

Here is a summary of the most important features of graphs in Adobe Illustrator.

  • Graphs are special groups of sub-elements and have a limited number of attributes you can control.
  • You can create 9 main types of graphs in Adobe Illustrator.
  • You can import graph data from external files.
  • You can copy and paste data from spreadsheet applications into graphs in Illustrator. You need to paste the data into Object → Graph → Data window for this to work.

Paste-data-from-spreadsheet-apps in Creating Graphs With Adobe Illustrator

  • If you ungroup a graph you cannot make changes to its data.
  • You can apply all sorts of effects to the sub-elements of a graph and not so much to the graph object itself.
  • Graphs and symbols do not get along quite well. A graph object cannot be converted into a symbol. However, there is an option for importing symbols into graph designs.
  • It is possible to create graphs with custom designs (by including images and symbols), but we won’t explore this in detail in this feature. Maybe you can write a great article on this topic?
  • You can copy and paste charts from Microsoft Excel or OpenOffice.org Calc into Illustrator.
  • Illustrator offers excellent support for exporting graphs in SVG file format. Graph data remains editable in Illustrator, for SVG files created with Illustrator.
  • If you require advanced graph creation features, make friends with spreadsheet applications in famous Office suites.

Save some time along the way!

Here are a few quick tips (shortcuts) that might come in handy for beginners or may act as a reminder for advanced Illustrator users. These are all obvious things that will help you from wandering aimlessly around Illustrator menus and the workspace.

  • Instead of going to Object → Graphs → Data…, anytime you need to access the data of a specific graph, select the graph object and double click the Column Graph Tool icon from the Tools panel. Or, you can achieve the same by selecting the graph object, choosing “Jâ€� from the keyboard and then pressing the “Enterâ€� key.
  • Right click a graph and you will find another quick way to access specific options for graph objects, including:
    • Type…
    • Data…
    • Design…
    • Column…
    • Marker…

    Quickly-edit-graph-object-data in Creating Graphs With Adobe Illustrator

  • Instead of selecting graph sub-elements within isolation mode, use the Group Selection Tool to select them without isolating your view in the workspace.
  • Click and drag a graph while holding the “Altâ€� key on the keyboard, to quickly duplicate it.
  • Delete graph objects with “Backspaceâ€� or “Deleteâ€� from the keyboard.
  • If you want to create Line graphs with curved lines apply “Round Corners…â€� effects (Effect → Illustrator Effects – Stylize → Round Corners…) to line sub-elements.
  • If you want to create a Pie Graph with empty space in between pieces, apply an “Offset Path…â€� effect (Effect → Illustrator Effects – Path → Offset Path…) to the graph object, and a miracle happens!
  • If you want to create a 3D graph, apply an “Extrude & Bevel…â€� effect (Effect → Illustrator Effects – 3D → Extrude & Bevel…) to the graph object. If you don’t want to transform the whole graph object, apply “Extrude & Bevel…â€� effects to specific sub-elements you want visualized in 3D.
  • If you want to use “Offset Path…â€� effect together with “Extrude & Bevel…â€� on a single graph object or a single sub-element, make sure you place the offset effect below the Extrude & Bevel in the Appearance panel and you’ll be fine. Otherwise you’ll get the offset plane extruded also.
  • Don’t forget to use the “Drop Shadow…â€� effect (Effect → Illustrator Effects – Stylize → Drop Shadow…) as a replacement to the poor shadow feature that’s served by default for some graph objects.

Draw your conclusion

I used Adobe Illustrator to create “The Graps2â€� and I can say it was an interesting experience. It wasn’t as delightful as I would have liked it to be but it sure was challenging.

After reading the above article you may feel discouraged in using Illustrator for graph design. What I would certainly recommend is at least trying Illustrator for creating graphs. It’s the only way of getting in touch with the work-flow and making a personal judgment of whether Adobe Illustrator is mature enough for your graph creation needs.

At the end of the day, keep in mind that with Adobe Illustrator you’re creating vector art. Vector art can be re-sized infinitely, without any consequences in terms of graphics quality, thus can be fitted in almost any type of medium.

Further reading

(afb)


© Goce Mitevski for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , , , , , ,


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress