Chris Pearson does nice work. He posted this article on modifying WP themes a few months ago but if you’re interested in hacking your theme and haven’t read it - take the time. If you’re a CSS ninja you probably already do something like this but if you’re somewhere in between noob and ninja like me this might turn on a lightbulb or two. For more CSS head on over to this CSS guide at Smashing Magazine
Posts Tagged ‘THEME’
How To: Widen Your Kubrick Wordpress Theme
December 19, 2006 – 9:04 am
Although I plan on creating my own theme whenever I stumble across some free time, the default Kubrick theme that came with WP suits my needs just fine for now.
Lately I’ve been finding myself wanting to take advantage of the entire width of my blog screen. Elements that get in the way of accomplishing this are obviously the sidebar but also the column width as defined in the CSS.
Fortunately we can take care of that with a simple Page Template. If you’d like to create the occasional wide page and use your existing blog width, read my article on creating a Page Template.
Still Need More Space?
Alright, we still need more room for things like Amazon’s astore so let’s widen our standard Kubrick width from 760 to 800.
Note: Take note of the 40px increase as we’ll use that to adjust div padding and such.
As always, be sure to backup your CSS file (default: styles.css) just in case. I’ll present the following steps in an order you can follow if modifying a production site for minimal disruption.
Modify Some Graphics
Using your favorite editor or even MS Paint, open the following files and increase the image attributes to your desired width.
- kubrickbg.jpg
- kubrickbgwide.jpg (this might only be present if you’ve installed the sidebar widget)
- kubrickfooter.jpg
- kubrickheader.jpg
Once that is done, extend the image length by cutting off the right size and moving it to the new “right side”. Then copy a middle section of the image and paste it to fill the hole left behind by your initial cut.
If someone knows of an easier way of accomplishing this please share. All it all it isn’t very difficult at all anyway.
Save the new files as a name you’ll recognize to associate with your new width like *_800.jpg or .png (e.g., kubrickheader_800.jpg).
Note: If using MS Paint, you might want to save the image as a PNG to avoid the default JPG dithering that Paint applies to new files.
Edit The CSS
Using the standard Kubick Stylesheet, there are only a few CSS elements you’ll need to modify. Modify your style.css doc by navigating to Read More
How To: Create a custom WP page template
December 17, 2006 – 5:31 pm
If you know what to look for, creating Page Templates in Wordpress is very straightforward and easy. Here are some simple instructions.
Beginning The Page Template
What you need to do is to create a custom page template. Open the page.php template file in your themes directory and save it as your desired template file (i.e., fullpage.php).
Next you need to add a commented header like the following to the top of your template file so that WP will know it’s actually a template.
<? /* Template Name: FullPage */ ?>
Modifying Your Custom Template
Once you’ve done the above, hack the content to your heart’s desire. I created a new column style in the CSS to have better control over the display.
Here’s what the rest of my page ended up looking like (below the template comment):
<?php get_header(); ?>
<div id="content" class="fullcolumn">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="entry">
<?php the_content('<p class="serif">
Read the rest of this page »</p>');?>
<?php link_pages('<p><strong>Pages:</strong> '
, '</p>', 'number');?>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php get_footer(); ?>
Additional Resources
- See it in action: Amazon aStore