CSS Techniques: Using Sliding Doors with Wordpress Navigation This sliding doors CSS hack allows you to create sophisticated tabs for your navigation bar. Sadly, WordPress core functions wp_list_pages() and wp_list_categories() don’t allow you to add the required span tag to use this technique. We are going to see how to proceed in order to use sliding doors in our WordPress theme. Sliding doors, why? There’s many articles available on the web about the sliding doors technique, so I’m not going to talk a lot about it. For people who don’t already know this famous hack, here’s a quick example. Let’s build a typical navigation list: <ul id="nav"> <li><a href="#">link n°1</a></li> <li><a href="#">link n°2</a></li> <li><a href="#">link n°3</a></li> </ul> If we apply, via CSS, background images to our links in order to make this menu prettier, we’ll quickly see a big problem: We must add a fixed width to the links, otherwise the image will be truncated if the link is too short, or the link will overflow the image if its width is too long. To list your pages:
WYSISYG Wordpress Theme Generators Share I’ll go out on a limb and say WordPress is one of the finest software applications to come out this millennium. Its put the power of the press and the ability to reach thousands (or millions) of people in the hands of the people live never before. People from every walks of life can create powerful websites without needing to know a shred of code and it’s all open source. It just so happens that are a few projects in this space already…. ThemeDreamer is plug-in extension for DreamWeaver that allows users to open WordPress themes in the DreamWeaver environment and edit them as if they were normal XHTML. Yvoschaap’s WpThemeGen is probably the most popular app in this space. WPpal.com is the competitor to Yvoschaap’s web app. While all these solutions are great for amateurs, advanced users still dream of the day where there will be a DreamWeaver-like application for WordPress and other CMS’.
Wordpress Theme: IAMWW w2 DnD IAMWW w2 DnD is built on a grid layout, with a white, gray and blue color scheme. Specific plugins and editing the theme files are not required. The theme is completely “Drag n’ Drop.” Hence the name, DnD. Features Fixed width with an overall width of 920pxWidget readyHorizontal top navigationA grid based layout with one right-hand sidebar that also contains two smaller sub-sidebarsA sliding drawer or shelf for browsing categoriesAn about me or about site blurb at the top of the sidebar that is only displayed on the home pageIncludes an archives page templateCompatible with WordPress 2.0+No plugins are requiredValid (X)HTML and CSS Preview Version History 03.06.08 – v0.85 – Added a 10px padding to the container so that content is not slammed up against the browser edges. Usage The IAMWW w2 DnD WordPress theme is released under the Creative Commons Attribution v3.0 license. Support Please use the IAMWW Forums for support requests and reporting bugs. Translations IAMWW w2 DnD in French Downloads
Wordpress Snippets 30+ (More) Most Wanted Wordpress Tips, Tricks and Hacks | Wordpress Most of the WordPress blogs look more or less similar these days, to stand uniquely out from the rest, you have got to tweak it. And by tweaking, we mean really getting your hands dirty down on the blog theme and PHP codes. We’ve previously showcased more than you can perform on your blog but we quickly realized there are still a lot of impressive WordPress tricks, hacks and plugins out there that we thought are really great. So as a sequel, here’s another . More WordPress related articles we’ve previously written: Most Wanted WordPress tricks and hacks 49 Most downloaded WordPress themes WordPress themes for Video Blogging 16 WordPress premium themes that don’t suck 20 Desktop blogging clients You’ve Installed WordPress, So What’s Next? Full list after jump. Use the Accordion plugin in jQuery UI to create an Apple-alike WordPress sidebar. Creating tabs on WordPress sidebar with Yahoo! Every blog visitor has different habits, but many tend to ignore sidebars because they are always the same. <?
Tutoriels: Créez le design de votre blog Wordpress avec Photoshop! Après la création des templates pour un thème WordPress et les tutoriels sur le référencement pendant l’été, il est temps d’aborder toute la partie design du blog. Comment réaliser son propre design de blog ? Comment l’intégrer ensuite au code ? Ce sont tous les aspects que nous allons aborder dans les prochaines semaines avec cette nouvelle série de tutoriels largement tournés autour de Photoshop et de l’intégration XHTML et CSS. Ainsi, ces tutos vont s’organiser autour du schéma suivant: 1. Bien sûr, tous ces aspects vont représenter plus d’un tutoriel pour chaque point, mais ça vous donne déjà une trame afin de mieux comprendre les différentes étapes de la réalisation d’un design de blog. Bien entendu, on partira d’un design que j’ai personnellement réalisé. De quoi avez-vous besoin pour suivre ces tutoriels ? Comme pour les précédents tutoriels, cette page sera mise à jour au fur et à mesure de la rédaction des articles. OK ? Tutoriel n°1: Tout commence avec un croquis !
WordPress theming for beginners, an introduction WordPress has become the most popular blogging platform for a while now, and you’re probably using it if you write on a self-hosted blog. One of the key reasons of WordPress success is its templating system. In fact, thousands of free WordPress themes are available on the Internet. However, if you want a truly unique theme, you’ll need to create your own. The basics WordPress themes are the standard layout system that define your blog’s appearance. WordPress page structure Most of the time, a WordPress page is composed of the header, the sidebar, the content and the footer. Template files The above chart shows what files are used depending on the page you are using. The Loop In WordPress, the loop is a set of functions used to display your posts and everything related to the posts (title, tags, author, categories,…). Template Tags Template tags are small PHP snippets that are used to display info on the blog. Functions
Create a Vibrant Modern Blog Design in Photoshop | Blog.SpoonGraphics This post was originally published in 2008 The tips and techniques explained may be outdated. Taking a closer look into the world of web design this tutorial will cover the process of designing a vibrant and colourful modern blog layout in Adobe Photoshop. Beginning with a blank canvas we’ll go through the process of creating the entire structure and effects from scratch. This particular design is one I'm currently producing as a WordPress theme for Springy Developments, in the future we'll take a look at the coding process and see how the site is pulled together into the final product. Bear in mind that during the original creating of the concept, the process was much less clear cut that the following tutorial steps. Open up Adobe Photoshop and create a New Document. The first area I tend to work on is the page background, this is where a little interest can be introduced which fills out the space for those on higher resolutions.
40+ Most Wanted Wordpress Tricks and Hacks Have you ever came across a WordPress blog, saw something you liked, and questions like ‘how they did that‘, ‘is that a plugin or hack?‘, ‘where can I get those cool mods‘ begin to pop? Well, it’s really pretty normal because most of us did the same thing. For this article we’ve spent time with some 14 WordPress bloggers, finding out what kinda hacks and plugins they are really looking for to enhance their blog in any aspect. While you are at it, here’s few more WordPress related articles we’ve previously written: Display categories in horizontal Drop-Down menuInstead of using your categories in sidebar, you can put them up on the navigation bar, dropping down the sub categories in second-level drop down. Read also: More WordPress Related Articles Author: Hongkiat Lim