function getTinyUrl($url) {
  $tinyurl = file_get_contents("http://is.gd/api.php?longurl=".$url);
  return $tinyurl;
}

What this code means is that we create new function called “createTinyLink” and allow a parameter of “$url” to be grabbed so it can be convereted into a tinyURL. Then we create a new variable called “$tinylink” and let that equal to the contents of the function on the is.gd website. I got that link from here. But you could also use Bit.ly or Tinyurl just as simply. The code then returns the contents into where we want it displayed.

After this we go into the single.php (or any page) and enter in:

Tweet this

This creates a link that says Tweet this and the url will be a link to Twitter.com that can update your status with Currently Reading : [The title of the post] and the shortened link to the article.

There you have it extremely easy and very cool addition to your blog, without slowing it down with a million plugins.

Here I will list over a 100 blogs for you to subscribe to, but also I will give a link to download all the URLs so they can be easily imported into Google Reader.

1. Net Magazine – Blog URL – Subscription URL
2. A List Apart – Blog URL – Subscription URL
3. A Propostional Structure – Blog URL – Subscription URL
4. AETUTS – Blog URL – Subscription URL
5. Alex Buga – Blog URL – Subscription URL
6. AndySowards.com – Blog URL – Subscription URL
7. Beautiful Life – Blog URL – Subscription URL
8. Coda.co.za – Blog URL – Subscription URL
9. Soh Tanaka – Blog URL – Subscription URL
10. Spoon Graphics – Blog URL – Subscription URL
11. Build Internet – Blog URL – Subscription URL
12. Catswhocode – Blog URL – Subscription URL
13. cdharrison – Blog URL – Subscription URL
14. Cgtuts – Blog URL – Subscription URL
15. Chris Wallace – Blog URL – Subscription URL
16. Colorburned – Blog URL – Subscription URL
17. Contrast – Blog URL – Subscription URL
18. Crane Factory – Blog URL – Subscription URL
19. Creattica Daily – Blog URL – Subscription URL
20. Css-Tricks – Blog URL – Subscription URL
21. Cult Foo – Blog URL – Subscription URL
22. Design Daily News – Blog URL – Subscription URL
23. Design Pitstop – Blog URL – Subscription URL
24. Design Reviver – Blog URL – Subscription URL
25. Design Swan – Blog URL – Subscription URL
26. Design Your Way – Blog URL – Subscription URL
27. Designeezy – Blog URL – Subscription URL
28. Design M.ag – Blog URL – Subscription URL
29. Desizn Tech – Blog URL – Subscription URL
30. Digging into WordPress – Blog URL – Subscription URL
31. DigMo! – Blog URL – Subscription URL
32. Directory for Designers – Blog URL – Subscription URL
33. DG Labs – Blog URL – Subscription URL
34. Flashtuts – Blog URL – Subscription URL
35. For the Lose – Blog URL – Subscription URL
36. Smashing Apps – Blog URL – Subscription URL
37. Freelance Switch – Blog URL – Subscription URL
38. Fuel Your Coding – Blog URL – Subscription URL
39. Function – Blog URL – Subscription URL
40. Hack WordPress – Blog URL – Subscription URL
41. Hongkait – Blog URL – Subscription URL
42. In The Woods – Blog URL – Subscription URL
43. Insic Design – Blog URL – Subscription URL
44. instantShift – Blog URL – Subscription URL
45. Jack of All Trades – Blog URL – Subscription URL
46. jQuery for Designers – Blog URL – Subscription URL
47. jQuery Style – Blog URL – Subscription URL
48. Just Creative Design – Blog URL – Subscription URL
49. Jeffrey Way – Blog URL – Subscription URL
50. Learning jQuery – Blog URL – Subscription URL
51. Lee Munroe – Blog URL – Subscription URL
52. Line 25 – Blog URL – Subscription URL
53. Logo Design Love – Blog URL – Subscription URL
54. Lovely Package – Blog URL – Subscription URL
55. Marco Prljic – Blog URL – Subscription URL
56. Massa Moda – Blog URL – Subscription URL
57. Ben McRedmond – Blog URL – Subscription URL
58. Mayhem Studios – Blog URL – Subscription URL
59. Minervity – Blog URL – Subscription URL
60. Nettuts – Blog URL – Subscription URL
61. Nometech – Blog URL – Subscription URL
62. Noupe – Blog URL – Subscription URL
63. Outlaw Design – Blog URL – Subscription URL
64. Pimp My WordPress – Blog URL – Subscription URL
65. Pineapple Magazine – Blog URL – Subscription URL
66. Pro Blog Design – Blog URL – Subscription URL
67. PSDFan – Blog URL – Subscription URL
68. PSDTuts – Blog URL – Subscription URL
69. PSDVibe – Blog URL – Subscription URL
70. PS Hero – Blog URL – Subscription URL
71. Six Revisions – Blog URL – Subscription URL
72. Smashing Magazine – Blog URL – Subscription URL
73. Speckyboy – Blog URL – Subscription URL
74. SpyreStudios – Blog URL – Subscription URL
75. Swedish Fika – Blog URL – Subscription URL
76. The Design O’Blog – Blog URL – Subscription URL
77. The Netsetter – Blog URL – Subscription URL
78. The River Current – Blog URL – Subscription URL
79. The Ux Booth – Blog URL – Subscription URL
80. The Dieline – Blog URL – Subscription URL
81. Tutorial9 – Blog URL – Subscription URL
82. Tutorial Magazine – Blog URL – Subscription URL
83. Vandelay Design Blog – Blog URL – Subscription URL
84. Vectortuts – Blog URL – Subscription URL
85. Veerle.Douh – Blog URL – Subscription URL
86. Web Design From Scratch – Blog URL – Subscription URL
87. Web Design Ledger – Blog URL – Subscription URL
88. Web Design Dev – Blog URL – Subscription URL
89. Web Designer Magazine – Blog URL – Subscription URL
90. Web Designer Wall – Blog URL – Subscription URL
91. Web Standardistas – Blog URL – Subscription URL
92. WebAir Blog – Blog URL – Subscription URL
93. WebPageFx – Blog URL – Subscription URL
94. Woork – Blog URL – Subscription URL
95. WPazo – Blog URL – Subscription URL
96. Wp Candy – Blog URL – Subscription URL
97. Yen Design – Blog URL – Subscription URL
98. Yoast – Blog URL – Subscription URL
99. You the Designer – Blog URL – Subscription URL

For those who are wondering where the 100th blog is, you’re already on it

I reccomend all of these site for anyone looking to build their library of decent helpful and informative blogs..

To import it directly into Google Reader, please follow this link. You can also download the OPML file here

Subscribe to my RSS feed for more great articles.

Although the main content is always the most important part of a web design, the secondary content plays a fundamental role in guiding the user through the website. The sidebar helps direct the flow of the page, gives it useful information, and can display some of the most important aspects of your website.

Seeing as these tutorials are based off of WordPress 2.7, there is no need to go into detail about static sidebars. You can easily add these in, with your knowledge of XHTML and the use of the very detailed WordPress Codex.

Footers are also a very important feature of your site. Because they are at the bottom, they are often overlooked. Many people don’t realise how important it is to have something to look at once you finish reading a post and so the footer is an ideal opportunity to maintain readership.

Functions.php

Functions.php is used to add the dynamic sidebars and to format it. For this design, I am adding two widgetized sidebars, one for the right of the content and one for the footer .Add the following into your functions.php

Download the functions.php text

name – The name we give our sidebars

before_widget – This allows us to structure our widgets

after_widget – This closes the tags opened in the before_widget

before_title – Lets us add a heading before the widget content

after_title – Closes the heading tag

We also added classes called ‘widget’ , ‘footerbox’ , and ‘%2$s’. The ‘%2$s’ is used to allow plugins to give their own class so we can customise each widget separately.

Adding the Sidebar

So now we have two sidebars

This is what they look like in the admin panel. The only problem  is that we have nothing in our template files to show our widgets. This can be rectified easily

Go into sidebar.php and copy in the following lines of code in between the ‘secondary’ div tag

Download dynamicwidgets.txt

Now upload sidebar.php and you should see your widgets underneath your posts

Add Functionality To The Footer

Now we are going to add the exact same code, in a different manner and in a different place, to add functions to the sidebar.

Add the following just after <div id=”footer”>

Download footerwidgets.txt here

This places in an unordered list, with the dynamic sidebar “footer” enclosed. I’ve also added a div around the footer text “Copyright etc.. “ to make it easier to style.

Conclusion

So at the end of this lesson your files should be along the lines of these

Download the sidebar.php text

Download the footer.php text

It’s not much of a design but we are getting there. On Day 4 of Design a WordPress 2.7 Theme, we will be adding CSS (Finally!) just to structure our page a bit. Remember to Subscribe to my RSS Feed for daily updates.

You have your basic page structure, but there are none of your posts visible. Because there is a lot of PHP needed, and because it can get messy some times, WordPress give you an easier way to separate your template theme pages into different files. With WordPress, you can and it is extreemly easy!

File Separation

Open  any IDE, and make five new pages

• header.php
• sidebar.php
• footer.php
• page.php
• single.php

Now go into you index.php, cut everything from the top to the end of <div id=”primary”, and place it in the header.php. Then go back into your index.php and type <?php get_header(); ?>. This tells your index,php to import the header file

We are now going to do the same for the sidebar and the footer. Cut from <!–END PRIMARY –> to <!–END CONTENT –></div> and place it  into sidebar.php. Then in index.php type <?php get_sidebar(); ?>.

And finally from <div id=”footer”> to </html> place everything into footer.php, and in index.php finally type <?php get_footer(); ?>

Your index.php should now have three lines of PHP code. You now have the basis of a WordPress themes, without the post or pages, or sidebar, ooh and your missing all your styling. Basically you have most of the grunt work done. You should be so proud. Lets move onto more interesting things shall we?

NOTE: These are proprietary tags i.e. if you type in <?php get_menu(); ?> and hope to have menu.php imported, this will not work.

The Loop

The loop is where your posts are displayed. It is called The Loop because it loops a script to display several posts dynamically.

Add the following between your header and sidebar import

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

<?php endwhile; ?>

<?php endif; ?>

This code checks for posts, repeats the number of posts until finished, then it ends the script. Simple enough. Now in between <?php while(have_posts()) : the_post(); ?> and <?php endwhile; ?> type in the following code

Download loopentry.txt here

Conclusion

So at the end of this lesson you should:

• Have six files with index.php, single.php and page.php importing the header, sidebar and footer.
• The loop displaying your posts
• A navigation at the bottom to get you go backwards and forwards.

Next

On Day 3 of our Design a WordPress 2.7 Theme, we will be covering the dynamic sidebar and other adding functionality to our footer. Make sure you Subscribe  to my RSS, if you don’t want to miss the rest of these posts.

Also please go back and have a look at the other tutorials in the post.

The first thing to consider when designing a WordPress theme is to think about the layout of site. Who is it for, why do they need it, how many columns, what colours? For this tutorial, I will be working on something to give away for free on this site ( a sort of follow-up to the series). I cant decide on your design, so you will have to get all of these beforehand.

The Heading

So to start, open up Dreamweaver (or any other IDE) and create a PHP file and name it index.php. Then create a CSS file and name it style.css. In you index.php, there will be some text already in your code. Take every thing out of the <head> tag and substitute it for the following:

Download head.txt here

<?php wp_title (); ?> – This gives dynamic info as the Page Title. This is extremely useful for SEO as it changes for every post.

<?php bloginfo(‘template_directory’); ?> & <?php bloginfo(‘stylesheet_url’); ?> – This just gives the location of the template directory and stylesheet. The first one is useful if you need to add a second CSS file (like I will be doing soon), JavaScript file, or an image.

<?php wp_head(); ?> – This exports the files WordPress and its plug-ins needs to the HTML. Some of this include widget specific CSS, J-Query embedding, or just new title-bar text.

Stylesheet setup

Head into style.css and remove everything inside it. Now because WP uses the stylesheet for all the template metadata (Useful Information), it is vital that you write this code correctly.

Download stylemeta.txt here

This just gives data, like the version of the template, template name etc… You can edit it accordingly. This is all we will be doing in the CSS today, we will not go that far so soon. For now, we will just work on the HTML.

The Basic Structure.

Ok now we are going to write the basic structure of our theme. We are not going to be implementing CSS just yet. I like to use a blank file with all this code already written but you can see it all here. Put all of this into the <body> tag.

Download body.txt here

This is just basic formatting, feel free to change it around as much as you like, just remember what id’s you use to make sure you don’t get confused with mine. Most of it is self-explanatory. However you will notice I have added a few PHP phrases <? wp_list_pages(‘title_li=&depth=1′); ?> – This prints out links for our menu. This is often an overlooked part of designing a WordPress theme, but it makes things easier in the long run. “depth=1” Makes sure that no sub-pages are seen. If you want to remove that go ahead but for this theme, I’m leaving it out <? bloginfo(‘url’);?> & <? bloginfo(‘name’);?> – This are handy tags to print out the URL and Name of the blog.

Testing

Now upload these files onto your web server in a folder in your wp-content/themes/ folder. Now enable your theme in the Backend and see if things are correct. You should see a page with your site name and a list of your pages, with no styling, and a footer with copyright information.

Conclusion

So at the end of this lesson you should:

• Be familiar with the PHP involved in the <head> tag
• Have the metadata implemented in the CSS
• Have a basic webpage structure ready for CSS Styling

Your HTML Page should look like this

Download day1.txt here

Next

On Day 2 of our Design a WordPress 2.7 Theme, we will be covering the loop and other php snippets to go into our theme. Make sure you Subscribe to my RSS, if you don’t want to miss the rest of these posts. Also please go back and have a look at the other tutorials in the post.

Seeing as he doesn’t seem to be doing so, I thought I might give it a shot. This is an extremely ambitious series of posts, as this is a fairly new blog, from a fairly new blogger/web designer. So please, don’t treat my words as gospel, and always strive for improvement. I shall be doing these posts every two -three days so please stick around. If you have any trouble you can find me here

You will need

• A Self-hosted WordPress blog
• Basic Knowledge of xHTML and CSS
• A IDE (Dreamweaver, Expression, Coda etc…)
• A inline browser tool such as Firebug and Web Developer Toolbar

Lessons

• Day 1 – The Basic Structure and Header
• Day 2 – File Separating And The Loop

1. Web Developer Toolbar – This is a fantastic tool that “Adds a menu and a toolbar with various web developer tools” such as viewing and editing CSS in browser (also editing html), Displaying the divs on a page, checking if the site is css and xhtml valid, disable and enable almost everything. This is the best for web design and development.Download Here
2. StumbleUpon – StumbleUpon? I thought that was a social networking site. You would be correct but it is also a handy repository for finding articles about web development. Just add topics like css,php, etc to your topics and click Stumble! on the toolbar. the best thing in my eyes about this is that you can do it at your own pace, there is no rush, it is totally random and you can do it whenever your bored. Download 3.26 Here
3. Colorzilla – Besides the american (wrong) spelling of “COLOUR”, this is great tool for when you dont want drag a screenshot into Photoshop to get a Hex Colour. Just clicking the icon will bring up an eye dropper cursor that allows you to find the HEX and RGB of a colour  in a flash. Download Here
4. MeasureIt – Again to save time loading up Photoshop. Just click and drag and you get an instead x and y value of the length of the selection. Even works when you zoom in! Download Here
5. This is a great site. Must have for all web-developers
6. Firebug – This is probably one of the most useful addons you can get for Firefox. Showing Javascript errors, the structure of the HTML, shows you the JSON responses, the css of a particular element, and the loading time of a page, firebug is a great tool. This is a must-have addon for all Web Developers -Download Here

Hope you enjoyed it. Please Digg if you like it

• CSS Beauty
• CSS Blast
• CSSBloom
• CSS Clip
• CSS Collection
• CSS-Demo
• CSS Design Yorkshire
• CSS Drive- Categorized CSS gallery and examples
• CeeSeS
• CESKO
• Creative-Pakistan
• CSSFill
• CSS Galaxy
• CSS Hazard
• CSS Heaven
• CSS ImportCSS
• CSS-Mania
• CSS Princess
• CSS Reboot
• CSS Remix
• CSS smooth operator // Tite site collection
• csstux – The best dressed sites on the web
• CSS Vault – The Web’s CSS Site
• CSS Website
• CSS Zen Garden: The Beauty in CSS Design
• Design Shack – Inspirational CSS and Blog Design
• Liquid Designs
• Piepmatzel
• Style Crunch
• Stylegala
• Submit CSS
• Unmatched Style
• W3 Compliant Sites
• Webdigity
• Web Standards Awards