Categories

Typograph – a no images WordPress Theme

Typograph 0.8.6 Now Available

In the wake of the problems caused by WordPress 2.8 I have released a new and updated version of Typograph. In addition to fixing the technically small but hugely damaging code conflict from 0.8.5 I’ve also fixed a number of other problems:

  • Search results now display pages properly
  • all code related to the sidebar tabbed box has been moved to tabbedBox.php
  • general code clean up has made the theme lighter

In particular this means now all you have to do to disable the sidebar tabbed box is to remove or comment out the php include found on line 4 in sidebar.php.

Typograph 0.8.6 is now available from the WordPress Theme Directory.

Critical update for WordPress 2.8

It was brought to my attention last night that there is a critical conflict between the popular Typograph theme and the new WordPress 2.8. Knowing that most Typograph users will update their WordPress installation in the coming days finding the reason for the conflict and a solution was a number one priority and I am happy to say I’ve already created a fix that solves the problem. A full upgrade of Typograph will be published later today but for current installations the fix consists of just replacing one file. Here are instructions:

Upgrade Typograph to work under WordPress 2.8

  1. Download and unzip the archive with the fixed functions.php file here.
  2. Access your Typograph theme directory in your hosted WordPress installation (should be under www.yoursitename.com/wp-content/themes/Typograph).
  3. Delete the old functions.php file under the Typograph theme directory.
  4. Upload the new functions.php file to the Typograph theme directory.

I have tested this critical fix and it works.

Major update – fixed tabbed box and threaded comments

The 0.8.5 version of Typograph was created with two goals in mind: Fix the many plug-in conflicts reported and add threaded comments. To fix the problems the NicEdit HTML editor for the comments is gone (so no more fancy HTML editing for now, sorry. I’m looking for a solution) and I have rebuilt the tabbed box from scratch using the MooTools library instead. Extensive testing with numerous plug-ins shows that at least as far as I know the conflicts are no longer there and everything works properly. If you do find any more conflicts, please tell me so I can fix them.

Typograph threaded comments

One of the really cool new features in WordPress 2.7 is threaded comments. Basically this means that when you comment on a posting you can answer other comments and your answer will appear “nested” within the comment you answered rather than on the bottom of the page. This is a very cool feature that you had to use a plug-in for in the past. Upgrading to threaded comments was quite a challenge. There is very little information about it around and it took me a while to figure it out. Luckily I came across two blogs with instructions and it is these two approaches combined that formed the basis for the threaded comments in Typograph. These were Chris Harrison’s blog (for styling) and Otto’s blog for backend code. Thanks go out to the both of them for excellent tutorials and to Otto for some extra help via e-mail.

Important note for WordPress 2.7 Coltrane users:

With the release of WordPress 2.7 Coltrane came the introduction of a new template tag called post_class(). Interestingly I have been using a custom template tag by that exact name for a long time in my themes including the free Typograph. That means when users of Typograph upgrade to WordPress 2.7 Coltrane a conflict occurs between the WordPress functions.php file and the Typograph functions.php file because both define the same template tag.

The Typograph theme has now been updated to resolve these issues and the new WP 2.7 Coltrane compliant version is avaialbe from the WordPress Theme Library:

Download Typograph for WP 2.7

Introducing Typograph – a no images WordPress Theme

I’ve been planning to launch a proper free WordPress theme for some time now but there have always been major projects in the way. This week I had some extra time so I sat down and developed the Typograph theme which is now available for anyone to use. For free.

The theme is as simple as possible with clear separation between the content and the sidebar, a calm gray and white design with popping red links, a tabbed sidebar box with navigation, search and other important elements and some other styling for increased readability and better navigation. It complies with the new WordPress standard elements like image captions and Gravatars and even has a customizable ad space directly under the first post on the front page. And last but not least, Typograph is fully XHTML and CSS standards compliant.

Download the Typograph theme from the WordPress Theme Directory here!

See a demo of the Typograph theme here

No images

Right before I began the design of this theme, Spyremag published an article about 5 ways to break your design habits, one of which was to design a site using no images. Seeing as I’ve become somewhat obsessed with CSS over the last year it seemed only appropriate to follow this advice and create a no-images theme. Not only would this be a bit of a challenge because I ususually use a lot of images to make my designs more vibrant, but it would also put my coding skills and my understsanding of WordPress themes to the test.

Styled from scratch

Over the last several months I’ve been refining and customizing a copy of the Sandbox WordPress theme to develop an ideal platform for quick and easy WordPress theme design. The plan is to create a “God Theme” if you will that has all the bells and whistles installed and ready to go so that new theme design is quick and efficient. To put the alpha version of this foundation theme to the test I used it to style Typograph from scratch.

Tabbed box navigation

When I created the new theme for Design is Philosophy I spent quite a bit of time developing and perfecting a JQuery and CSS based tabbed sidebar box that would contain navigation as well as other useful information for the visitor. For Typograph I further developed the tabbed box and isolated it in it’s own file to simplify customization for the user. It can also easily be deactivated by commenting out a single line of code in the sidebar.php template. The tabbed box contains navigation for pages and categories along with an about section, RSS link and search box by default. It takes standard WordPress tags and can be customized to include pretty much anything by editing the tabbedBox.php file found in the theme directory.

Download the Typograph theme from the WordPress Theme Directory here!

See a demo of the Typograph theme here

If you liked this theme, consider donating donating a dollar or two so I can keep creating free themes and tutorials:


139 replies on “Typograph – a no images WordPress Theme”

Nice theme and informative contents…….I think I should follow this blog daily…..as I am a newbie and want to gather some knowledge on WP themes before entering into it.

Happy Chinese New Year Matey.

hellllllp……….!!

*#!%&!!!!

I know I should have backed up files first… I decided to change just the blockquote color in style.css. Now, I get a message, saying my theme doesn’t exist. When I try to select it again, it gives me a completely messed up preview nothing like the real theme. I had some customizations on that theme…

Any ideas?

I know… I should have backed up the files…

Lia

Ok… I downloaded the new version and used style.css from that, but now when I click on “editor” under “appearance” in my dashboard, it still tells me the theme doesn’t exist and doesn’t allow me to edit. (I’d like to re-do my customizations…)

Can you help?

Well… I delete all ‘pages’ (and transformed them in publications with theirs ‘categories’), and now you can’t see the design problem (my English is awfull, excuse me)… Yes, it’s foolish decision (the problem is still here), but my waiting time is over…

Hey the tabbedbox isn’t working. Works on your site but not in the wordpress theme directory. Just an FYI.

Drew: I just tested it in the theme directory and it works just fine. It may be some sort of browser conflict on your end. Would you mind telling me what browser (type and version) you are using?

Oh I see, you are talking about the sliding effect. Because a lot of people were having trouble with JavaScript conflicts caused by the revious tabbed box running JQuery I changed the theme so that the box is driven by MooTools instead. Unfortunately I have yet to find a good sliding function in MooTools so for now that small piece of eye candy is gone. Hopefully I’ll find a piece of code that brings the sliding back but until then it snaps instead.

Understandable. Do you happen to have the older version of the theme or know a place where it’s still posted? I wasn’t having any problems with javascript conflicts.

There is an older version of the Typograph theme on my server though I don’t remember exactly which one it is (bad labeling on my part). Download it, try it and see if it does what you want it to do.

If it works I still recommend you swap out the comments.php file with the new one and replace all the style code within the Threaded Comments brackets in the style sheet so you get threaded comments.

Amazing. Thanks for your help! Will definitely give you a link and shoutout when I get up and running.

Drew,

Did some reading on the WP site and through a bunch of your old replies. For whatever reason (I wasn’t using a plugins other than Akismet and Flickr Photo), the text editor seems to have been causing my conflict. When I moved the contact form out of the tabbed box into the sidebar and looked at it in the single post view, I could see the same text editor in my contact form “textarea” as in the comment form.

I read a post on some plugin conflicts at:

http://wordpress.org/support/topic/231538

Suggesting that the first two lines of the comments.php file be deleted.

That eliminated the text editor from the comments, and eliminated my problem with the “textarea” in my contact form when viewed on the singlepost.php pages.

Just wanted to let you know about it.

Lonni,

the JQuery conflicts caused by the comments WYSIWYG editor and the tabbed box have both been solved in the 0.8.5 release of the theme. Download it from the WordPress Theme Directory and check it out.

Thanks. I have now upgraded.

Another curiosity. Why is the div

div id=”tabbed_box_1″

called in the tabbedBox.php but not defined in the css? Shouldn’t it have been?

Oh, and if you have time; can more than one tabbed box be implemented on a page?

That one is weird. Guess I need to do some housekeeping. I’m guessing I originally wrapped the box using a style and then realized it was superfluous later and just didn’t remember to remove the style call. I’ll clean it up in the next update.

I LOVE this theme. I’m just working on a new site and I’ve changed the background to black. It looks great, however, I would like to remove the white/grey box that hovers over the text when the mouse rolls over the links, pages, etc…

I’m not adept at CSS or PHP, but I can follow directions very well.

Thanks for creating such an elegant theme.

Terry: Go to your stylesheet and find the following style code:

#sidebar ul ul li:hover {
	background-color: #EEEEEE;
	color: #666666;
}

This is what controls the hover state. If you want to get rid of the effect just comment the whole style out or delete it. It’s that easy.

I feel really silly asking this, but I just started using WordPress 2.7 and chose typograph to start with. I have a very very basic knowledge of html. For some reason I can’t seem to get the threaded comment feature to show up. I don’t get the reply button under comments or anything. Is there something so basic I’m neglecting?

There is no such thing as a silly question Elizabeth. What you need to do is go to Settings, Discussion and under Other comment settings check the box next to Enable threaded (nested) comments X levels deep. It is set to 5 by default and I’ve only styled 5 levels so leave it that way.

That’s really all there is to it. Have fun!

I’m looking for a 980 pixel wide wordpress template with:

Layout Approximately:

200 px left column
480 px center column
300 px right column

Tabbed horizontal Navigation

Widget Friendly
WP 2.7 Compatible

Email me if you have a source; thanks

Morten,

I need to (would like to) insert an image (just a simple text logo in a particular font) instead of the BLOG HEADER in Typograph.

ONLY because the Papyrus Font looks great on my mac, but most machines don’t have it and the substitute fonts are terrible.

Is this a simple modification?

I’ve tried to mod the code, but I’m used to basic HTML, not complex CSS.

Best,

Terry

PS: If you’re interested in seeing the site I can email you the URL, it’s just a bit secret at the moment.

Hi – is there a simple way to change appearance/function on just the body content links? I would like to add a simple touch-up like bold the links and maybe use the 800000 color on rollover. Usually I play around with wordpress stylesheets by trial and error (not a programmer!) and this one has me confused on that front. By the way, thanks! Really love the theme overall.

Not sure if anyone else is having this problem. But the sidebar seems to be dropping to the bottom of the screen (but only in Firefox – it seems to be working ok in IE). Its even doing it (for me) when I look at the Demo link too – http://wp-themes.com/typograph/. I’m assuming that my stylesheet might need a tweak or two. Any ideas?

Fantastic theme by the way. Love it!

K.

Hello, sir.

I have downloaded this theme and it is prefect for my intended usage. Thank you. However, I have managed to get everything working in the menu box with the exception of the RSS feed. I know the solution is probably a simple one, but as a .php newbie, I am seriously struggling.

Would you be so kind as to assist me in getting this link working? My RSS feed is: http://www.lifeaftercrohns.com/?feed=rss2

I need to know what part of that information goes where, please.

Again, thank you for a wonderful theme.

Oh, gosh. I just now figured it out and it is working beautifully. There is a lot to say for taking a step back and walking away for a few moments.

Thank you!

I’ve been using your theme for a few weeks now. I think it’s great. Thanks very much!
I will be donating a penny or two vwery soon. Honest!

Typograph seems to be too dependent on the browser’s default font setting. I tend to have my default font set rather large, for readability on a fine-pitch notebook screen. Try setting Firefox’s default font to 20-point, and the tabbed box gets too wide and is pushed to the bottom of the window.

Zooming (text-only) has the same effect.

A side question: what’s the point of the tabs, since everything seems to appear on the home tab?

Looks like my sidebar problem was fixable with a couple tweaks to the width in the stylesheet.

Strangely, it dropped on my Firefox at work with a 1280×1024 resolution, but totally worked on my Firefox at home with a 1280×768 resolution. Weird.

🙂

I’m using WP 2.7.1. So far, the widget section is a bit erratic. When I want to display the contents of Sidebar1, it shows me the contents of the Invisible Widgets. Also, I cannot remove the widgets. As soon as I save, the widgets are back again. 🙁 Any ideas?

Hey thanks for this wonderful theme. A very nice work! But I have to report a (minor) bug.
I’m using typograph 0.8.5 with wordpress 2.7.1.
Problem is: When I’m searching for a post, search results are displayed properly. But when im Searching for a page, the postdate/commentcounter of the result-pages are displayed overlapping with the excerpt. Is this a known issue? How could I work around? It’s not a high priority task – but I hope I can find a solution about that. I don’t know why it affects only results with “pages” and not with “posts” also.

Ramon: The page alignment in search is a known bug. It’s because the theme uses two different styles to position post content and page content and I just plain forgot to alter the style call for the search and archive pages. it’s an easy fix from inside the search.php file but I haven’t had time to get to it.

Hey,

I love the theme, it’s great, thank you. Since I’m using it as an image-heavy food blog, I wanted to restrict the number of posts that were displayed on the front page to help with the load time. I set it to 5 under Settings > Reading > Blog page shows at most. The problem that arose was that it showed the five most recent posts in chronological order, and then 10-15 extras out of order. I don’t want 20 posts on the front page, but I can’t seem to get it to limit.

Thanks for any help you can give.

Elena (www.biscuitsandsuch.com)

Hi, it’s been super long time since I’ve delved into css. Can someone please show me which part of the tag to change if I want to change the main title of the blog to a bright orange colour? also please point out to me how to change the hover and visited as well? Or perhaps I’m doing the colour codes incorrectly?

sorry someone please help?

you can change the blog title color by finding:

#content #header h1 a {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 3em;
text-transform: lowercase;
letter-spacing: -5px;
color: #000000;
}

change the “000000” to your 6 digit orange color you want. the hover option is right below that.

hi morten! thank you so much for this awesome theme. i’ve searched up and down for something i could use and was so happy when i came across your theme!

i do have one question though and hopefully you can help me out… it is in regards to the tabs. when you click on a tab (that isn’t the default) and then click on a link within that tab, is there a way to make the tab stay where it is rather than going back to the default tab right after you click on a link? i hope that made sense…

here is a simple example of what i mean using your page here. when i click on the “menu” tab and then click on the “contact” link within that tab, the tab menu goes right back to the default “about” tab.

this can be a bit tedious when you have links and have to keep choosing the tab to go back to see the list of links again…

hope you can help!! thank you for your time 🙂

I got the error below, can some one help?

Fatal error: Call to undefined function comment_id_fields() in /home2/bearbeef/public_html/wp-content/themes/typograph/comments.php on line 107

Really like Typography. About the only thing I wanted to change was the size of the Gravatar from 32px to 50px. I found the size property in the stylesheet, but it didn’t seem to change the size and couldn’t see anything in comments php file. Thank you for the theme.

Having all kinds of trouble finding a lightbox plugin that works with this. I see people have been recommending a work-around by deleting some lines in the comments.php, but I admit; I’m not finding those scripts in my version. Any help?

Ugh. Read. All. Information. Before. Asking. I get why I’m not seeing the scripts now. But I’m still having trouble using Lightbox 2. Works fine in Firefox and Safari, but not in IE. Any ideas?

Hi,

Brilliant theme! Your hard work is much appreciated.

Should the ‘Subscribe to my RSS’ button in the RSS tab of the Tabbed side bar
work automatically, or do I need to modify something to enable it?

Marty

Hi,

well, first of all, thanks a lot for this beautiful theme.

Unfortunately, with WP 2.8 and IE8 neither the tabbed box nor links which don’t contain “target=’_blank'” work.

Any help would be appreciated. The new functions.php offered above does not solve this problem.

Thank you
Trainer Baade

Trainer: I’m not sure what you mean by the links not working. I checked your site and everything works there. I’ve also tested the fixed functions.php file on a virgin WP 2.8 install and everything including the tabbed box works fine. Your problem may be related to some other incompatibility but it is not rooted in Typograph.

For reference, the problem that arose between Typograph and 2.8 was that I was using a custom function with the same name as a new function in WP 2.8. The only change in the new functions.php file is that the custom function is gone. It has nothing to do with either the tabbed box or links.

morten

Hello Morten,

thank you for your quick reply and your cooperation.

Yes, sometimes everything works fine, but then again, if you maybe first browse to a single article, then return to the homepage via the link in the top and then try to use a link within an article on the front page or something similar, IE states that there is a mistake on the site and doesn’t open any other page.

Would you be so kind as to maybe surf to several destinations on my website, alway just using internal navigation and see if you can reproduce the mistake? In case not, I say thank you, in case yes, I also say thank you.

The error only occurs like every 3rd or 4th try – and only since I installed WP 2.8.

Trainer

Hi There Morten,

Any way I can change the red on the links to something else – dark gray or black for example?

Also how do i remove the comment counter from the left of every post?

Thanks a mil in advance… You have one of the most beautiful themes I’ve ever seen with Typograph!

Pam

I read your website every week, its great and got lots of information to take in and lots of interesting articles.

I read your website every week, its great and got lots of information to take in and lots of interesting articles.

Hi Morten –

I love your theme – I’m having some trouble getting it to look right in Safari though – the secondary sidebar seems to get bumped down to the bottom of the page. I’m pretty inexperienced, so it may well be user error, but any advice would be appreciated.

Thanks!

-m-

Hi Morten. Thanks again for the theme. I absolutely love it. It is almost perfect for my site, only one little problem that you can probably help me with? For the tabbed box, is there anyway to keep the same tab open after clicking a link from it? After clicking on a link from a tab it reverts back to the default tab, which doesn’t suit my site. Please help if possible! If not, please let me know as well so I can have a piece of mind. I really appreciate you and this theme!

Sinoun: The short and simple answer is no. The long and complicated one is that it is possible if you use JavaScript and cookies to pass information about what tab is currently open from browser window to browser window. I know some people have done it but I haven’t looked into it very closely so I can’t tell you how to do it.

Morten