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.
50 replies on “Typograph – new WordPress Theme”
This is a great looking wordpress theme – I like the layout.
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:
Thank you for your reply I was able to change the pages listed in the menu. I’ll try and give the ads a shot.
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.
Hello!
It looks like contributors’ names are not displayed by default. Can I fix it?
@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.
“OIOPublisher”…? Looked for it. Couldn’t find it…
Here it is: http://www.oiopublisher.com/
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 have used a script to mirror the CSS … Here is the link http://www.ahmadh.com/tools/cssmirror/
I’m re changing the web site style …Maybe i will keep this style so i will do again every thing i have did…and maybe the problem will disappear… I will add a link to theme to download if you want to check it …
Here is the link for the theme : http://one4v.com/ar/wp-content/uploads/typograph.zip
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
Morten,
Many thanks with the Calendar widget styling tip. I managed to hack together a rather nice calendar style reminiscent of Massimo Vignelli’s Stendig Calendar (http://www.stendigcalendar.com/).
Thanks again! Your theme is terrific.
Great job! I love how you made the theme black with orange highlights. Very stylish.
Thanks Morten. Happy New Year from New York City!
George
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.
Thanks for the reply, Morten.
“…It’s possible that by removing the calls to JQuery in the plug-in the problem disappears…”
How do I do this?
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
…oh, and here’s some info on the plugin:
http://tribulant.com/products/view/1/wordpress-mailing-list-plugin
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.
Don’t know what happened but the Tabbed Box died. I did not touch any script or CSS. It’s out of the box with widgets added.
You probably added a plug-in that uses JQuery. Several instances of JQuery end up creating problems in the theme. I’m working on a solution.
I uninstalled cform and a forum and it didn’t fix it. I may have to start all over again. I just started following you on Twitter BTW.
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.
Antonie from Tribulant.com fixed it. Here’s his quote:
“Everything is working fine now.
I didn’t deactivate any plugins though I did have to remove the comments html editor.”
Check it out… http://www.aksb.org
Hey! I totally forgot about NicEdit in the comments. That could definitely cause some problems. I’ll look into it. Thanks for the heads up!
Good luck with 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);
`
it doesn’t like code … take a look here:
http://wordpress.org/support/topic/231538?replies=7#post-946976
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?
@Savannah: Looks like you have a problem with your WordPress install. Try reinstalling WordPress and the theme and see if the problem persists; the has_tag() function should work.
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?
I am closing the comments on this post to consolidate all comments in one place. Please leave future comments on the page for the Typograph theme which can be found here.