Wordpress 2012 child theme modifications reference

The 2012 theme out-of-the-box is a great place to start for theme development because you have an editable navigation bar, good typography, and a clean layout to start with.

These are my go-to child theme modifications to 2012 when setting up a static website for a client.

Disable automatic word hyphenation
Requires: CSS / style.css
WordPress › Support » How does one stop auto text hyphenation completely

Move the header image above the navigation bar.
Requires: PHP / header.php
Cut the PHP block of code (pictured below) that outputs the header image and paste it above the NAV element that creates the main navigation.

Remove the space above the header image
Requires: CSS / style.css
Add these two CSS styles to your custom stylesheet to remove the spacing above the header image and make it flush with the top of the browser window.

Change the default "Leave a comment" link text
Requires: HTML/PHP | content.php
Go to line 28 on content.php.  Find the leave a reply text on this line and replace it with your wording of choice.

Hide the H1 page title only on pages
Requires: CSS /  style.css
Add the following CSS to hide the page title heading only on pages.  We use this because we want to still have automatic titles display on our single blog posts.

Resources to convert an HTML website to Wordpress

After converting several static HTML websites to Wordpress and XHTML, it's about time that I have some saved resources.  Code snippets are fantastic, working examples are even better.

WordPress Shortcodes: Why You Need Them and How to Create Them
This example shows the basic code needed to create a "wrapper" shortcode that will wrap HTML tags around your content.  After a shortcode has been created, it can be reused at will throughout a website.  Providing shortcodes to clients will make editing their site easier and allow them to integrate design elements without trudging through HTML.

Wordpress does not support shortcodes in widgets by default.  Add the one-line filter code at the bottom of the same tutorial to enable shortcodes in widgets.

CSS Styling Lists
Styled lists with CSS may help you clean up HTML that was left behind from a previous coder. The website I'm converting this month from static HTML to Wordpress had a bloated table layout to achieve links with "bulleted" images.  CSS list styles helped me to clear out all the unnecessary code and replace it with clean, beautiful markup.

Rounded corner layouts with DIVs.

CSS Image Rollover - Stack Overflow
This helped me convert javascript rollovers to pure CSS rollovers, which not only cleaned up the code, but will make it easier to edit in the future.

Box-shadow, one of CSS3′s best new features - CSS3 . Info
After combining the box shadow with a CSS border, I was able to replace a rounded corner box's nested HTML tables with some clean CSS.

CSS Reference: Underline Links on Hover

This code will remove all the underlines from links in their normal state and then underline links on hover. Don't forget to change the hex color code to be the custom color for your links.

a {
color: #d63721;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

CSS blockquote with image slices for rounded corners

CSS tips & tricks

Rounded corners and shadowed boxes
Uses a blockquote with multiple image slices to create a rounded, shadowed box.

CSS: font families
shows examples of the major font families and visual comparisons

Rounded Corners with CSS

CSS Round Corners - Ben Ogle's blog. Yeah!
Good examples, shows how to make a color section for the heading, and shows how to do a thin border on the outside of the rounded corner.

Rounded Corner Generator - CSS Portal
This code is a little bit longer, because the classes are named "rnd_b1" instead of "b1, b2"

It will be much better once Internet Explorer supports the border-radius property in CSS3 as Firefox and Safari do.

CSS Dropdown menu

Free CSS Drop-Down Menu Framework - LWIS.NET
* a clean, professional CSS dropdown menu that saved me a lot of time.
* Easier to work with than other CSS-based drop-down lists
* The default menu colors look great on white pages.

Centered navigation list

Listamatic: Centred list navbar
* Only uses 4 classes to achieve the effect
* "The key is "text-align: center" applied to the UL element."
* Works in IE 6.0.

Creating better CSS stylesheets

CSS EXPLAINED: 6 Excellent tips to become a Master in CSS | TutorialFeed
- Short is better
- Combine, Compress, and Consolidate
- Organize by elements, classes, and IDs
- Always use capital letters for the element_name in selectors - P, not p.

10 Great CSS Selectors you must know | TutorialFeed

Five CSS Shorthands you always love | TutorialFeed
- fonts
- background
- lists
- margins
- border

CSS Floats and the Box Model

CSS Float
- If images have room, they can all line up in a row next to each other.

CSS Box Model
- understanding how margins, borders, and padding work in conjunction with widths.

CSS Layouts

Single and Multi-column layouts
Fixed Width CSS Layouts - Code-Sucks.com

I used #25 for the layout of the wedding site that's currently in development.

This tutorial takes each CSS element one by one and guides the designer through creating a two-column page with CSS (which includes a nav bar and footer).
Simple 2 column CSS layout | 456 Berea Street

Lifehacker link indentation

I'm a big fan of CSS styling on the Lifehacker site. The source links they post at the bottom of article are indented slightly, so I took a look at the CSS. I found this by first highlighting one of these links and the text around it, then right-clicking and selecting "View Selection Source". Then I was able to see that the link was contained within a DIV ID called "related".

To view the CSS, I used the keyboard shortcut Shift + Command + C to view all of the CSS styles in the Firefox Web Developer [Toolbar] Extension.

Here's the CSS style:

div.related { margin: 0 0 20px 20px; }

The left margin of 20 pixels creates the indentation formatting.