Random, Rotating Header Images
by Chris Pearson
What was the first thing you noticed when you came to this site?
The sleek typography set to a 20px baseline grid? HA.
Naturally, you noticed the huge header image! Photographs are the most visually striking graphical elements of any design, and when you place them in a spacious environment that is free of clutter, they pack an unparalleled visual punch.
In addition to their general appeal, however, photographs also afford people the chance to be uniquely expressive. With the Neoclassical theme, you’ll be able to include as many images as you like in the random image rotator, all with brain-dead-simple customization.
Don’t hide your photography skills any longer! Show off your finest “crop” with the Neoclassical Theme for WordPress.
For the record, the default header images are 865px wide by 180px tall, and for seamless integration, you’ll want to use the same size images for your rotating headers.
257 comments
Awesome stuff Chris. I’ll have it set up this evening. Another killer project. Much thanks Chris.
HI: I downloaded your wordpress theme which is now a .zip file on my desktop. I’m still learning my way around CSS although I do know the basics.
My question is: Where do I extract my files TO when I unzip the download? I can’t seem to find an appropriate destination, and my WordPress blog is only accessible when my browser is open. So I am unsure how to get the downloaded theme from my desktop to actual integration with my blog.
Thanks in advance for any advice,
Caile~
It really looks great, Chris. Good to see you back at it. Now I will have to decide if I want to switch from CopyBlogger to this one.
Looks like the middle column is a little shy of supporting the typical 468px Ad format … I have glanced at the code and suppose I could do a workaround on it, but I know you specifically allowed for 468px in CopyBlogger so thought I would instead ask why you decided to move away from it. Is it your sense that a small ad on the sidebar is more effective? (I have almost come to that conclusion myself, but have not finished testing.)
Very relaxing theme. Thanks!
Very cool!
I actually tried something similar in a modification of the Copyblogger theme, but I didn’t use it. I didn’t spend the appropriate amount of time making sure the two sidebars worked together properly.
This is a great idea and I love photographs. I’m sure there’s a lot of good photography resources that people could use, but I’d like to offer my photographs to people that would like to use them. They’re not high enough quality on my photoblog. However, if someone wanted one or a few in particular I could get the high res ones out for them, even crop them accordingly. A link back to me would not be necessary, but appreciated.
@kristarella, I really like what you have done with CopyBlogger on your site. Great customization work!
@Chris,
I am really toward switching to Neoclassical from CopyBlogger (though I like both), but need to know the max width of pictures in the content column. Looks like I’ll need to resize several of my pics as some are 450px width, some maybe a bit larger. In looking at the code, looks like 445px pictures would work, or do I need to subtract off the 9px padding, making it 436 (or 427 if I need to subtract twice)?
Thanks again for churning out another beautiful theme. Also thank you for arranging the php coding so neatly … will help me in making the few customizations I would want to do. Very easy to follow. (The CSS layout is beautiful, too, and pretty straightforward to understand even for a CSS-lightweight like me).
Regards,
Bruce
Very nice theme! I’m always a fan of your work.
Bruce — The usable content area of the theme is 425px wide, which is exactly wide enough to support the default size of a YouTube video embed.
I decided to make that the standard for the width instead of 468px, primarily because the 468×60 ad block is a historically poor performer. Ads that cascade vertically (rather than horizontally like the 468) tend to perform better, and because of the way this layout is constructed, I fully expect that to hold true for my users.
Also, regarding images, you need to know two things:
Caile — In order to upload the theme properly, you’ll need FTP access to your server.
Locate the root directory in which WordPress is installed, and then navigate like so:
Upload the entire neoclassical folder into the themes directory, and once you’ve done that, you will be able to select the Neoclassical Theme from the Presentation tab inside your WordPress dashboard.
Chris – thank you very much. Exactly the information I needed!
Okay..I’m on it. Leaving typepad for the bliss of WordPress.
But here’s the thing…how do you put a graphic (.gif, .jpeg) on the left or right nav bar? I’m hacking my way through. LOVE your blog thank you!
Saundra — You can add content to either sidebar in one of two ways:
Option 1 is probably the most common practice for adding content of this nature to any Web site, and it’s the one I think you would probably benefit the most from learning.
@Chris, thank you for this lovely, beautifully coded theme.
@kristarella, terrific CopyBlogger customization.
Cheers.
Thanks for the wonderful theme. I’ve been a Cutline user, but NeoClassical outshines your previous creation.
I guessed 420px for the maximum image width when I resized my previously posted photos – not too far off. Thanks also for the update on image sizes. I also prefer the image classses in NeoClassical where “no frame” is the default.
I notice you’ve eliminated the Archives and Sitemap pages. My logs show that the Archives page was hardly ever accessed, and I use the Google Sitemap plugin for WordPress, so no loss there as far as I’m concerned. The default structure seems to favor individual posts and pages for SEO, and that’s really what I want search engines to index. I don’t want search engines pointing to an archives page (or a category page or a tag page). Is there anything else I can do to focus search results on full articles?
The only other glitch I’ve run into is that the pull-quote image is a tad too large for a one-line quote. Not a big deal and I can work around it. The theme looks great. Thanks again.
Mitch — I think you may have exposed a “bug” regarding the background images in pullquotes. The image is not supposed to display in that context, so I’ll have to go back through the stylesheet and ensure that all browsers suppress that image in pullquotes.
Regarding the Archives and Sitemap pages… Template files for each are included with the theme download; however, I did not include links to either page because I don’t them to be that useful, frankly. In fact, I have removed HTML sitemaps from most of my sites, and I would recommend that most folks do the same.
You mentioned the desire to have search engines place a priority on individual posts and pages, and I must say that you are certainly on the right SEO track with that kind of thinking. Problem is, managing the interlinking of your site is a very intensive process that requires manual link editing combined with extensive knowledge of your site.
This is a topic that I’ve been putting a lot of thought into lately, and I expect to post on it sometime in the near future.
Does this theme have wp tagging support?
Rhett — No, and I’m going to be talking about the reasons why later this week on Pearsonified.
In the meantime, suffice it to say that passing off link love to Technorati is a terrible long term strategy for your site. Also, consider that I own a medium sized celebrity Web site, and I’ve never received more than 500 hits in a day from Technorati search tags. On most days, I get fewer than 20 hits.
For my money, I’ll trade in those 20 hits, conserve my link love, and watch my growth occur in the search engines over time because I’ve done a better job retaining the value of each link on my site.
I was wondering if you were going to say something to that affect. I look forward to your thoughts.
Chris
I again applaud you on a beautiful design. I am not going to be able to implement it in the near term, though. In looking over my previous image postings, many of them exceed the max width setting of this theme, and would not of sufficient quality if I reduced them (which would also be a tedious process, even if effective). I may work on a wider center column version later, though.
In addition to its beauty, the coding is fantastic. I have been looking it over and am learning bits and pieces from it. I think once I do migrate to it, I will nofollow the pagination links, somewhat at odds with the way Mitch is doing and possibly at odds with your thoughts (which is why I am writing: to get your thoughts). I do retain an archives page in the CopyBlogger design and think that categories are an excellent way for search engines to index one’s site. So, I have lately been thinking that nofollowing the pagination links would keep the SEs from following a duplicate path to my articles, in fact a path that I prefer they not follow. (I don’t have any readers who just set and click through one page after another … they do click on the categories that interest them, though.) I know of a popular site that is experimenting with this (I wish I knew how to conduct such an experiment myself).
Thoughts?
Thanks for your compliments Bruce and Susan.
Chris – I look forward to your thoughts on tags. I didn’t really consider them to have that much to do with Technorati anymore, but to be another level of organisation for your site.
Chris,
This theme rocks. Do you require that the footer remains exactly as you have it with a link to openeducation.net . I’d rather link directly to your site (pearsonified.com). The openeducation site expresses some opinions that I don’t fully believe and although I certainly agree with their right to state it, I don’t want the “Support OpenEducation.net” to imply that I endorse them.
If you could please give any additional acceptable footers I would appreciate it. If this is a sponsored theme and you require the link to remain the same, I appreciate that also, but I will have to use a different theme.
You do amazing work.
Thanks,
Mark
Bruce — Optimal linking structures are a hot topic right now, and I am personally just beginning to wrap my head around “best practices” in this arena.
When I first put this theme together, I used nofollows fairly liberally in an attempt to make any manually-added home page links as “juiced” as possible. However, after reading this excellent article and thinking about my personal experience with my own sites, I realize that I may have gone a tiny bit too far with the use of nofollows.
If I were to change things up now, I would probably remove nofollows on the home page link in the header for all pages except the home page itself. Other than that, I would keep things mostly as they are now. Unfortunately, this is about as much as I can do for you (or anyone else) as a theme designer, simply because I can’t control your linking for you on an ongoing basis.
Honestly, the only linking convention that I can say negatively affected any of my sites is the use of category links on the home page. I think people simply don’t realize the importance of the home page in terms of an overall linking strategy, and because of WordPress (and blogging in general) conventions, people end up slapping category links, tags, del.icio.us links, and all sorts of other stuff all over their home pages.
Archive links, category links, tags, blogrolls, and all that other hoo-rah belong on sub pages and not on the home page itself. Why blow link juice on secondary site pages? Why not use the home page to only direct people to the best stuff you have to offer?
Chris
Thanks for thinking through this with me. It is something I am only starting to struggle with, and I suspect my site has been held back a while from all of the time I had categories listed on the Home page. I am still undecided regarding the pagination issue, but I am not at the crisis point with it. I will try to research it more and I sure appreciate you providing the above link. While I really shouldn’t being spending the money in my retirement, I do spend the almost $50/month to be a premium of SEOmoz and wish I had been doing it longer … there is SO much to learn, and I am so behind the curve on it.
I really respect your thinking, and your incredible designs. Thank you for sharing your thinking with us.
kristarella — Ok, so I took a closer look at WordPress tags, and I have two primary thoughts on these babies.
Alright, so with my little rant out of the way, I’m happy to detail what I think is the only acceptable use of tags (and categories, for that matter).
Categories should be used to organize types of content—not by subject, mind you, but in terms of the actual “type” of content (posts, asides, feature articles, news blurbs, etc.).
Tags should be used in the same manner that people have misused categories for the last few years, but perhaps a little more sparingly (what good are 347 tags on your site?). Also, I don’t think the tags should necessarily ever be displayed, but as a Webmaster, grouping content in this manner gives you more options for how you can display things to users.
The bottom line is that micromanaging your content via tags (or categories, or whatever) is something that probably has very little long term benefit. Then, to make matters worse, you’ll have to worry about dealing with all those tags if you ever decide to change content management systems or make sweeping changes to your site.
Less is more. Scrap the tags.
Chris,
I was using the wrong login. Problem solved. Thanks
Chris, i’ve download neoclassical, n try to tweak it by my own style. I’d like to know, how should i set my feed? I use feedburner, but seems like it wasn’t connect to my wordpress (note: i place my feed in the sidebar). Thanks before, n if i put a footer text “design by chris pearson”, is it ok?!
Regards,
Hnings
Hnings — In order to properly redirect your WordPress feeds through Feedburner, you will need to make simple modifications to the following theme files:
In header.php, look for the following <link> tag, which appears between the <head> tags:
You’ll want to change the href attribute of that <link> tag to the URL of your Feedburner feed.
In sidebar.php, you will need to make a similar change, except this time, you will be changing the href attribute of the anchor tag surrounding the RSS icon img tag.
Oh, and your footer is fine
Dear Chris,
This is truly an excellent theme, optimized for both visual and SEO clarity. Congratulations on the design!
Unfortunately, I’ve run into a problem. Up until installing Neoclassical, I’ve been using WP-Cache with Copyblogger to speed up my page loading times. However, since installing this new, awesome theme, I’ve had to disable the WP-Cache plugin to get the header to rotate on refresh.
So, here’s my question.
How do you cache your pages while still allowing the header to rotate? If it’s any matter, I’m using Dreamhost.
Sincerely,
Kevin Chiu
Kevin — I’m pretty sure there is a way to force certain parts of a PHP script to run every time a page is called, but I have absolutely no idea how to do that within the context of WordPress and the WP-Cache plugin.
I actually run WP-Cache on Pearsonified, and as a result, I’m completely familiar with the problem you describe. To combat this issue, I simply turn off WP-Cache most of the time, and I’ll only flick the switch if I know I’m going to be receiving a ton of traffic (Digg, del.icio.us, etc.).
In a perfect world, you could just leave the cache on all the time, but in all honesty, there’s no compelling reason for people like you or me to run it on our sites most of the time.
And really, because your site is already so light in terms of bandwidth-hogging elements like images and whatnot, speed should be the least of your concerns… In fact, if your site got any faster, it’d simply load telepathically without the need of a browser.
Oh, and Dreamhost is an absolute dog—that might be why you think your site is slow. If you have anything below a dedicated box with them, their service is just crap. I have worked with many a Dreamhost server, and I can’t stress enough how much I think their low end products stink.
If you’re ever in the market for a new Web host, check out AN Hosting—they’re running a shared server special right now for only $4.95 a month. Oh, and the real clincher here is that you can run unlimited domains off that account, which is unheard of at that price.
Sorry for being an idiot, and thanks in advance for help.
If I am using the management function w/in WordPress and add a new page, do I have to edit the PHP files in order to have the page appear in the Navigation area.
Great Design Chris!
I’ve made the feed work though i have to work hard coz i knew nothing about html. Thanks alot!
So I took a look at the Pages that I created and I figured out the following:
1. When creating pages from WP-admin, the pages are created with a page_id= # for example page_id=3
but the navigation.php is setup with relative names like “about”
should I adjust the links in the navigation file or is there a better way to manage the pages created?
Thanks Again.
Shane
Excellent theme, as usual. Great job. I’ve already used it (without any modification except for the header images). Thank you.
Very relaxing theme. Thanks!
how do I switch the images out with my own?
Thank you.
Chris – Thanks for your thoughts about tags and categories. I think I have a lot to read and think about in terms of SEO and usability. I have been trying to make things as usable as possible. Perhaps an archive page is the place for categories, not the sidebar. Then I also need to decide on permalinks, at the moment they are year/month/title. The other appealing alternative is categories/title, but then if you change the category style you’re a bit stuffed. Joy, another holiday project! I just need to stop distracting myself before I get to the holidays!
Shane – You need to figure out whether you want to keep the default links for you site or change them to use words instead of numbers. See the WordPress docs for info about that. Then you can either change the links of your site (permalinks) or the links in the navigation.
Chris – thinking a bit more about categories after what you wrote.
Do you think you’re going to be changing the way you categorise posts? Do you think that this kind of thinking will affect many others? Perhaps this is the way things are going with premium and feature-style themes? Do you think organising things in such a way would be confusing for readers or will it be easy because they can just use the search box?
Let me know if you want to move this discussion, since it doesn’t have anything to do with rotating headers!
ok I figured out how to change images……
now how do I delete the border from around the header image?
I really the look of the theme but I have the same reservations with this as I did with Cutline: I just don’t want to use (and don’t have) images that shape. There are so many great images to use that don’t fit the long and low requirements of the blog header. Don’t get me wrong, I can crop an image without any difficulties. But I don’t always want to. I often think putting the blog title on, say, the left, and an image on the, say, the right, would be a better use of the space.
Liking this theme a lot and using it on a new blog. These comments have been extremely helpful too.
Shane — Implementing a permalink structure that is semantically sound is definitely something that you will want to do right away. With the advent of WordPress 2.3+, you no longer have to worry about the myriad issues that can arise as a result of changing your permalink structure, so now there is no reason why you wouldn’t make this move right away.
For help on changing your permalinks, you can check out this video that I made, or you can try to decipher the WordPress codex page that Kristarella linked up for you.
If you switch to the permalink structure outlined in the video, all your theme links will work without requiring any additional modification.
kristarella — I definitely think that the archives page is the place where categories and monthly archive links need to go. It is flat out senseless to waste your home page link juice on generalized archive pages, mostly because those pages will never be as helpful to users as individual post pages.
As far as permalinks go, just use the custom structure, and specify the following: /%postname%/. I would leave out all the other data, including the year, month, etc.
Unfortunately, I think most WordPress users are going to be significantly affected by this paradigm shift with regard to handling categories. At the same time, though, I doubt very seriously that most folks will modify the way they do things.
Eventually, those who put a serious amount of thought into the way their content is organized will begin to realize that this is a robust form of futureproofing Web sites. Overuse of archive pages, categories, and tags creates a page bloat (on any site), and this makes it harder for search engines to determine which links and pages are truly important.
Ultimately, the best way to manage sidebar content throughout your site is to implement a semi-automated system that involves the use of categories. For instance, you can mark certain posts as “popular,” and then you can output the contents of