Categories
CSS Web Standards WordPress WordPress Themes

Typograph – new WordPress Theme

I’ve closed the comments for this thread to consolidate all comments for the different versions of the Typograph theme in one place. Please leave all your comments at the Typograph page which can be found by clicking here.

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

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

50 replies on “Typograph – new WordPress Theme”

I am very new to wordpress and am in the process of putting together my site using the Typograph theme, which I really like. I had a couple questions. I want to add 125×125 ad space (3 in a row) in the side bar under the tabbed section, like on this site, and not sure how I do that. Also wanted to know how I can hide the names of the subpages in the tabbed section under MENU and just show the parent pages. Any help would be much appreciated!

Hi Nanette. To answer your questions, I use the OIOPublisher plug-in to generate the 9 ad boxes under the menu box. The boxes are actually scaled down to 115×115 and there is quite a bit of styling involved to get them to display properly. The insert php code was put in the sidebar.php file.

As for the question of how to only list the main pages in the menu, all you have to do is change one line of code in the tabbedBox.php file:

By default line 18 reads:

This generates an unordered list with all the pages and sub-pages listed. To only get the top-level pages listed change the line to this:

I’m getting this error on SOME of my tag pages.

addthis_url = ‘http%3A%2F%2Florisizemore.com%2F%3Fp%3D459?;
addthis_title = ‘One+More+Minute’;
addthis_pub = ”;

Otherwise, it’s perfect. Any ideas?

When I try to use Typograph on a Mac with Firefox, the sidebar gets pushed to the bottom of the main content section. Any ideas on why and how it can be fixed. I’m on a slightly older G5 running Firefox version 2.00.20.

test site: http://test.outletnewsmedia.com

P.S. – I loved your Twitter box and adapted it for my forth-coming redesign. The credit for it isn’t in the footer yet but will be.

I tested the site in all my browsers and it’s working the way it’s supposed to. I’m guessing it has to do with your browser being an older version that doesn’t fully comply with CSS standards. But like I said, for new browsers it works just fine.

@Alex: By default the author is only added in single post view. But you can easily add the author info on other views by editing the index.php, search.php, category.php and archives.php files. All you have to do is add the following line of code on the next line after the one that starts with :

Posted by .

This will insert the author name in the same place as the single post view.

Hi, I liked the themes because it’s light..

I’m using it on my Arabic version of the blog and i have a little problem.. after editing the theme, i found that there is a scroll bar appearing after loading the page and i don’t know what’s causing it… Can you help me ?
Here is the link : http://www.one4v.com/ar

@Mena: First off, I have to say I am very impressed with how you have inverted the entire theme. A mighty achievement in my book. I have to dissect your layout to figure out why it’s doing that weird thing. It doesn’t happen in Opera which is surprising. I’m too curious to let this one go so if you find a solution before me, please share it here in the comments.

Can’t seem to get the Calendar widget to appear correctly. It appears, but doesn’t seem to adhere to standards set by style.css, and the numbers are not spaced apart at all.

Many thanks in advance for any help with this.

@GH: I never made any styling for the Calendar widget and since I use a style reset, it’ll be completely plain. I am working on an update of the theme to cover a whole pile of issues but until then you have to add your own styling to make it look decent. If you don’t feel like doing it from scratch you can “borrow” the calendar CSS from a different theme you like.

Love the theme. One more issue though…

For the search results layout and category layout, text from pages overlaps the date, while text from posts leaves room (an indent) for the date to appear. Any ideas…?

Thanks.
Lia

@Lia: The reason you are getting the shift is because some of the entries in the search results are pages rather than posts. I’ll have to take a closer look at the search.php file to figure out how to cover this situation. I’ll get back to you when I have a workable solution.

I found that, a widget was causing the scroll bar to appear I didn’t know which one, but i will check that later…sorry for too many comments

Hi,

I’m customizing the typography style but I have problems.. I don’t know much about css and what point to what … like content h3 point to what…

if there is no problem with you I need to know ..

Thanks.

New problem, guys. Absolutely love the theme, but I just installed a great plugin called Mailing list and now the tabbed box doesn’t work. I deactivated the plugin just to confirm my suspicions and then the box worked again. Now the plugin has been re-activated, so you can go the site and see for yourself.

Any ideas…?

Thanks.

New info on the situation… I’ve been told that the reason it isn’t working is because “the JavaScript libraries haven’t been properly enqueued according to WordPress conventions.” Anyone understand that? Is anyone able to coach me through it…?

The problem is that the plug-in and the drop-down box use JQuery and that the library is called numerous times, first by the theme itself and then again by the plug-in. It’s possible that by removing the calls to JQuery in the plug-in the problem disappears. I haven’t tried it yet. The same problem occurs with certain other plug-ins that utilize JQuery. I am working on a permanent solution but it may take some time.

I have to test the plug-in myself to see how this can be done. I’m also working on an alternative tabbed box that uses only CSS for control. It won’t have the flashy sliding effect but it’ll work without clashing with other plug-ins. Stay tuned.

Hi Morten,

I’d be very interested to know when you’ve developed the new tabbed box. I’m hoping to send out an email blast in the next couple days to drive people to the site. Sure would be nice if the site were working completely once they arrived. The sliding effect is nice, but I can live without it… Let me know when it’s completed.

Thanks!
Lia

Hi Morten,
I love the theme – very clean and simple. I have learnt more about CSS and WordPress through the short usage of this theme than ever. I have 1 problem that I can’t seem to solve; I can get a googleAd to show in the sidebar of a post page but not on the front page. Would you know why this is? Is there an extra piece of code that I need to edit?
thank you for the theme.

@Andy: That’s great! One of the main purposes of building the Typograph theme was to make it in such a way that people could learn from it and modify it even with limited understanding of Expression Web. You’ve done a great job. I especially like the login options added to the sidebar box. Might have to steal that idea and put it in the new Typograph update I’m working on ;o)

As for your question: Did you insert the adsense code in the sidebar.php file? and if so, where? I’m a bit uncertain as to why it’s not showing up on the index page so I need some more info about how you inserted the code in the first place.

Try deactivating all your plug-ins temporarily and see if it works. If not, then there is something wrong with the install and you should try deleting the theme and uploading a new version from scratch. If it does work when all the plug-ins are off, try turning them on one at a time to see which one clashes with the sidebar. I am working on a list of conflicting plug-ins to see if I can devise a work-around so these problems don’t happen in the future.

Yeah, I had the same problem. Someone’s working on it for me. He got the functionality back on “page” views, but it’s still messed up with the “post” views. His words… “the JavaScript libraries haven’t been properly enqueued according to WordPress conventions.” That’s over my head, but there it is just in case it helps anyone on this thread…

The whole “not properly enqueued” thing doesn’t make any sense to me: The JQuery call is done in the header of the page as per standard design convention. The problem arises because there are multiple instances of the JQuery library being called from different sources. The same problem often occurs when people use the popular SmoothGallery plug-in and try to implement other JQuery features at the same time – when the other plug-ins are added, the SmoothGallery effects start bugging.

Page and post should act the same way unless the fixes are done in each respective template file (in which case you’re not actually dealing with the problem but somehow circumventing it).

If you figure out a solution, please tell me about it so I can implement it.

Does this mean: remove

bkLib.onDomLoaded(nicEditors.allTextAreas);

from comments.php
as a workaround?

Workaround that works for me:

open typograph/comments.php
delete the first two lines of code (the scripts)
`

bkLib.onDomLoaded(nicEditors.allTextAreas);
`

Great theme! Am having issues with the comments page. There is no option to leave comments, says there is an error, but I’m not sure how, why or where?

First, I love this theme. Over the last two days, I have looked at dozens (and dozens) of themes. I kept coming back to this and will use it for my blog.

Second, the RSS feed in the tabbed box was not working. The RSS links below worked fine, but when you clicked on the RSS tab and then on subscribe to my site, the page was not found and the error was that wordpress/ergwa/rss was not found (or somthing like that). I finally found content 4 in tabbedBox.php and changed /rss to /wp-rss2. This is shown here. <a href=”/wp-rss2.php” title=”Subscribe to the RSS Feed” rel=”rss”>Subscribe to my feed. This made the link work, but I question if it was the right fix. I am not familar with php and did a lot of digging to get to this point.

I am using latest wordpress and your latest theme.

I look forward to your reply.

Thanks, Wayne

Hey Morten. I emailed you earlier. I already had the latest typograph theme. I’m wondering, even if you created it without images, is there a way to add one underneath the actual header? How would one add this coding? The theme is very awesome, but personally, I’d like to add an image to the top left corner where the header lies. Any thoughts?

Comments are closed.