Combining these buttons with the WordPress codex is pretty easy. Insert a couple snippets of code and you can easily add the URL and post/page title dynamically to the “Tweets” and “Likes”.

The codes from the WordPress codex that we’re going to use are:

<?php the_permalink() ?> and <?php the_title(); ?>

Two lines of code and you’re all set up. Copy and paste the code below, style as needed to position the buttons how you see fit. For the Twitter Tweet button, don’t forget to replace my username with yours.

Facebook Like Button

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink() ?>&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>

Twitter Tweet Button

<a href="http://twitter.com/share" class="twitter-share-button" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="robbclarke">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Did you find this useful? Wouldn’t hurt to share it with others would it?

This week I’m proud to announce the launch of the new River Valley Arts Alliance website. The website is build on the WordPress content management system, letting the client update the website at their leisure.

The site features:

• an events calendar
• photo slideshow
• photo gallery
• member application forms
• donation forms
• an artist database
• a microsite for their annual Dooryard Arts Festival

The website is going to be a great resources for keeping up to date with RiVA and the arts community in and around the Saint John River Valley. Be sure to check back frequently as we near the festival dates for Dooryard as more events and festivities are announced.

One common question amongst my students when it comes to their CSS is “How do you keep your code clean?” While there are numerous ways to keep your code clean and very readable, there are two sure fire ways to keep it nice and clean and readable.

Use Shorthand

Get rid of any unnecessary code that is cluttering up your code. Do you use margin-top, border-top, padding-top etc. on a daily basis? If so, lose it.

Incorrect

p {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 4px;
margin-left: 5px; } 

You’ve got five lines of code there when you really only need one that will do the same thing.

Correct

p {margin: 10px 5px 4px 5px; }

You’re able to define information for each of the four sides (top, right, bottom, left) in a single line. The end result is something that’s much easier to read and takes up far less space. Each of the numbers represents the four sides (in this order); top, right, bottom, left.

Here are a few other examples of ways to shorten things up…

/** 3 Values - Middle defines right and left **/
p {margin: 10px 5px 4px; }
/** 2 Values - 1st defines top and bottom, 2nd defines right and left. **/
p {margin: 10px 5px; }
/** 1 Value - Defines all four sides **/
p {margin: 10px; }

Document Your Code

The second really really easy way to keep your code nice and clean is to document everything. This will not only help you for when you’re writing it initially but it will also save you lots of time 8 months down the road when the client asks you for changes and you have to go sifting through your code to find the bit that needs changing.

The easiest way to do this is to use comments.

/** HEADER **/
#header {
width: 800px;
height: 200px;
float: left;
background: url(../images/header.jpg); }
/** NAVIGATION **/
ul#nav {
width: 800px;
height: 50px;
float: left; }
ul#nav li {
float: left;
height: 50px; }

For a team of designers and coders, it’s important to talk to each other regularly so that the markup is created in a consistent way, and also to create site standards. You don’t want to have 3 or 4 different coding styles on the same document, it will just get confusing. For example, if someone comes up with way to markup a tab interface for the site, documentation will keep others from duplicating that effort, preventing unnecessary code in the HTML and CSS.

Documentation, including markup guides and style sheet guides, is not just for group efforts — they are just as important for a one-man design team. After all, a year after working on other things, revisiting one of your own projects can feel quite foreign. Trust me, I’ve been there before. Your future self might appreciate reminder of how your CSS is supposed to work, or what pages already have a treatment for a secondary action form button, and it will save you or someone else from appending redundant and unnecessary rules to your CSS. Without proper documentation you can and will spend lots of unnecessary time sifting through code and comparing different parts so it’s always best to document your code to the best of your abilities. Your comments don’t have to be kept short either, if you need to have a few sentences describing what does what, don’t be afraid to do it.

I hope this helps a little bit the next time you sit down to write some code.

Sick and tired of boring old underlines to show that a bit of text is a link? Here’s a really quick bit of CSS to show a dotted underline on your links (like this).

It’s so easy to do this that it hurts. We’re just swapping the underline for a border.

Dotted Underline on Hover Only

a:link, a:visited {
text-decoration: none; }
a:hover {
border-bottom: 1px dotted #000; }

What this does is remove the underline from the text so that when it’s not being hovered over there’s no underline. On hover, the dotted border appears.

Dotted Underline At All Times

a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #000; }

This removes the underline and replaces it with the dotted border at all times.

Obviously a dotted border isn’t the only option out there. Play around with the other options and see what looks good and fits your site the best. Here’s the list of all of the types of borders that you can do.

CSS Border Types

p.solid {border-style: solid; }
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.inset {border-style: inset; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }

If you want to dynamically generate the URL of the page/post that you are currently viewing then all you need to enter is:

This code generates and displays the current URL, which is great for submitting articles to Digg, Facebook, Twitter etc. etc.

What a big sigh of relief it was when I found that. The funny thing is that it’s been staring me in the face all along.

Various Codes to Generate Different URLs in WordPress

Below is a list of a number of variables used to generate various URLs using WordPress. The variable is on the left and the result is on the right.

admin_email = admin@example
atom_url = http://example/home/feed/atom
charset = UTF-8
comments_atom_url = http://example/home/comments/feed/atom
comments_rss2_url = http://example/home/comments/feed
description = Just another WordPress blog
home = http://example/home
html_type = text/html
language = en-US
name = Testpilot
pingback_url = http://example/home/wp/xmlrpc.php
rdf_url = http://example/home/feed/rdf
rss2_url = http://example/home/feed
rss_url = http://example/home/feed/rss
siteurl = http://example/home
stylesheet_directory = http://example/home/wp/wp-content/themes/largo
stylesheet_url = http://example/home/wp/wp-content/themes/largo/style.css
template_directory = http://example/home/wp/wp-content/themes/largo
template_url = http://example/home/wp/wp-content/themes/largo
text_direction = ltr
url = http://example/home
version = 2.7
wpurl = http://example/home/wp

You can easily display this information by substituting the variable in the following code for the desired URL:

Did that help? Share your thoughts below!