Typograph - new 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
Full-time and freelance job opportunities available at Authentic Jobs:
Post a job and reach web professionals everywhere.
December 1st, 2008 at 10:14 pm
This is a great looking wordpress theme - I like the layout.
December 7th, 2008 at 1:05 pm
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!
December 8th, 2008 at 12:49 pm
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:
< ?php wp_list_pages('title_li='); ?>
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:
< ?php wp_list_pages('depth=1&title_li='); ?>
December 8th, 2008 at 2:09 pm
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.
December 15th, 2008 at 9:07 am
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?
December 24th, 2008 at 7:51 am
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.
December 24th, 2008 at 11:12 am
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.
December 24th, 2008 at 4:08 pm
Hello!
It looks like contributors’ names are not displayed by default. Can I fix it?
December 25th, 2008 at 11:35 pm
“OIOPublisher”…? Looked for it. Couldn’t find it…
December 26th, 2008 at 12:07 am
Here it is: http://www.oiopublisher.com/
December 26th, 2008 at 3:15 pm
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
December 27th, 2008 at 12:16 pm
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.
December 27th, 2008 at 5:40 pm
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
December 27th, 2008 at 5:48 pm
@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.
December 27th, 2008 at 6:02 pm
@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.
December 27th, 2008 at 6:15 pm
@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.
December 27th, 2008 at 6:25 pm
@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.
December 28th, 2008 at 5:32 am
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 …
December 28th, 2008 at 7:18 am
Here is the link for the theme : http://one4v.com/ar/wp-content/uploads/typograph.zip
December 29th, 2008 at 1:37 pm
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
December 30th, 2008 at 11:49 am
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.
December 31st, 2008 at 12:17 am
Great job! I love how you made the theme black with orange highlights. Very stylish.
December 31st, 2008 at 1:22 pm
Thanks Morten. Happy New Year from New York City!
George
January 1st, 2009 at 10:38 am
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.
January 2nd, 2009 at 2:12 am
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.
January 2nd, 2009 at 10:25 am
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…?
January 2nd, 2009 at 11:06 am
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.
January 2nd, 2009 at 11:35 am
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?
January 2nd, 2009 at 12:25 pm
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.
January 2nd, 2009 at 4:58 pm
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
January 2nd, 2009 at 4:59 pm
…oh, and here’s some info on the plugin:
http://tribulant.com/products/view/1/wordpress-mailing-list-plugin
January 2nd, 2009 at 10:09 pm
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.
January 4th, 2009 at 2:04 pm
@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.
January 5th, 2009 at 12:16 am
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.
January 5th, 2009 at 12:33 am
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.
January 5th, 2009 at 12:36 am
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.
January 5th, 2009 at 12:58 am
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.
January 5th, 2009 at 1:17 am
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…
January 5th, 2009 at 1:30 am
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.
January 5th, 2009 at 11:08 am
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
January 5th, 2009 at 11:33 am
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!
January 5th, 2009 at 1:20 pm
Good luck with it!