EricJHansel.com

HTML5 Responsive Site Redesign

Eric Hansel — Tue, 24 Jan 2012 04:46:05 +0000

I’ve update my site with a new HTML 5 responsive design. I’m using the Thematic framework as a foundation and my Thematic320 responsive theme was used as a starting point for this design. There are still a couple quirks to work out with the menu at smaller sizes and some of my images didn’t regenerate correctly but all in all I think it’s a good example of what can be done with my Thematic320 theme. This is still some what of a work in progress so let me know if you find any bugs or strange issues in the comments below.

I’ll also be working a paid version of the Thematic320 theme that will include a more modern style, thumbnail support, sliders, shortcodes and a custom options page. So stay tuned.

CSS 3 Animation Experiment

Eric Hansel — Mon, 12 Dec 2011 04:05:07 +0000

I’ve been playing around with CSS 3 animations lately and here’s something simple that I came up with. http://www.ejhansel.com/cssAnimation/

I wouldn’t recommend putting something like this live on any site(ahh, maybe a one page poster style site), but it’s nice to take a look at and get an understanding for how it’s done.

CSS 3 animations are pretty simple to set up and it’s great that they work without JavaScript. There are a lot of instances that I think using CSS Animations make a lot more sense than using JavaScript, but this example could be reproduce with much less code if I were already loading in jQuery.

As of writing this post CSS 3 Animations only work in the newest versions of Firefox, Chrome and Safari, I haven’t tested I.E. 9. Firefox and Safari seem much smother than Chrome which seems strange to me. I’ve also added a CSS 3 mask to the whole thing which is only visible in Safari and Chrome.

Firefox seems to have problems with animating span tags so if you look at the code you’ll notice I’ve used div tags around the letters in the H1 tag. I’d never recommend doing this, but this is just an experiment.

If you’d like to play around with this CSS 3 Experiment you can download the files here.

View the experiment here.

CSS Selectors You Should Be Using NOW!

Eric Hansel — Fri, 08 Jul 2011 23:43:17 +0000

Here’s a list of CSS selectors that you should be aware of and using in your web design projects. This isn’t all of the CSS selectors, it a list of the selectors that I think are most useful and are supported by the majority of browsers including I.E. 7 and up.

With I.E. 6 losing browser share day after day, I believe it’s far past time to start using these CSS selector in your projects. By using them you will save time and produce lighter weight html pages.

ID

#value { style }

The following will style the text red in a div with an ID of idtest.

#idtest { color:red; }

Test for ID.

Class

.value { style }

The following will style the text black in all divs with a class of classtest.

.classtest { color:black; }

Test for ID

Type

value { style }

The following will give all H1 tags a black background. You use this selector to style lists, forms, headers and more.

h1 { background:black; }

Title Test

Universal

* { css }

The following will give every element on the page a white background.

* {background:white;}

This can also be used to style every element within a parent element.

The following will give every element within a DIV with an id of main a 20px margin.

div#main *{ margin:20px; }

Descendent

X Y { style }

The following add a red background to every paragraph in a div with an id of test. Other element within the div will not be effected.

div#test p { background:red; }


	Descendent Test
	
		List item 1
		List item 2

Adjacent Siblings

X + Y { style }

The following will style the first paragraph after the h1 tag, the second paragraph will not be effected.

h1 + p { text-indent:5px; color:red;}

Hello Adjacent Siblings

Child

X > Y { style }

The following adds a black background to the paragraphs that are immediate children of the body. Paragraph two will not be effected

body > p { background: black;}

Paragraph one

Paragraph two

Paragraph three

General Sibling

X ~ Y { style }

The following will add a black background to each sibling paragraph that follows a H1.

H1 ~ P { text-decoration:underline; color: red; }

Paragraph text not styled.

Header One

Header Two

Paragraph text styled.

Paragraph text not styled.

Paragraph text styled.

First-Child

:first-child { style }

The following will add a black background to the first list in an un-ordered list

li:first-child{background:black;}


	Styled list item.
	Unstyled list item.

First Letter

:first-letter { style }

The following will add a black background to the first letter in a paragraph.

p:first-letter{background:black;}

First letter test.

First Line

:first-line { style }

The following will add a black background to the first line in paragraph. The line after the break will not be styled.

p:first-line{background:black;}

First line styled.
This line not styled.

Existense

[att] { style }

The following will give every element with a “role” attribute a black background.

[role] { background:black; }

Test for Existence.

Equality

[att=value] { style }

The following will give every element with a “role” attribute that has a value of “imequal” a red background.

[role=imequal] { background:red; }

Test for Equality.

The following CSS Selectors are not supported by I.E. 6-8.

Nth Child

No I.E. 6-8 support
:nth-child(n) { style }

The following will add a black background to the third list item in an un-ordered list, starting from the beginning of the list.

li:nth-child(3)


	Unstyled list item
	Unstyled list item
	Styled list item

Nth Last Child

No I.E. 6-8 support
:nth-last-child(n) { style }

The following will add a black background to the second to last list item in an un-ordered list, starting from the end of the list.

li:nth-last-child(2)


	Unstyled list item
	Unstyled list item
	Styled list item
	Unstyled list item

Last Child

No I.E. 6-8 support
:last-child { style }

Before

No I.E. 6-8 support
:before { style }

The following will add the word “Hello” to the beginning all h1 tags.

H1:before {
    content: "Hello ";
}

After

No I.E. 6-8 support
:after { style }

The following will add the word “Goodbye” to the end all h1 tags.

H1:after {
    content: " Goodbye";
}

Contact Form 7 WordPress Plugin with CAPTCHA

Eric Hansel — Thu, 02 Jun 2011 04:01:08 +0000

I received a question on the post I wrote about styling the Contact Form 7 WordPress Plugin that asked “did you happen to come across the captcha? How do you integrate it?”. Contact Form 7 has built in support for the Really Simple CAPTCHA Plugin and it’s rather easy to integrate and style.

Contribute

If you use Contact Form 7 think about contributing a buck or two so it can keep growing. I don’t make any money from this link, but I use the plugin so it’s worth saying.

In this post I’m going to show you what’s needed to get the Really Simple CAPTCHA Plugin working and how to style it so it looks like it belongs in my previous post about styling the Contact Form 7 Plugin.

The Really Simple CAPTCHA WordPress Plugin

The first thing you need to do is install the Really Simple CAPTCHA Plugin. I’m assuming you’ve already installed the Contact Form 7 WordPress Plugin and have styled it according to my earlier post. If not, install it and read this post. If you already have the Contact Form 7 installed and styled continue reading.

Login to your WordPress installation.
Go to “Plugins” and click “Add New”.
Type “Really Simple CAPTCHA” into the search form and click “Search Plugins”.
When the page reloads find “Really Simple CAPTCHA” in the list of plugins and click on “Install Now”.
Click “OK” when you’re asked “Are you sure you want to install this plugin?”.
Once the page reloads click “Activate Plugin”.

After the Really Simple CAPTCHA installs and the page reloads it’s time to add it to your contact form.

Add the Really Simple CAPTCHA to a Contact Form 7 form

Under “Contact” click “edit”.
When the page reloads click on “Generate Tag”.
Once you click on “Generate Tag” a drop-down menu will appear.
Click on “CAPTCHA”. Here’s the confusing part. After you click “CAPTCHA” a bunch of fields and two shortcodes are generated. At the bottom of all this confusion you’ll see 2(two) brown boxes, these are your Shortcodes. At a glance they look the same, but they are not. The first shortcode starts with captchac, and it created the CAPTCHA. The second starts with captchar and It creates the field that you type the CAPTCHA into. You need both Shotcodes.
You should see something like this. [captchac captcha-758] and [captchar captcha-758]
Write down the number that’s generated. In this case it’s “758”, but your number may be different (I’m not sure if the number matters, just make sure it’s the same).
If you’ve used my post on styling the Contact Form 7 this next part should be pretty easy. Just above the < li id=”submit” > add this code: (make sure you replace “758” with the number you wrote down).
```
[captchac captcha-758]
```
Right below the line you just added add this code (Again replace 758 with the number you wrote down):
```
Enter the Above Text(*)[captchar captcha-758]
```
Click “Save”. You now have a CAPTCHA in your form. Go to your Contact page and check it out, but continue reading because you’re not finished. It looks good, but there’s one problem, if you click on the text area to type in the CAPTCHA the form is beneath the “Enter the Text Above” label.
No problem though, we can fix this pretty easily with a bit of CSS. Locate the CSS style that you used to style the Contact Form 7 plugin in your CSS file.
Below the Contact Form 7 style we’ll add some style for the CAPTCHA. We want to get rid of the bottom margin on the CAPTCHA so it doesn’t look so out of place with the rest of the form. Add this
```
#contact p.captchac{
	clear:left;
	margin:0;
}
```
Now we need to adjust the text indent on the CAPTCHA input form. After the CSS you just added, add this
```
#contact li.captchar .wpcf7-form-control-wrap input{
	text-indent:130px;
}
```
Double check your contact form and make sure it looks ok. If it does, your all set, if not leave a comment below and I’ll try to help you as much as I can.

Open Firebug in a new Window

Eric Hansel — Fri, 27 May 2011 03:44:04 +0000

I’ve been using the Firefox Firebug plug-in for at least 5 years now and I couldn’t imagine building websites without it. I’ve used the web developer tools that come with Safari, Chrome, and Opera but I keep coming back to Firebug. I’m comfortable with it and I seem to be able to edit CSS faster with Firebug. I’m not saying it’s better or faster than any of the other dev tools, I’m just saying I prefer it (Though, the latest version of Chrome’s web dev tools are so good, I may actually switch from using Firebug and start using Chrome). Firebug is probably the only reason I still use Firefox on a regular basis.

Recently I’ve started thinking and designing more around mobile. I’ve played around with jQuery Mobile and I’ve designed a few mobile sites with it. I’m now looking into responsive “One Web Design” and I’ve been frustrated with Firebug sitting in the bottom of my browser. Both Chrome and Safari have a window Icon that makes it easy to pop the dev tools in and out of the widow pane. Firebug doesn’t, but it’s still possible to pop Firebug into it’s own window.

How to open Firebug in its own window.

This seems silly to me, like I said I’ve been using Firebug for years and I’ve never opened it in a new window until recently. If you want to open Firebug in a new window and have it installed on Firefox , go to “Tools” > “Firebug” > “Options” > and make sure “Always Open In New Window” is selected.

That’s it, you may now open Firebug in a new window and re-size your browser as small as you like.

Thematic 320 and up Update A Responsive WordPress Child Theme

Eric Hansel — Mon, 23 May 2011 04:38:08 +0000

Over the weekend I’ve worked a bit to update my Thematic 320 and up child theme. It now includes most of the style that the Thematic Frame Work comes with and incorporates 4 different screen size media queries. (Check it out and resize you browser, or go to it on your phone and tablet.)

UPDATE

August 29, 2011. The theme is pretty much ported entirely to HTML5. I’m sure there are improvements that can be made, but I wouldn’t hesitate to use this theme in a production environment. I’m currently redesigning this site with this theme as a basis. Download it now and let me know if you have any improvements. Download the Thematic 320 and up theme here.

Thematic 320 and up still needs a lot of work. Like I said before I’d like to see Thematic give us an HTML/XHTML option, but until then we can use child themes to create HTML5 pages. I’ll continue to work on changing things over to HTML5 and updating as I go.

What’s changed from my original post?

The basic look and style of Thematic has been added. I’ve combined most of Thematic’s style sheets into the main style sheet (style.css). I did this because I don’t like overriding styles unnecessarily.
Almost everything has been converted to ems. Seems like I’m going backwards here, I quit designing in ems a couple years ago, but I think this is the way forward.
I’ve rebuilt the navigation (in functions.php) to use the nav tag. There might be a better way to do this and if you have a better way I’d love to hear it. I’m still including the “skip to content” link, but if I rebuild everything in HTML5 this will most likely go away.

What still needs work?

More of the theme needs to be converted to HTML5. I’m also still including id and class, but this will most likely change to role as I move forward, no need to add unnecessary markup.
I haven’t decided on the look of the navigation. I think on smaller screens the nav needs to change to a vertical look. Otherwise if you have more than 4-5 pages the nav will look a bit strange.
I haven’t decided what to do about the dropdown navigation. I’m not sure how to handle it on smaller screens. I’d love to hear your thoughts.
Line height still needs some work.
I haven’t tested things like the calendar in asides.
I haven’t tested at all in Internet Explorer. The theme is set up to easily correct problems in I.E. without adding I.E. specific style sheets.

You can check out my original post here.

Check out the Thematic 320 and up demo here (Make sure you re-size your browser).

Download the Thematic 320 and up theme here.

Thematic 320 and up

Eric Hansel — Fri, 20 May 2011 02:55:01 +0000

What is 320 and up?

The 320 and up project page explains it like this “Inspired by Using Media Queries in the Real World by Peter Gasston, ‘320 and Up’ is a device agnostic, one web boilerplate.”

UPDATE

I’ve updated my original design and added Thematics default style, you can read more about it in this post “Thematic 320 and up Update A Responsive WordPress Child Theme”

320 and up was developed by Andy Clarke, and is a great starting point for building websites that utilize the latest technologies in modern web browsers. It can be used as is, or as an extension of the HTML5 Boilerplate. I don’t think I can really do it justice or explain it any better then the project page does, so head over to http://stuffandnonsense.co.uk/projects/320andup/ resize your browser a few times and view the page source.

What is Thematic 320 and up?

I’ve been using the Thematic framework for a few years and I’ve built a lot of sites, like this one, using Thematic. The Thematic community is great and the development has been as good as you can expect for something that’s completely free and open source. Needless to say, I believe in Thematic. I also believe that the future of web design lies in something like 320 and up, a “one web boilerplate”.

So I’ve started working on a combination of the two and came up with Thematic 320 and up.

Thematic 320 and up isn’t a finished project! Again, Thematic 302 and up isn’t a finished project! As I was working on it, I hesitated a bit, and wondered if I should even release it. Ultimately I decided awareness is better then nothing, so I’m release it.

320 and up uses the latest in HTML5 and Thematic doesn’t. Surely I could copy over all the files I need to convert a Thematic child theme to HTML5, and I even copied over the header file and started marking it up with HTML5. I could easily remove the Thematic access and build an appropriate nav with HTML5, I could copy over the single.php file and add appropriate markup. But doesn’t doing all this extra work defeat the purpose of using a framework and building a child theme? I don’t know, maybe. I’m torn between the two. In one hand I love working with Thematic and I’d like to start using it with the latest HTML right away. On the other hand I’d really like to see Thematic offer a XHTML/HTML checkbox in its option page and spit out the code depending on what’s selected. I think an option like this would really set Thematic apart from other Frameworks that I’ve seen.

So why release this Child Theme?

If you’re not sold on HTML5, you can still use most of what I’ve done to start building better websites. You can rework what I’ve done and keep the DOCTYPE as XHTML while still use the if IE statements, the javascript and the media quires.

What the Thematic 320 and up Child Theme does

It changes the Thematic doc type to HTML
Adds the If classes to the Thematic HTML tag.
Changes the Thematic meta charset.
Loads the multiple linked style sheets that 320 and up uses (it’s also set up to use the single style sheet option).
Loads all JavaScript files used in the 320 and up boilerplate with one difference, I’m relying on Thematic to load jQuery, so It loads in the header.
Changes the div id=”Header” to a HTML5 header tag.

What the Thematic 320 and up Child Theme doesn’t do

It doesn’t change the entire markup to HTML5, doesn’t add in micro-formats, and doesn’t add WAI-ARIA accessibility. I really think it would be great if Thematic would offer this as an option.
Currently it doesn’t include any style in the different media queries .css files. I’ll work on this and update as I go. I’m planning on using this as a starting point to redesign my site once again.

GPL Licensed.
Released under the GNU General Public License, version 2.0 just like WordPress.

Check out the starting point for this Child Theme here. Make sure you view source.

You can download a copy of it here.

Style the Contact Form 7 WordPress Plugin

Eric Hansel — Fri, 06 May 2011 04:10:51 +0000

Contribute

If you use Contact Form 7 think about contributing a buck or two so it can keep growing. I don’t make any money from this link, but I use the plugin so it’s worth saying.

Want to use CAPTCHA?

Contact Form 7 WordPress Plugin with CAPTCHA

I’ve been working on a new freelance site with a fairly simple 4 color design. This site, like all sites that I design needs a contact form. I’ve been using the WordPress Plugin Contact Form 7 for a while now; It works well and accomplishes most of my needs. The site I’m working on has a simple clean design, the focus is on the content and not the design, so I wanted to create a contact form that complimented this simple design.

I love the new default theme (Duster) that the next version of WordPress might ship with. In particular I really like the expandable search and the comments form. The Duster comments form is where my inspiration for this contact form came from.

Installing Contact Form 7

Installing WordPress plugins couldn’t be easier. Always make sure you have a recent backup of your database before you install or update anything on your site. After you backup you site, here’s how to install Contact Form 7.

Log-in to Your WordPress website.
Under “Plugins” click on “Add New”.
Under ”Search” enter “Contact Form 7” .
After the page reloads Click on “Install Now” under Contact Form 7.
Click “OK” when you get the “Are You Sure” alert.
After the plugin downloads click “Activate Plugin”.
You’ll now have a “Contact” tab in the menu on the left side of the screen.
Expand the “Contact” tab down if it isn’t already and click on “Edit”.
We need to edit what’s in the “form” text area so we can add some nice clean style to it.

Replace the code in the “form” textbox with the following code.


Your Name(*) [text* your-name]
 
Your Email(*)[email* your-email] 
 
Subject[text your-subject] 
 
Your Message[textarea your-message] 
 
[submit "Send"]

Click “Save”!!!!

Style the Contact Form 7 Plugin

After you add the appropriate markup to the Contact Form 7 “form” textarea, the rest is a breeze. Here’s the code to get it looking good.

There are a few things you need to keep in mind.

You may need to adjust the width of the input and textarea.
Make sure you change the border color of the input, textarea, and .text to match your site.
Change the focus state to match your site.
Change the gradient of the submit input to match your site.
I’d like to change the z-index of the input and textareas to act more like the Duster theme, but the Contact Form 7 plugin adds an unnecessary span around them that doesn’t allow this to happen without javascript. I didn’t see the use of javascript as a necessary step and like it this way just the same.

The CSS

#contact{
	list-style:none;
	margin:0;
}
#contact li{
	float: left;
    height: 60px;
	margin:0 0 20px;
    position: relative;
    width: 540px;
}
#contact li .text{
	background: #F0EFEF;
	padding:15px 10px 10px 0;
	position:absolute;
	z-index:100;
	min-width:85px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	text-indent: 5px;
}
#contact li .required{
	position:absolute;
	right:10px;
	top:10px;
	z-index:100;
}
#contact li .wpcf7-form-control-wrap{
	position: absolute;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
	background:#fff;
	border:solid 5px #F0EFEF;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:15px 10px 25px;
	width: 509px;
	text-indent:95px;
	z-index:100;
	margin:0;
}
#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
	background:#F0EFEF
}
#contact li .wpcf7-form-control-wrap textarea{
	line-height: 28px;
    padding: 10px;
	height:200px;
}
#contact li#message{
	min-height:220px;
}
#contact li#submit input{
	color:#fff;
	text-decoration:none;
	margin:10px 30px 0 0;
	background:#09b2f3;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69d2f9', endColorstr='#09b2f3');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#69d2f9), to(#09b2f3));
	background: -moz-linear-gradient(top, #69d2f9, #09b2f3);
	border:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-0-border-radius:3px;
	border-radius:3px;
	display:block;
	padding:10px 25px;
	text-align:center;
	text-shadow:0 1px 0 #09b2f3;
	text-transform:uppercase;
}
#contact li#submit input:hover{
	background:#69d2f9;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#09b2f3', endColorstr='#69d2f9');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09b2f3), to(#69d2f9));
	background: -moz-linear-gradient(top, #09b2f3, #69d2f9);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	color:#06506c;
	text-shadow:0 1px 0 rgba(255,255,255,.25);
	text-transform:uppercase;
	cursor:pointer;
}
div.wpcf7-validation-errors {
    clear: left;
}

The Outcome

Update

To get this working in I.E.7 you need to add this in your I.E. 7 specific style sheet.

#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea {
	position:absolute;
}

WordPress Thematic Child Theme Folder Structure the Right Way Part 1

Eric Hansel — Thu, 21 Apr 2011 03:59:54 +0000

NOTE:

I’m using Thematic as an example for this post, but most of what I’m going to cover can be carried over to any theme framework.

Second post in a series about Working with Thematic Child Themes

Setup a WordPress Thematic Child Theme
WordPress Thematic Child Theme Folder Structure the Right Way Part 1

So you’ve decided to use Thematic as your WordPress parent theme and your ready to set up a kick ass child theme.

Here’s how I do it! I’m not going to claim this is the best way, or even the right way to set up a Thematic child theme. I’m not sure there’s a “best way” or “right way” to set up a Thematic child theme, but I’ve built quite a few, and this is the folder structure that I find easiest to use.

The Thematic Child Theme Basics

I’m assuming you’ve already downloaded the Thematic Theme from the WordPress directory and created a child theme.

If you need help setting up a Thematic child theme please visit my previous post on the subject. Setup a WordPress Thematic Child Theme

NOTE:

Like working with the latest and greatest, downloaded the latest SVN copy of Thematic, open up the terminal and copy this into it. svn checkout http://thematic.googlecode.com/svn/trunk/ thematic-read-only

After setting up your Thematic child theme the folder structure should look something like this.

MyKickingCoolSite
- functions.php
- readme.txt
- style.css

The Style Sheet style.css

Your edited child theme style.css style sheet looks something like this.

/*    
Theme Name: My Kicking Cool Site Theme URI: http://www.mykickingcoolsite.com 
Description: My kicking cool site that I love to spend lots of time with. 
Author: My Nmae Author URI: http://www.mysite.com 
Template: thematic
Tags: Two Column, Right Sidebar, Right Aside, Custom Header . 
Thematic is © Ian Stewart http://themeshaper.com/ 
My Kicking Cool Site @ My Name http://www.mysite.com . 
*/  
/* Reset browser defaults */ 
@import url('../thematic/library/styles/reset.css');  
/* Apply basic typography styles */ 
@import url('../thematic/library/styles/typography.css');  
/* Apply a basic layout */ 
@import url('../thematic/library/layouts/2c-r-fixed.css');  
/* Apply basic image styles */ 
@import url('../thematic/library/styles/images.css');  
/* Apply default theme styles and colors */ 
@import url('../thematic/library/styles/default.css');  
/* Prepare theme for plugins */ 
@import url('../thematic/library/styles/plugins.css');

As you can see most of the styles are still being imported from the Thematic parent theme.(../thematic/ points back to the Thematic parent theme). This is great if you don’t need to do much editing to get your custom theme up and running. If that’s the case great, start adding your custom style below the last @import url.

If you’d like to learn how I create a completely customized child theme that I can easily pull components from to create other completely unique child themes keep reading.

Major edits to a Thematic child theme.

When I’m making a lot of edits to a child theme I don’t like overriding styles. For one, overriding styles can be a lot more confusing when editing your CSS files and if done wrong, it will add extra HTTP requests and slow your site down. Also you can combine a few of the Thematic style sheets (or all of them) to make your site even faster. Thematic uses @import to include style sheets, I’m not going to go into the pro’s and con’s about @import, but I will say this, “less is more, always when it comes to the speed of a website”.

NOTE:

This tutorial isn’t about combining style sheets. I want to keep the focus on folder structure.

Much to the opposite of what I like to do with my CSS files, I like to break my functions up rather then including everything in functions.php. If you wanted to, you could put everything in your functions.php file, but by breaking your functions up into separate files you can easily include only the files you need in the projects you’re currently working on. For example If I’ve built custom images and thumbnails into a theme and I also want to include them in another theme, I can easily copy the file over to the new theme and simply import them into my functions.php file. Sure I could find that function in my functions.php file and copy it from there, but it can easily become a problem if I have a few thousand lines of code in my functions.php file.(If you’re lost here, bare with me, I’ll explain in further detail later in the tutorial)

New Child Theme Folder structure.

Personally I like to stick with the same folder structure that Thematic uses. So In your child theme create a folder called “library”.

Your folder structure should now look like this.

MyKickingCoolSite
- functions.php
- library
- readme.txt
- style.css

Now, inside the “Library” folder create the following folders:extensions, images, layouts, scripts, styles (extensions if you plan on adding features like thumbnils, shortcodes and extra widget areas )

Your folder structure should now look like this.

MyKickingCoolSite
- functions.php
- library
  - extensions
  - images
  - layouts
  - scripts
  - styles
- readme.txt
- style.css

Populate The Library Folders

Next time in part#2 I’ll show you how to populate the Library folders and you’ll learn how to create extensions that you can easily include in all of you child themes.

If you don’t want to wait until next time you can purchase my Portphotio Plus Thematic Child Theme for $4.99. It has the exact folder structure, extentions, shortcodes and more that I’m writing about in these posts.

Create a Custom Twitter Tweet Button

Eric Hansel — Tue, 19 Apr 2011 04:32:41 +0000

For a project I’ve recently been working on I needed to add share buttons for various social sites. IE: Twitter, Facebook, Reddit, ect. I originally used the premade buttons that are offered by the various social sites, but by the time I was finished, it looked like a huge mess. Not only did it look like a huge mess, I was also loading in JavaScript files for each button and had useless html markup on each page. So, I decided to go a different direction and create custom buttons for each of them.

Here’s how to create a custom Twitter Tweet button with jQuery.

Example

I’m using jQuery for this example(and assuming you’ve already loaded jQuery into your page), but this should be pretty easy to adapt to any JavaScript library.

I’ll also supply code afterwards specifically for the WordPress Thematic framework.

jQuery JavaScript to add the custom tweet button.

I would add this into a separate file and load it right before the closing body tag, but it’s your site and you can load it wherever you’d like.

$(document).ready(function() {
    // Get the  current URL
    var pathname = window.location;
 
   // Create the twitter URL
    var tweeturl = 'http://twitter.com/share?url='+encodeURI(pathname)+'&via=MyTwitterUserName&text=The editable text I want to include automatically in the tweet';
 
    // Place the text on the page. Change body to wherever you want the button placed. 
    $('body').append('+ tweeturl+' ">Tweet This')
});

The important parts:

var pathname = window.location;

If you want the current URL to be tweeted use this. If you want your sites homepage to always be tweeted (not recommended) change this to something like: var pathname = http://www.mycoolsite.com;

http://twitter.com/share?url=

This is the link to Twitter that allows you to tweet something.

&via=

Use this if you want to add an @ to yourself.

&text=

Use this if you want to add custom editable text to the tweet. Something like “I’m checking out this great post on www.mycoolsite.com”

<a id="mycustomtwitterbutton" href="'+ tweeturl+'">Tweet Thisa>

Change the “Tweet This” text to whatever you want, you could add an image here or use CSS to style “mycustomtwitterbutton” and make it look super cool.

What else needs to be done?

I would set it up so your link opens a small pop-up(500 X 400 should work), I know pop-ups have a bad name, but it’s what’s expected with a Tweet button. If you don’t want to open a pop-up I’d at least add a target=”_blank” to the link, like my example use.

Pros: You don’t need to load a JavaScript file from twitter.com.

Cons: If you have sloppy URLs with a bunch of strange characters or parameters this probably won’t work.

That’s pretty much it, keep reading if you want to add this to a WordPress Thematic theme.

Adding a custom Twitter Tweet button to Thematic

All the magic happens in your child themes functions.php file.

Open functions.php in your favorite text editor and add this.

NOTE: You should load this in with a JavaScript file and not directly into the header, but for this post I’m loading it directly into the header.

// Adds some files to the head of my page
function add_to_head(){
 
jQuery(document).ready(function() {
// Get the  current URL
var pathname = window.location;
 
// Create the twitter URL
var tweeturl = 'http://twitter.com/share?url='+encodeURI(pathname)+'&via=MyTwitterUserName&text=The editable text I want to include automatically in the tweet';
 
// Place the text on the page. Change body to wherever you want the button placed. 
jQuery('body').append('+ tweeturl+'">Tweet This')
})
 
}
add_action('wp_head', 'add_to_head');

NOTE: You could also load it into the footer with Thematic thematic_after() hook.

Make sure you edit everything like I did in the above example.

Example

Next time I’ll show you how to make a custom Facebook Like button.