WordPress Snippet #2: Style the login page

The Wordress Snippets series of posts will give you some useful code snippets for use in your projects – just copy and paste (but try to understand how they work!).

This snippet will add a stylesheet to your login page so that you can style it fully, and also change the default WordPress logo link (to wordpress.org) and title text to something of your choosing. Add it to functions.php in your template.

Including CSS & JavaScript in wordpress posts using Custom Fields

If you have ever tried to include code in a wordpress post you may have gone through hell trying to get it to output correctly; WordPress’ built in functions for formatting text (autop and texturize) mangle your code making it non-functional.

I’ve tried many solutions in the past, such as disabling wordpress’ formatting functions, however, this is not ideal -especially if you rely on them to clean up your text and properly encode characters. On top of that its not even valid to include certain things such as CSS in the body of a xHTML document.

The solution? Custom fields. This post will show you how.

Creating ‘Web 2.0′ Layouts using strips

I’ve seen the ‘web 2.0′ layout (full width background, centred content) done in some pretty wacky and different ways, the worst being a background image and then fixed height sections laid on top (if the content wraps or the text is resized…bam..broken layout).

Because of this I am going to demonstrate the method I use – content strips. Hopefully this will be useful to CSS beginners who want to code this type of layout.

Creating an accessible yet sexy search box with CSS

Search boxes: integral parts of many websites but often neglected in terms of markup and style. When considering both accessibility and semantics, marking up a a search box can be a little awkward depending on the look you are trying to achieve.

In this post I will suggest some methods of marking up your search boxes, and show a neat way of styling it using css and a few images.

Easy jQuery Pull Quotes

Pull quotes, lift-out quotes, or call-outs are a handy method of drawing reader’s attention to a section of text. Recently, on a couple of client projects, I’ve seen the need to enhance large blocks of text so the user could skim read them without missing the really important parts. Pull quotes seemed perfect for this, so I created a small jQuery script to take care of them.

In this article I demonstrate an easy method of creating pull quotes from a block of text using jQuery (a JavaScript library), CSS, and the html span element. I hope you find this method useful.

Setting your own standards; Keeping your mark-up consistent

Website coders often find themselves working on a variety of web sites, and when starting out, and learning new methods and techniques everyday, the mark-up used can often be messy, random, and inconsistent.

When working with someone else on a project the problem can be even larger, especially when you both have unique ways of doing things, which can cause confusion, drastically increasing project development time.

But how can this be avoided? This article focuses on setting you own standards, creating re-usable snippets of code and web documents, and the benefits of doing so.