OK – I’ve been spending the last few hours getting acquainted with the WordPress backend (that sounds more risque than I had intended) and making my first custom ‘child’ theme.
If you have an interest in making custom themes and you’re just getting started, I’ve got a few very generic tips:
- Don’t underestimate how complex some of the themes and frameworks can be
- Start by creating a child theme or modifying an existing theme
- Check out this tutorial on PressCoders
The tutorial on PressCoders is very clear, so I won’t re-invent the wheel and write a tutorial on making child themes. Instead, I wanted to share the child theme that I made. Basically, I’ve taken the Twenty Eleven theme and replaced the static header image with a dynamic image slider (using Galleria). You can check out a live demo, otherwise here’s a quick screenshot:
Anyways, as simple as it is, I’ve learned a lot from the exercise. If you want to use the theme or take a look at the code, here’s the package.
Thanks for reading.
This one is pretty much a no-brainer, but I wasn’t aware of it until very recently so I thought I’d share.
Source code, as you’ve probably seen on lots of web pages, is treated special. And for good reasons, like readability, syntax highlighting, and to protect against the use of formatted instead of plain-text characters.
When I first started using my WordPress site, I just used the <code> tag. Which is fine. But there is no syntax highlighting, which makes reading code a little more painful. I stumbled on the Syntax Highlighter plugin which does a great job and covers many languages, but alas – I’m hosted on WordPress.com and am restricted from adding my own plugins.
But wait – what’s this? WordPress.com has integrated Alex Gorbatchev’s Syntax Highlighter into their instances! So all I need to do is switch from the <code> tag to the [sourcecode language=”language”] tag! Boom, syntax highlighting in my WordPress posts.
Here’s a quick example of what the syntax highlighting looks like for HTML, just for kicks:
<html> <head> <title>This is my web page title - notice it is not highlighted by the syntax highlighter, but the tags are</title> </head> <body> Awesome. </body> </html>
This was a game changer for me, to the point that I’ve been editing my old posts to use this new tag so I can offer syntax highlighting to my readers.
To see a full list of the supported languages, check out the official WordPress post about posting source code.
Update: I got burned by the WordPress auto-save feature, so this post might not have rendered correctly before. Working now!
Update of the update: It wasn’t the auto-save that burned me, it was the sourcecode tag. It has a nasty tendency to convert symbols into their ascii codes (like “>” instead of “>”). Real inconvenience, sort of ruins all of the benefits of the syntax highlighting and the like. Anyway, just be aware when you are using it.
Recently I have been helping Make a Difference Wisconsin, a local non-profit, with their WordPress website. Without going into details as to why, I needed to create a simple ‘page of posts’ for menu hierarchy reasons. It needed to be a page, but I wanted it to display all of the posts from a particular category. Google took me to many solutions, including the WordPress Codex, but none of them worked. Some used out of date or deprecated query functions and some didn’t work with the custom theme that was already in place. This should have been a very easy task, but took me several days to pin down my solution.
So, if you want to create a simple page-of-posts that should work in any theme (with some minor tweaking, of course), feel free to use this code:
<php /* Template Name: pageofposts */ /* Author: Alex Glover Date: 4-Nov-2012 */ ?> <?php get_header(); ?> <div id="content-area"> <?php global $post; $args = array( 'numberposts' => 5, 'category' => 47 );//CHANGE THESE VALUES AS NEEDED $myposts = get_posts( $args ); foreach( $myposts as $post ) : setup_postdata($post); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2><br /> <?php if ( has_post_thumbnail()) : ?> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?> " style="float:left; position: relative; margin: 0px 20px 0px 0px;"> <?php the_post_thumbnail('thumbnail'); ?> </a><p style="width:450px; float:left; position: relative;"> <?php the_excerpt(); ?> </p> <br /><br /><br /> <?php endif; ?> <?php endforeach; wp_reset_postdata(); ?> <div></div> </div> <!-- #content-area --> <?php get_sidebar(); ?> <?php get_footer(); ?>
Here’s a quick preview of what the ‘page of posts’ code looks like, but obviously aspects of this will be very different based on the theme that you are using.
You can check out the full page and see the code in action at http://www.makeadifferencewisconsin.org/investment-conference/past-conferences