1stwebdesigner - Graphic and Web Design Blog » howto

Get The Coolest Domain Name Now – Best Tips, Tricks And Tools You’ll Need!

Daniels Mekšs — Mon, 11 Jul 2011 11:00:29 +0000

So you’ve come up with a splendid business project but become confused when it comes to choosing a domain name. A domain name is a very important element of a website and can be either help or hurt your online business. You may think how hard could it be to make up a single name? But this single word can often be crucial and has to be well considered before being accepted.

What should you keep in mind when thinking of a domain name? How do you find the right domain name quickly and efficiently? This article shares some useful tips about choosing domain names and presents some tools to find the exact domain name for your website.

Keep it short

While you could call your website thegreatestwebdesignblogintheworld it’s a good idea not to do so. Keep your domain name short and simple. Short domain names are easier to remember, faster to type and generally they’re better for your business. There may be some exceptions, however. For example, it’s acceptable to call your website fashionphotographyblog because it’s ordered and fpb might be even harder to remember, but for the most part – just keep it simple.

Keep it equal

Try to use the same domain name like you’ve named your website or business. It’s pretty important since people tend to think of a website after it’s name, not the domain. Naming your domain after your website’s name will give you an advantage and recognition. Don’t choose a domain like clothesandfootwear if your online shop is called shop x. It will be much easier for people to remember and recognize your website/brand if you use it’s name as a domain name.

Keep it unique

Try to be unique and memorable with your domain name. Don’t choose a domain name which might be easy to confuse with others or which might infringe on already existing domains/brands/companies. A unique and memorable domain name will pay you back when you’ll be looking for an audience. Having a unique domain name will also help you to develop your brand and image.

Keep it universal

When choosing a domain name you have to find the right balance between being specific and general. Try not to think about how your website looks right now but how it might look after two years. Think of possible growth, new niches and directions of development. The point is not to let your domain name limit your opportunities. For example, you start a blog about WordPress theme development and choose a domain name like wordpressthemeblog. After a while your blog becomes popular and you decide it would be a great idea to sell some WordPress themes. Your domain name kinda traps you saying that your website is a blog and nothing else. A domain name can keep you stuck in one specific field with limited potential to expand. Don’t bother yourself with this too much, however keep in mind that your website might end up quite different than you initially thought.

Keep it easy to remember

Besides being unique you have to think of a name that is easy to remember, especially if you’re starting an online business. If you have a unique, easy to remember domain it will be easier for people to associate your domain with your brand. It’s not always true that short is easier to remember, yet try to keep your domain logical and memorable. Short, unique and easy to remember are the main things to focus on when thinking of a domain name.

Tools

1. DomainTyper

DomainTyper allows you to search for your domain as fast as you can type. It’s a simple and easy way to check domain name availability. You can also use their domain name generator to create a nice and easy to remember domain. It randomly generates several .com domains.

2. Panabee

Panabee is the simplest way to brainstorm names for websites, mobile apps, and products. Availability is not the only thing you get – translations, phonetic variations, related terms, and more interesting stuff is offered.

3. Moniker

Moniker can help you find the right domain name – even if it’s already registered. With Moniker you can manage a domain or several thousand. Safely, securely and easily. Moniker has been offering domain registration for over a decade and their experience is unmatched.

4. Domainr

Domainr helps you explore the entire domain name space beyond the ubiquitous—and crowded—.com, .net and .org. When you type a search term into Domainr, you’ll see all the different possible domain names it creates.

5. Domize

Domize is the place to find your next domain name whether you’re a first-time buyer or a seasoned collector. Domize offers unmatched speed and security to allow you to search quickly and in complete privacy. All queries are encrypted over SSL and never leave Domize’s servers.

6. NameStation

NameStation is a website for finding name ideas and available domains. People can get name suggestions, feedback and ratings from their friends. Businesses can collaborate and hold naming contests to engage customers.

7. NameTumbler

At Name Tumbler you can find great, generic domain names in minutes. All great domain names are not yet taken. Use Name Tumbler to quickly find that perfect domain name.

8. Domainit Suggestion Tool

Domain Name Suggestion tool by Domainit helps you to find domain names that are available.

9. Domain Exposer

Domain Exposer is a tool which helps you find available domain names. There are still chances to come up with a great name. Registering a new domain name is often cheaper than buying one from domain brokers. By combining your keywords with our group of common words it’s easy to get a new domain name. The tool checks the domain name availability for all the suggestions.

10. Pcnames

Based on your query, PC Names instantly checks whether .com, .net, .org, .info, .biz, .us, .mobi and .name domain names are available. The domain search results will appear with 2-second delay for your convenience.

11. Namebio

Namebio is a searchable domain sales index. Here you will find domain sales comps, domain sales history, domain sales comparisons and domain sales comparables, domain auction results, and domain name resources as well as general domain information and tools.

12. DomainTools

DomainTools provides a directory that serves as a comprehensive snapshot of past and present domain name registration and ownership records. We also offer a comprehensive set of research tools that help you discover and monitor everything about a domain name.

13. Olddomains

At Old Domains you can find valuable domain names with history for cheap price. You can browse through thousands of old domains and get your own name idea based on interesting keywords. You can also check previous domain content to see if it was positioned for your own needs.

14. Wordoid

Wordoid is a webapp that strives to help you invent a good name. It makes up new words. Automatically. It knows how to create words in English or Spanish. It even knows how to create words in an imaginary language, constructed by blending two or more real languages together.

15. RhymeZone

With Rhyme Zone type in a word below to find its rhymes, synonyms, definitions, and more.

16. Word Mixer

Word Mixer breaks down words, mixes and matches fragments, and reassembles them to create unique words.

17. WordConstructor

Use this random word generator to generate new words or change existing ones for a domain name, a name for your child, company, pet or band.

18. Random Word Generator

By analyzing the frequency of pairs of letters in 45 402 different words Random Word Generator generates new words which, although they don’t have any meaning, are reasonably syntactically correct.

19. Who.is

Use who.is to quickly locate administrative and technical contact information for the owner of any domain name. Domain name results also include IP and IP location information, web server information, related domain availability, premium domain listings and more.

20. Flippa

Flippa is the number one marketplace for buying and selling websites. Website sellers come to Flippa due to it having the highest sales rate in the industry—largely due to the massive size and quality of the Flippa website buyer audience.

Do you know any more great tools you use to find your new domain name? Share it here!

Rounded: Create A Detailed Solid Dark Layout In Photoshop

Michael John Burns — Wed, 12 Jan 2011 10:04:32 +0000

Hello there everybody and welcome to another PSD web design tutorial here at 1stwebdesigner! In this tutorial you will learn how to create a Solid Dark Layout in Photoshop. A few techniques discussed in this tutorial include the use of proper spacing, typography, and colors. Let’s get started – I hope you will make out together with me until successful finish together !

Resources you will need to complete this tutorial:

Here is what we will making, click on image for full preview:

Step1: Working with Site Structure

Before we get started,download at first 960grid system for easy Guideline creation. Open 960_download\templates\photoshop\960_grid_12_col.psd . We also need to make sure that our Rulers and Guides are viewed, you can do that by pressing

CTRL + R (View Rulers)
CTRL + ; (View Guides)

Press CTRL + SHIFT + C to change the canvas size.

Using Paint Bucket Tool(G) fill the background layer to #242b30 Now you need to create a folders. Here is the folders that we will use in order to be organized. Implement this system in all of your designs – it will help a lot later when you will need to edit anything.

Now when you are done let’s get started.

Step2: Working with Header

Rename the layer1 folder to Header and rename layer 1 to header_bg (Make sure that you have finished creating the folders as I said earlier). Create a new guideline go to View > New Guide and set the position to 100px, orientation to horizontal.

Select Rectangular Marquee Tool(M), make a selection as shown in the screenshot below and fill it with #ffffff

Add this Blending Option:

Drop Shadow

Gradient Overlay

Linear Gradient
Angle: 90
#171c20
#22292f

Stroke

#0d1012

Step3: Working with Logo

Create a folder inside header folder and name it to Logo, put all your logo related layers there. Now we are going to add the Site Title/Logo, so select the Text Tool(T) and write text the same way as in the screenshot.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Linear Gradient
Angle: 90
#929292
#bcbdbd Location: 30%
#dfdfdf Location: 50%
#dfdfdf Location: 100%

Now that we have finished styling the text, let’s create a light to make it more emphasized. Create a new layer below the text, name it to light and make a selection as shown in the screenshot below.

Set the foreground color to #ffffff Select the Brush Tool(B), right click to the workspace to show brush options.

Brush as shown in the screenshot below to create nice radial effect to emphasize logo.

Set layer to Soft Light, Opacity to 80%:

Now when we are finished with our logo let’s proceed creating the navigation.

Step4: Working with Navigation

Create a folder inside header folder and name it to Navigation, put all your navigation related layers there. Now we are going to add the Navigation Links, so select the Text Tool(T) and write text the same ways as in the screenshot.

I separated the home link because it serves as Active state. For the other links I color it with #b6aefd.

Add this Blending Option for the home text:

Drop Shadow

Color Overlay

#232a2f

Now lets create the Active state styling for the home. Create a new layer below the home text, select Rounded Rectangle Tool(U) and set the radius to 5px.

Add this Blending Option:

Drop Shadow

Inner Shadow

Gradient Overlay

Repeat the same step as we did to our logo.

Stroke

#13181b

Step5: Working with Slideshow

Create new guideline go to View > New Guide and set the position to 140px, orientation to horizontal. Repeat the process and set the position to 440px.

Now we are going to add the holder of our slideshow. Set the shape color to #171c20, now select the Rounded Rectangle Tool(U), set the radius to 5px draw a shape the same way as in the screenshot.

Add this Blending Option:

Drop Shadow

Now make a selection to the shape we have just create by pressing ctrl + click to the shape at the layers panel.

Go to Select > Modify > Contract, contract the layer by 5px. Now drag some guidelines to the edge of the selection left, right, top and bottom as shown in the screenshot.

Select Rounded Rectangle Tool(U), set the radius to 5px. For the color I chose #36414a. Color of this shape will not matter because it will serve as the holder of the slideshow images.

Add this Blending Option:

Inner Shadow

Inner Glow

#424f5a

Stroke

#111417

Create a folder inside slideshow folder and name it to divider. Make sure that this folder is on the top of the shape we have just created. To create a divider select Rectangular Marquee Tool(M), follow the color as shown in the screenshot.

We divided it into two parts, on the left part this will contain the description of the image in the slideshow, this will also contain previous and next button. The right part will contain the images. Lets start in the left part. Create another folder inside the slideshow folder and name it toleft.

Now select Rounded Rectangle Tool(U), set the radius to 5px, follow how I place the shape as shown in the screenshot.

Add this Blending Option:

Gradient Overlay

Stlye: Linear
#242b31
#36414a

Create a new layer and name it header. Select Rounded rectangle tool with the same radius, follow how I place the shape as shown in the screenshot.

Add this Blending Option:

Inner Glow

#424f5a

Gradient Overlay

Stlye: Linear
#21282d
#2f3840

Stroke

#111417

Now we are going to add the header text, so select the Text Tool(T) and write text the same ways as in the screenshot.

Duplicate the text layer. Now press down arrow key once.

Add this Blending Option:

Gradient Overlay

Stlye: Linear
#d4d4d4
#ffffff

Now we are going to add the description text, so select the Text Tool(T) and write text the same ways as in the screenshot.

Now lets create a read more button. Create another folder inside slideshow folder and name it to readmore. Select Rounded Rectangle Tool(U), radius to 5px. Place the shape as shown in the screenshot.

Now lets create a Previous and Next button. Create another folder inside slideshow folder and name it to prev_next. Select Rounded Rectangle Tool(U), radius to 5px. Place the shape as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Inner Shadow

Inner Glow

Gradient Overlay

Linear Gradient
Angle: 90
#929292
#bcbdbd Location: 30%
#dfdfdf Location: 50%
#dfdfdf Location: 100%

Stroke

#161b1f

Now we will add the previous and next arrow. Select Custom Shape Tool(U), find the arrow as shown in the screenshot.

Place the arrow as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Gradient Overlay

Linear Gradient
Angle: 90
#21282d
#2f3840 50% and 100%

Now grab some of your works to put up in our slideshow image. From the layers panel create a new layer above the image_holder layer and link it together. Follow how I link it in the screenshot.

For the final step in our slideshow lets create a shadow to make it look like 3d. To do this select Pen Tool(T), follow how I make the shape in the screenshot and fill it with #000000.

Select the layer and go to Filter > Blur > Gaussian Blur, set the radius to 5.0px. At the layer panel set the layer opacity to 80%.

Step6: Working with What I Do

Select the What I Do folder. Now we are going to add the What I Do Header, so select the Text Tool(T) and write text the same ways as in the screenshot.

Add this Blending Option:

Drop Shadow

Gradient Overlay

Stlye: Linear
#d4d4d4
#ffffff

Ready the icons that you have downloaded. We will going to add 4 different folders in our What I Do folder. These are I Capture Smiles, I Design Websites, Awards I Receive and I love to Socialize, these will be on a separate folder.. Now follow how I place the text in the screenshot.

If you are done you may have something that looks like mine.

Step6: Working with Divider

Select the Divider folder, inside of it create a new folder name it lines. We are going to make 2 1px line to make a divider and some blending options to make it more interesting. To make the line we can do this by the use of Line Tool(U), For the 1st line color will be #111417 and 2nd line #364148.

Select Rectangle Tool(U), place it as shown in the screenshot and set the layer fill to 0%

Add this Blending Option:

Gradient Overlay

Duplicate the layer, were going to change the gradient overlay.

#242b30

Step7: Working with About Me

Select the About Me folder , now we are going to add the about me header and information, so select the Text Tool(T) and write text the same ways as in the screenshot. I use the same formatting in text as we id in our What I Do section.

Step8: Working with My Portfolio

Select the My Portfolio folder, now we are going to add the about me header, so select the Text Tool(T) and write text the same ways as in the screenshot.

Select Rectangle Tool(U), and place the shape as shown in the screenshot.

Add this Blending Option:

Drop Shadow

Stroke

#161b1f

Now place your sample images at the top of this layer and link it together the same as we did in our slideshow.

Now we are going to add the my portfolio information, so select the Text Tool(T) and write text the same ways as in the screenshot.

Step9: Working with Footer

Select the My Portfolio folder, now we are going to add the footer background, so select Rectangle Tool(U) and set the color to #171c20, place the shape the same way as in the screenshot.

Add this Blending Option:

Outer Glow

#111417

Stroke

#364148

We are going to add copyright text in the left side and some links in the right side, so select Text Tool(T) and write text the same ways as in the screenshot.

Step9: Working with Background Light

Notice that our background is just flat. In this step we will going to add more brightness in the slide show area and in the middle area. Now Select Background folder, create a 2 layers inside and name it Slideshow_light and the other is whatido_light. Select slideshow_light layer, select Rectangular Marquee Tool and make a selection as shown in the screenshot.

To create the light select Brush Tool(B) size 700 hardness 0%. Brush at the center top of the selection and at the layers panel set the blend mode to Soft Light Opacity to 70%.

You should have lightning effect the same in the screen shot below.

Now select whatido_light layer. Select Rectangular Marquee Tool(M), make a selection the same on the screen shot below.

Now when you’re done set the layer blend mode to Soft Light and Opacity to 70% this will create a lightning effect that blends to our background shown in the screen shot below.

Finally were done! Hope you learn something on this tutorial and hope you like it. If your have any question or tutorial request drop some comments below. Thanks!

Final Preview

Download PSD file here.

How to Enhance Your Website Using Breadcrumbs – Showcase

Srikanth AD — Fri, 16 Jul 2010 21:00:04 +0000

On large websites and websites with hierarchically arranged pages, breadcrumbs are a really great way for users to navigate around the web site. They are a type of secondary navigation scheme which indicates the exact location of a user on a website. They greatly improve the findability of a web site’s sections and pages.

Breadcrumbs, in the simplest form, are horizontally arranged text links separated by a greater than symbol (>). Using breadcrumbs on your website can be really beneficial. It provides a convenient way for users to navigate around the website and also allows users to establish their location on the website.

It provides an alternate way for users to navigate the website. For first-time visitors breadcrumbs can be a great way to entice them in exploring the website. Hence, it can be really effective in reducing the overall bounce rate of the website.

Different websites use different stylized breadcrumbs that blend in well with their site theme. Below is a showcase of websites with some of the best designed breadcrumbs.

1. Apple Store

The Apple Store has made use of breadcrumbs in a really creative way. The breadcrumbs are designed in the form of stylized buttons that fits in well with entire site’s theme.

2. The Glasgow Collective

The Glasgow Collective has made use of stylish colorful breadcrumbs shaped in the form of a hexagon.

3. Nestle

Nestle has used simple and neat breadcrumbs that blends in well with the theme of the website. The breadcrumbs are arranged in the form of horizontal text links separated by a greater than symbol (>).

4. Delicious

Delicious has presented their breadcrumb trail of keyword tags in a simple and interactive way. The ‘x’ button besides the keyword tags lets you delete items in the breadcrumb trail in order to help you find your bookmarks easily.

5. Crooked Tongues

Crooked Tongues has made use of the standard attribute-based breadcrumb trail with a right-pointing triangle replacing the classic greater than symbol (>).

6. Ideo

Ideo has presented the breadcrumb trail in a really innovative way. The breadcrumb trail consists of square shaped colorful buttons whose color becomes darker as the breadcrumb advances.

7. Mia & Maggie

This website too has made use of the classic breadcrumb trail in which the greater than symbol (>) is replaced by a forward slash (/).

8. guardian.co.uk

guardian.co.uk has made use of simple & colorful hexagon shaped breadcrumbs that matches pretty well the multi-colored theme of the website.

9. Coolspotters

Coolspotters uses simple button-like breadcrumb trail that matches well with the website template and also provides an easy way to navigate between the sub-categories of the website.

10. Yahoo! TV

Yahoo! has made use of interactive button-like breadcrumbs on their Yahoo! TV webpage. Clicking on the inverted triangle brings a drop-down menu displaying different categories of the website.

11. NASA

NASA has made use of the simple, classic breadcrumb trail consisting of horizontal text links separated by a greater than symbol (>). The color scheme of the breadcrumbs blends in well with the entire entire.

12. Design Collectors

The Design Collectors have designed simple and classic text-based breadcrumbs with color scheme that matches well the website’s template.

13. Bell

The Bell shop uses simple text-based breadcrumb trail in which the text links are separated by a right-pointing triangle.

14. Wufoo

Wufoo has made use of the simple text-based breadcrumbs in their own creative way. The breadcrumbs have been integrated with the site’s logo and the classic greater than symbol (>) have been replaced with a right-pointing arrow.

15. Girl Scouts

The Girl Scouts website have breadcrumbs that are well designed to provide an easy navigation around the website. The breadcrumbs displays various categories and sub-categories of the website. Breadcrumbs are used as a primary navigation on the Girl Scouts website.

16. Bridge55.com

Brige55.com uses the classic text-based breadcrumbs that indicates the user’s current location on the website as well as provides an easy way to go back and find similar products.

17. The Hillside Group

The Hillside Group uses breadcrumbs that are similar to the ones used in the Apple Store website. It has been designed to provide an easy way to navigate around the sub-categories of the website.

18. Wowhead

This website has made use of interactive breadcrumbs with drop-down menus that display the various categories, sub-categories and pages of the website providing a convenient, user-friendly navigation scheme.

19. Devlounge

Devlounge uses simple button-like breadcrumb trail that enables users to easily navigate around different categories of the web blog.

20. MarTique Designs

MarTique Desings uses the simple, classic text-based breadcrumbs in which the greater than symbol (>) is replaced by a forward slash (/).

21. TechRadar

This technology website uses the classic text-based breadcrumbs in which the greater than symbol (>) is replaced by a right-pointing triangle. The breadcrumbs indicate the user’s current location on the website as well as enables the user to easily navigate between the sub-categories of the website.

22. BP

This website too uses the classic text-based breadcrumb trail that enables users to easily navigate around the website. The color scheme of the breadcrumb blends in well with the entire website.

How to Create Your first WordPress Theme: Part 2

Cosmin Negoita — Fri, 21 May 2010 10:15:36 +0000

This is the second part of the “How to Create Your first WordPress Theme” tutorial series. Just in case you have missed the first part, please go here and start reading.

You can Download source files of this tutorial or Live preview this theme.

As I promised in the first part of this tutorial, we will do some stuff that will make your blog theme more interesting and useful. I’m re-writing the list with what we will cover in this part:

Widgetizing your sidebar
Making a working search form
Using the single page template: comments, author details
Using custom fields for showing an image for each article

1. Widgetizing the Sidebar

Having a widget-ready theme is the most important thing of a blog theme. It doesn’t matter for the reader but it helps you a lot. How a widget-ready theme is helping you? Well, imagine that you want a lot of things to be displayed in the sidebar. Think that you will have some lists like friends, archive, categories, tag cloud, advertising area, etc. It would be easy to write markup in the sidebar.php file, but it would be more easy letting WordPress for handling this. Having a widget-ready theme is a big advantage because you can add text, lists and advertising area within WordPress admin panel.

But enough with talking, let’s get started! Open your sidebar.php file that you have coded in the first part of this tutorial. Now, we’ll have to decide what pieces of code will stay even if the widgets are turned on. Widgetizing the sidebar makes a condition like: if widgets are available, show widgets and chosen sidebar markup, else, show original sidebar markup. Below are the widget tags, without any code in them:

Maybe this clears everything for you. The comments are very explanatory, so now we just need to use it with our sidebar markup. So, you should decide what code will remain even if the widgets are used. Normally, the search box have to always be there. Of course you can let WordPress add it but this will stop you from any additional customization to the search form elements:



Navigation  Here

Home










Categories

I’ll stop here for a moment. I added a search form, which has WordPress specific values. If you remove them, the search form won’t work:

The code I have been showing you previously, is the markup of the sidebar.php file, along with the widget tags. The condition for what I’ve written there, is the following: if there aren’t any widgets in use, show the categories, else, show the widgets you are activating.

We aren’t ready yet. This code won’t work if we do not add some functions. Normally, for not modifying the WordPress core files, we add new functions to the functions.php file that you will have to create. For creating the function for the widgets, add the following code to your new functions.php file:


 '',
 'after_widget'  => '',
 'before_title' =>  '',
 'after_title' =>  '',
 ));

?>

You need some explanation, right? Well, between the apostrophes you need to write your needed markup. Before and after widget could be used div tags, of course if your template needs them. For our current layout, we won’t add anything. The same thing happens for the title of each widget (e.g. Categories) which are wrapped by the paragraph and strong tags. You got it? Hope you did. This is everything you need to know about widgetizing the sidebar.

2. Adding a “Read more” link

Creating a Read more link is used for the blogs who do not want to show all the content of their articles on the front page. There are many ways we can achieve something like this:

2.1 The WordPress “more” tag

The more tag is activated by a little button when adding a new post from the WordPress admin panel. You can press ALT+Shift+T or click the following button:

If you do not know how to use it, I’ll explain you how to. Let’s say you have 2 paragraphs of text, but you want to show on the frontpage only the first paragraph. Click after the first paragraph and then click the shown button. You will see a dotted line with a little tag where it says “more”. All the content before this line will be shown.

But there is something else. You need to modify the content tag from the index.php file. As the source files from the first part do not have any parameter set to the tag, you will need to add it. Copy and paste the following code instead of the standard content tag:

Do not remove the paragrpah tags. Just the content tag needs to be modified. Now in each article where you place the more tag from the WordPress will show a “Read more” link. Go and try it!

2.2 Using the excerpt

Another way to achieve this is by using the excerpt. This works a bit diffrent. When publishing a new article in WordPress, you will see a box where it says “Excerpt” If you still have the content more tag used, the excerpt will automatically use the content before the dotted line. If you won’t use it from the WordPress Editing screen, it will remain empty.

If so, you will be able to write something different, like a short introduction or description. Let’s say you have some content in the article, and just write in the excerpt a random description.

If you publish the text, you will notice that you will get the whole content on the respective article. For getting the text you have written in the Excerpt box, you will need to modify the index.php loop. So instead of:

You will need to add the excerpt tag which is the following:

Now, take a look and see the difference.

2.3 Using a limitation plugin

Using such a plugin sometimes is easier for you. What this plugin does? Well, depending on each plugin, it can limit your content to word number, letter number or just show the first paragraph of the article. You can see a list of 3 such of plugins:

Now, you just need to decide which one is best for you.

3. Comments-template: using comments in WordPress

When It comes to develop a new WordPress theme, the part I hate the most is working on the comments. It’s not because it’s hard, it’s because I need to make a lot of stylings to achieve a nice comment area. I won’t get into styling because it relies on your creativity and CSS skill. I will only show you how to use the comments in a theme and what the used tags are doing. I suggest learning some basics of PHP before editing the comments.php file, because you’ll need some basic knowledge about PHP to code your own comments. For now, I’ll just show you how to use them. So let’s get started by opening the comments.php file from the WordPress Classic theme which is located in the wp-content/themes/classic directory.

Now, save the comments.php file in your layout07 directory. Ok, you won’t understand much things in this file if you don’t have some basic PHP knowledge. For now leave the file intact and open the single.php file and add after the content tag the following tag:

This will enable the comments in your theme. You will see a heading saying “No Comments” and below, a form with a heading saying “Leave a comment”. You can either leave a comment as a guest, or just sign in to WordPress and leave a comment as an admin (or user). Now, the most important tags you need to know when editing the comments.php file are the following:

Now, constructing a new comment structure is very easy, but you need to pay attention for not breaking the PHP code. The default structure of the comment is the following:






  id="comment-">
 
 
    —  @

So now, let me explain. Starting from the first line: If there are comments left to your article, your comments will be shown with the giveen structure within foreach PHP function, else (if no comments are posted) show a text with “No comments yet.”. For changing the look of your comments, you need to work just inside the foreach function. I’ll show you how to change the look of your comments, very easily.

Delete the

Next, wrap the foreach function with a div id “comments”, like the default structure were wrapped by



 said this on  at

Just take a look on how the comments are displayed now. I have removed some tags because you won’t need them as a beginner WordPress theme developer. I added div’s instead lists because it’s more clean. The class and the id were assigned for further customization via CSS. Now, if you have made the changes as I told you, you should edn up with something like this:

said this on at

For finding more information about manipulating the comments.php files go to the WordPress Codex and start looking for what you need. All that I’ve covered here is just basic stuff. Hope you’ve understood everything of what I’ve told you!

4. Using custom fields for showing an image for each article

Custom fields are one of the most important feature of WordPress. If you master the custom fields, you can create stunning WordPress functionalities like displaying an image for each article (like what I’ll be teaching you), displaying a certain message or link to your visitors (like a live preview and a demo button or even a source link for your article).

Where can you find the custom field box? The cutom fields box is located under the Send Trackbacks box, in the Post > Add post in the admin panel:

Using the custom fields isn’t so hard. You just have to learn the tag that calls a specified custom filed name. The tag is the following:

If you would write “image” instead of “custom field name”, WordPress will create a custom field with the name “image”, so any value you will give to the custom field, WordPress will output the value in the place where you have written your custom field tag. Not too clear for you? Let’s apply the custom field tag to create a nice thumbnail for each post! We will use an image tag which uses as source a link introduced by the custom field:


"  alt="" />

This tag will be posted above the content tag inside the index.php and the single.php files. Now go and create a new custom field with the name “image” and add to the value a link to an image. You can see how I’ve done this in the following pic:

Just in case that you won’t attach a thumbnail to your post, the article will show you an image missing. So you may add a thumbnail to each article you are writing. This is everything you need to do!

5. Author details: single page template and profile

WordPress have some predefined functions to output the current author details. This can be useful if you want to show some details about you or other authors in the single page templates. WordPress is also creating a profile page for any author where you can show the author details: description and posts.

This may sound difficult, but it’s very easy, just like all other things in WordPress. You only need a tag or two (if you want the author name displayed too) to show up your auhor details on single page template (and also others). Place the following tags at the start or at the ending of the article loop (in the single.php file):

The first line is for outputing the author’ posts page link and the second is for outputing the description of the author (entered from Biographical Info from the profile within WordPress admin panel). You can wrap these codes by a div id “author” so you can style it if you want. So the loop would look like the following:




Published on  by 
ID, 'image', true); ?>"  alt="" />

Now, for creating the author profile page, you need to open the page.php file then save it as author.php. Now, delete the actual loop and everything within the content div and paste the following code:

Published on

As you see, the author details are outside the loop. Then, we would like to display the posts that the current author have written so far. We are creating the loop, but this time we will show just the article title and the date when it was published. That’s it now. Save your file and go to test it!

That’s it!

Well, people, these are all the things I’ve wanted to cover as basics. Just leave comments requesting other things, and probably I will cover them in upcoming tutorials. Have fun with creating WordPress, and if i’ve helped someone to develop a nice theme, let me know! More to come on 1STWD…

Expert Tips on How to Build a Multicultural Website

1STWD Editorial — Wed, 19 May 2010 20:00:18 +0000

Let’s start with a truism: the web is global. Nothing particularly insightful about that statement, but for anyone undertaking any kind of creative endeavor in cyberspace, the proclamation that the ‘web is global’ should be an unspoken mantra that underpins any design consideration. For web designers, issues such as colour, layout, formatting and navigation are all key considerations throughout the design stage. Given that the web is indeed global, then anyone from London to Lahore can view your carefully crafted web pages – and if you want to appeal to a global audience, it may be best to design your site so that it’s easier to convert for international visitors.

Arabic, for example, has around 300 million native speakers around the globe, and as an official language in 26 countries (the third most after English and French), it’s clear that Arabic is a language that shouldn’t be ignored for those seeking to make serious inroads into international markets.

Using Unicode

Fancy graphics and cool colour schemes will certainly help sell your site to the masses – but ultimately, the old adage that content is king certainly rings true for most websites.

With that in mind, even if the plan is to build your website in English only, if you design using Unicode from the start, you will be well positioned to adapt your pages for other languages later on. Unicode is the only sensible character-set option that enables websites to support different scripts. UTF-8 is compatible with over 90 written languages (‘scripts’) and has a range of over a hundred thousand different characters.

Importantly, UTF-8 is supported by the most common browsers (Explorer, FireFox etc) and Operating Systems (Windows, Linux, MacOs), whilst the likes of Apple, Microsoft, IBM and other industry lynchpins have all adopted it as a standard.

Even if you don’t plan to use a non-Latin script on your site such as Arabic, the German alphabet, for example, contains an additional four characters: Ä, Ö, Ü and ß. Many other European alphabet systems use even more characters – which is why using Unicode is important.

Green Hats: Cultural and Colour Considerations

If you are setting up a website primarily to be aimed at audiences in the US or the UK, that’s great. But what if your strategy changes later on? It’s much easier to develop the aesthetics of your site from the start, rather than re-designing it later on.

Clearly, you can’t structure the aesthetics of your website to please everyone. But you can choose a culturally sensitive colour scheme – remember that different colours can mean different things in different cultures.

For example, in the United Arab Emirates and other Arabic cultures, green signifies holiness or luck, whilst blue represents immortality and is deemed a ‘protective’ colour. Orange has religious connotations for Protestants in Northern Ireland, and whatever you do, you might want to avoid placing a green hat anywhere on your website, as this means that a man’s wife has been unfaithful to him in China.

A light-coloured background with dark text is a safe bet across the world – it’s easy to read. Any other graphics, patterns or colour schemes you use should be chosen to reflect any markets you plan to enter: as a general rule of thumb, it’s best to avoid anything that is potentially divisive, such as religious, political or sexual symbols. A picture of a partially clad lady may go down a storm in the West, but in many eastern cultures, a dim view may be taken of this.

Layout & Navigation

Not all languages read from left to right. Arabic is one such language that reads in the opposite direction (right-to-left) and as such, this can throw up some issues when converting your design for specific markets.

If your navigation bar is vertically positioned on the left-hand-side of your English language website, then in Arabic users will obviously have to read from the right to left which means the navigation bar may not appear in your preferred position in relation to the direction the user is reading.

Of course, it’s not the end of the world if you have to shift the navigation bar to the other side of the page for your Arabic site, but for simplicity – and uniformity – you may favour a horizontally positioned navigation bar instead. This means the rest of your design and layout templates can remain the same across all your sites.

Bandwidth Barriers

This may be hard to believe, but not all countries have high-speed broadband internet access yet. Much of South America, Africa and even parts of Asia are still on internet connections that most people in Western countries would deem ‘slow’. With that in mind, you may want to avoid really heavy graphics and bandwidth-sapping Flash animations – it’s unlikely web users will hang around for ten minutes for a picture to load on their screen.

This doesn’t mean you should build text-only websites, but it does mean you should perhaps provide two options for web users: a simple HTML only version and a normal, flashy ‘bells and whistles’ version.

Multilingual SEO

You might have the most beautifully designed website in the world, but if nobody can find it on the World Wide Web, then is there any point in it being there?

Visibility is everything on the internet, which is why search engine optimisation (SEO) plays such a crucial part of any web content strategy. The issue of SEO is probably best left for another article, but for those who already optimise their English language site, it’s worth bearing in mind one golden rule of thumb when optimising your site for international markets: never translate your keywords directly.

If you’re translating your website content yourself or using a translation agency, the keywords for which you rank highly on Google.com or Google.co.uk should be researched for each target country. A translator won’t know what people use to search for products or services locally, they may use synonyms, abbreviations or colloquialisms.

And there you have it…the basics of multicultural web design!

30+ Things You Have to Know about being a Freelancer

Hilde Torbjornsen — Fri, 07 May 2010 21:00:47 +0000

Wanting to be a freelancer? – there are many things you need to be aware of. In this article I will list many things for you to think through and consider before jumping into the freelance business. I hope this list will be a valuable tool for you to evaluate the current situation and being prepared for possible challenges along the way.

It’s hard work

Picture by Zsuzsanna Kilian

If anyone tell you otherwise, they’re wrong. It’s that simple. So if you’re looking for an easy option to a normal day job, freelancing is not for you.

You won’t be rich in a day or two

You can be 100% sure that going over to freelancing wont make you rich overnight. There are possibilities of making a decent living, yes, but it will take hard work over time.

Most people can’t make a living from freelancing right away

If you start freelancing thinking that it will give you a good paycheck from week one, that’s very unlikely. Because of this, my tip is to consider combining it with either a part-time job to begin with, a loan of some kind or the best option – that you have savings you can live from for a while. If you are able to live from the first paycheck you get, then good for you – but it’s very rare.

Working harder than a regular employee to receive the same results

Picture by Eva Schuster

When you freelance you will have to consider many different aspects of everything you do. This means extra work and extra hours to output the same amount of work that you’d do at a normal job.

You have to be your own boss

As wonderful as it may sound to work alone, it means you will have to do the job your boss did before, and more. You will have to be a bit hard on yourself at times to make sure that things get done the right ways and to the right times.

No one will kick you out of bed in the mornings

Picture by Diego Jaimovich

As mentioned, you will have to be your own boss. This also means that no one will kick you out of bed in the morning. You will need discipline and still continue to get up early to start doing your daily tasks – just as you would have done when you had to go to your normal workplace. This is a point that quickly will show if you have the required backbone to deal with it. Many wannabe freelancer fall out of it already here.

You have to stay on top of every financial matter

Even if you haven’t had to deal with any financial stuff before, you will have to now. Obviously you could hire someone to help out with this, but that costs money. So at least in the beginning you should aim to do as much as possible of this yourself. Not only should you do this to save money, but also to keep on top of things. You want to know what everything costs to make good calculations of how much you have to earn to be able to pay your bills and also make a profit that you can live from.

It takes hard work to gain a reputation

Being a freelancer, and a new freelancer, your name won’t immediately have the same ring to it as a company name. This means that it’s not likely clients will come running to you. You will have to gain a good reputation through hard work in order for them to choose you in the future.

Every single client counts more

Picture by Barunpatro

For a multimillion dollar company, you could say that a single client doesn’t necessarily mean everything. For you as a freelancer though, every client counts. Remember this when you take on new projects and treat them thereafter. One client more or less can mean the difference between failure and success – every single month.

You have to save for rainy days

Picture by Jakub Krechowicz

To save for slow times means a lot. When you’re a regular employee you know that your paycheck comes at given dates and how much you will get paid. Being a freelancer is completely different. If you don’t have any money in the bank in month with few paid projects, this could mean the end of your freelancing career.

You won’t automatically be insured (for injuries, sickness and so on)

Depending on your region/country you will have to check out what kinds of insurance you can/should have. When you’re an employee, the company you work for have to have some sort of insurance that makes sure you get paid almost no matter what happens. Being a freelancer this responsibility falls on yourself. Different countries have different options, so make sure to check this out BEFORE you start-up.

You need somewhere to work from

Picture by Wilton Rodrigues

When you’re employed somewhere, you know where to go to work. You don’t have to pay for electricity, phone bills or furniture. Now though, you will have to consider these things. Before you start-up you need to think through where you will be working from to make sure you can actually afford it. A home office or some sort of office collaboration can many times be the cheaper solutions to begin with.

It can be hard to set the limit between work and hobby

If you’re going for working freelance, one of the reasons for doing this will quite likely be that you will be able to do what you love. This means that you sometimes will be doing work-related things very many hours of each day. This can mean many challenges, remember to try not to get burned out..

YOU have to pay for repairs

When something gets broken, you can’t go to your boss to get it fixed. You will have to do whatever it takes to get it fixed, and most importantly be able to pay for it.

YOU have to pay for new equipment

Picture by Zebra31

Just like with repairs, you will also have to be able to pay for new equipment when it’s needed. In some cases insurances could cover things that can’t be properly repaired but don’t count on it.

The first 3-6 months will be REALLY hard

At least the 3-6 first months will be extra hard. Not only do you have to adjust to a completely new way of working and thinking – but you need to get a base of clients that have work for you to do. You have to be prepared, both mentally and financially.

At times you’ll be at work 24/7

Picture by Manu Mohan

When you are a freelancer YOU ar your business. This means that if something doesn’t get finished within the regular work hours you’ve set, YOU will be the one that needs to step in and get it done in time. Sometimes this could mean that you for days can be working almost 24/7.

You have to always think ahead

When you’re a regular employee, someone else usually does the planning. Freelancing you have to make plans ahead all the time to make sure to get enough time for reaching deadlines.

You will have to do things you don’t like

Picture by Steve Ford Elliott

You probably choose your freelance career to be doing something you love. This doesn’t mean that you will always be doing only fun things. Every now and then you will have to do projects you find extra challenging, or sometimes even static and boring to make ends meet.

You will have to deal with difficult clients

We are all different. When you freelance you are always the one being in touch with every single client and they are also very different in personalities and in how they prefer to get things done. Not everyone will like you and vice versa, that’s just the way it is. Try to deal with that as smoothly as possible.

You have to think through what you say (and don’t)

Picture by Arte_Ram

You are your own business’ face outwards. This means that you will more than ever before be having to think through things before you say them. Remember that a single sentence said without being thought of can possibly ruin contracts and have you lose valuable income.

Prepare to work longer hours for less pay…for a long time

Picture by Nick Colomb

When you work for yourself you will see that you many times get less paid for every actual hour worked. This is because clients pay for what you do for them and not for your own accounting and planning. Thankfully though, you will be able to adjust your rates to fit this over time. But in the beginning it will be hard. So don’t give up right away.

All markets have ups and downs

Depending on your niche/market you will experience some ups and downs due to changes in the market. This isn’t anything you can do much about other than actually being prepared as good as possible.

Not all people understand that freelancing actually is hard work

Don’t expect everyone to understand what it’s like to do your work. Many new freelancers experience communication problems with family and friends who think freelancing is easy money and little work. It can also many times be hard for them to understand when you’re working and not. Make sure to do all you can to be prepared for this.

There are many laws/rules you have to read up on

Picture by Kristian Risager Larsen

It’s rarely as easy as just deciding what you want to do with your business and starting to do it. In most countries there are rules and regulations on many aspects of various businesses. You have to figure out what will apply to you so that you can do things they way they’re supposed to be done.

Taxes and VAT can have special rules in your country, make sure you know them!

Just as with all other rules and regulations there are rules for how to pay taxes and more. If you don’t know these you could be in for a very expensive surprise. This could eventually cost you your business.

You always need to have a plan B

Picture by Flaviu Lupoian

What many times separates the best from the rest, is the ability to adapt to challenges. This means that you have to keep a plan B ready at all times. What will you spend time on when there are slow days? What will you do if the client changes his mind about something in the last-minute and how will you be able to catch up lost hours if you get sick?

Slow times don’t mean less work, it often means more

If you have a day or three without paid projects, this definitely doesn’t mean that you can just sit back and relax. These are the days when you should do various other tasks, – both in order to get new clients and to take care of your own business. If you take advantage of these days it can mean an ocean of difference when the new projects start coming in again.

There are always many competitors

Picture by Gabriella Fabbri

When you enter the freelance world, you will quickly see that your competitors are many. This means that you can’t slack and expect for clients to stick to you. You always have to do your best and then some to be able to compete with everyone else.

You have to be able to make adjustments fast

Clients can require last-minute changes, meetings sometimes have to be rescheduled, you or the client can get sick for a few days. The options are many and you have to be able to adjust fast to make it.

Being a freelancer can be very expensive

As you probably understand from all these points, Freelancing can be quite expensive at times.

You will make more each hour, but also have more expenses

Picture by Sephen Hyun

Its easy math, but not always easy to remember. The bill your clients pay will equal a higher price each hour compared to what you get paid as a regular employee. Remember though, that this is supposed to cover for all your expenses.

You will have to say NO to some business opportunities

The ability to say No can prove to be a very important thing for you, or you will work 24/7 still not being able to finish everything. This will affect the quality of your work, your physical and mental health and your clients.

You will have to say NO to personal projects at times

Picture by StillSearc

If something didn’t go according to plan and someone need to put in extra work last-minute to get something finished, that person would be you. This means that you will have to say No to many other things sometimes, that’s the hard reality of being a freelancer.

Conclusion

This article wasn’t meant to scare you off, but to have you realise that making it as a freelancer is no easy road to go. You have to make sure you have what it takes and think these things through properly beforehand. It can save you many sleepless nights. I hope these tips can help you get better prepared for what’s ahead, to help you get a succesful and fun career freelancing if you decide to try it out.

It can be very rewarding and also comes with many positive side effects once you succeed. When you’re good at planning your days, you will sometimes be able to take time off to be with your spouse or children when it’s important, plan holidays that fit the rest of the family’s plans and so much more. Just remember to be careful and you could very well be one of those who succeed! :)

Picture by Svilen Milev

We would love to hear your own tips in the comment sections! Good luck!

How to Create Your first WordPress Theme: Part 1

Cosmin Negoita — Fri, 07 May 2010 10:00:32 +0000

WordPress is the most popular and the best (in my opinion) blogging platform, created by Automattic. It’s really easy to use and it’s very powerful, giving you the opportunity to build any kind of site, from blogs to shopping carts and CMS’s. In this series of tutorials, we are going to create our first WordPress theme. For this tutorial you need to have a little more than basic knowledge about HTML and CSS. Let’s get started.You can Download source files and you can also Live preview the theme here. It’s a basic css layout so it will be easy for beginners to convert it into a working WordPress theme.

What we need

WAMP/XAMPP Server (or similar software) - Download

WordPress 2.9.2 (latest version, recommended) – Download

Getting started – creating the working environment

First thing first, you need to install WAMP Server. After installing WAMP, download and copy the WordPress files in the www directory from your WAMP folder. Start WAMP Server, click on the icon in the task bar, and a pop-up list show appear, then select phpMyAdmin.

Now, create a new database. Give it any name, but you need to keep it in mind as we need it at the WP installation. As for now, we are done with WAMP Server, just leave it running.

WordPress Installation

After copying all the files, you need to install WordPress. Enter on the address where you have put the WP files. The address would be exactly, without any www or http, localhost or localhost/WordPress. After accessing the address, the installation may start.

Click “Create a Configuration File”. After this, you will see some listing of things you need to know. I’ll just tell you what you need:

Database name: your given name of the database we’ve created earlier
Database username: this should be “root” if you set it on your computer.
Database password: there is no password set.
Database host: localhost
Table prefix: for now, leave it as it is.

Now, just fill in the fields with the required information, and go further! After filling up the fields, next give any name to your blog, and write your e-mail address.

Now, copy the auto generated password, and paste it in the password field at the site login. Now, because you cannot keep that weird password in mind, go the upper right corner of the site and click on “admin”. You should see a page where you have your account info. You can modify anything there, but for now we are setting a new and easier password.

Go to the bottom where it says “New password” and set your new password.

Good, now you have WP installed, but we have a lot more things to do.

1. Planning the theme layout

When I’m starting a new project on developing a WordPress theme, as everyone should do, I first build my HTML/CSS template. This is easier because you also learn how to convert a simple HTML template into a fully functional WordPress theme. So i won’t go through building the template, considering you already know how to build your own. I’ll just use a simple layout from Free-CSS.com in this tutorial. Go here and download the #7 template.

2. Starting the conversion

When I’m making a theme, I’m always copying code snippets from a default WordPress theme (because i cannot remember all of them). I use the WordPress Classic theme, but you can also use a cheat sheet. The best one i’ve found is the one created by Ekinertac. After it opens in the PDF format, save it in your computer (you may need it when you do not have access to the internet).

All the contents from the sheet are the most used functions from WordPress, and the ones that you need to create a basic WP theme.

A thing that you have to notice is that WordPress is using PHP. Even if you aren’t a PHP master, or you have absolutely no idea what PHP is, you are still able to create a basic theme. When creating a theme, you need to know just tags and what they are doing, so do not worry about PHP.

2.1 Making the theme recognizable by WordPress

A very important part of a WordPress theme is the CSS file. In the CSS file are written some lines that WordPress is using to g a theme. First, you need to rename the styles.css to style.css as WordPress is search for style not styles. Copy and paste these lines at the start of your CSS file:

/*
Theme Name: Free-CSS template WP version
Theme URI: http://free-css.com
Description: A very basic  WP theme based on a simple CSS layout from Free-CSS.com
Version: 1
Author:  >your name<
Author URI: >your site url<
Tags: free, css,  tutorial, simple, basic
*/

You can change everything that is located after the “:” dots. Save your CSS file as we won’t need it because we are just trying to give to the HTML template functionality.

2.2 Converting the HTML file

After you set up your CSS file, we need to go and change some things in the index.html file. First of all, clear all the sample text.
Save you file as index.php. We do not need the sample text anymore as we will introduce our own text from WordPress later.

Now, we need to make some declarations for the WP theme. We need to make the title dynamic and to set the stylesheet path. These lines will help you:


<?php wp_title('«', true,  'right'); ?> <?php bloginfo('name'); ?>

Now, we will start with the header of the design. For adding your blog’s name with a link to your homepage in the header, we will use this line of code:

The first PHP tag is used for retrieving the blog’s homepage link and the second is for the blog’s name (the one you set in the installation).

Now we’re going further for the loop. The loop is a block of code that will repeat for each post from WordPress. We will use the loop to construct the article. I’ll cover more about the loop in the second part, where we will use it for other things too.

Now, all your code is wrapper by some loop specific tags. Here they are:

Next, we will start constructing the article structure. We will need a title, some info about the dat when the article was published and it’s author.

The following line makes the article title:

The first PHP tag is for the article’s link and the second is for the article title. These tags are kinda self-explanatory. We’re moving further for the meta data (date, author). Copy and paste the following code under the article title code:

Published on by in

First tag is for retrieving the date. The date tag have some parameters. These parameters are setting the date format (month, day, year). You can add characters like “-” or “.” or making something like “Month 02 Day 15 Year 1990″, it’s up to you! The second one, is for echoing the author of the post and the third, is for category or categories that the post is filed under.

Now, we will be placing the content tag. The content tag will output everything you write in a WordPress post:

The tag doesn’t need paragraphs because WordPress auto generates them for you. We’re finished with the loop. You can see the code pieces at the party:

Published on by

Next, we will be going to code the sidebar.

We will start with the navigation. As you see in the CSS layout, the navigation is located in the sidebar. It doesn’t matter because the technique is the same. For creating a basic navigation you need these lines of code, which will placed between the ul tags:

Home

You already know what the first PHP tag does. The second one, is listing the pages that WordPress generates. The parameter is for list title. Try removing it and see what’s happening.

This is all you need to do for getting a nice working navigation menu. Now, we will create the categories list. All the blogs have categories and we don’t want our theme to lack categories. We will just add this code between the div #extra tags:

Categories

There is another listing tag but this one is listing the blog’s categories. I’ll cover more things relating the sidebar in part 2, where i will teach you how to make a theme widget-ready. That means you will introduce new blocks inside of WordPress, without coding anything.

But what about the footer? Shouldn’t it have some text in it? Well, we will write the copyright:

As you see, we have introduced some tags, just like in the header, to output the blog’s title.

The theme is functional, but we will need to make some page templates for single post (where the comments will appear) and the page (where you could write some info about your blog). If you use the same code for the header footer and sidebar, your template would get messy. Let’s say that you want to add one more thing to your sidebar. You will have to modify 3 times for each page template. Well, for avoiding this, we will chop the markup.

For each section of the index.php file we will have a separate file. So we will have header.php, footer.php and sidebar.php. Now, we will be starting to chop!

Copy and then replace the following lines:





<?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>

With the following line:

Your copied code needs to be placed in the header.php file. The same thing we will do with the footer and sidebar

Copy the following:


Navigation Here

 Home




Categories

Paste them to sidebar.php then in the index.php file replace it with:

Now, do the same thing with the footer. Copy the footer div and it’s contents, paste it in footer.php file, and then remove it in index.php with:

You should have something like this:


 
 
 
 
 Published on  by

Now you’re done with chopping the markup. We are going to create the page templates. We will create firstly the single template. Just save your index.php file as single.php. We won’t modify anything in this page yet. We will do it in part 2 where I will learn you how to create a comment form and how to list comments and other things like custom fields.

Now, for the static page, page template, delete the line where you have placed the meta data (the line with date, author and category tags). Then save the file as page.php. Being a page, we won’t need any info about the creation date or the author. We won’t even use comments on page because there is no point in it.

The last move we need to do is to print screen our template and save it in a canvas of 300 x 225 px and save it as screenshot.png in the root directory of your theme. This will be used in WordPress theme menu.

Well, we’re done with the first part. Go ahead and test your theme. If there is something you want to ask, do it via comments. Don’t forget that you can download the source files too.

To be continued

There are a lot of things to cover about WordPress. Making a theme isn’t so difficult, you just need to be patient. There are a lot of things that are needed to make a fully functional WordPress theme. That’s why, this tutorial will have a Part 2. Maybe there will be more parts, but i will let you know what I will be covering in the next part:

Widgetizing the sidebar
Using the single page template: comments, custom fields, author details
Using custom fields for showing an image for each article
Making a nice and working search form

Stay Tuned.

30+ Best Texture Tutorials for Photoshop

Hilde Torbjornsen — Tue, 04 May 2010 21:36:26 +0000

Making art or various designs will often require different textures. It can be that you need it for that extra grungy look or maybe you are trying to recreate a piece of denim for a logo. It can be very useful to be able to make your own textures in Photoshop. This way you get the exact effect you want, its customizable, no need to pay anyone for the use of it etc.
I’ve collected some of the best texture tutorials I know of and hope these will inspire! Enjoy! :)

1. Realistic denim texture

Denim, a rugged cotton twill textile has been around for a long time. The variations you can make to this are many. Check out the Bonus features at the end of this article as one of them features denim!

2. Create an Awesome Grass Texture in Photoshop

The texture of Grass can be used for many different designs, and also here the variations are many.

3. Realistic crumbled paper

The crumbled paper texture is a texture that always is popular. It’s a fairly easy one to get realistic and the uses are many; business cards, websites, brochures, flyers – you name it.

4. Military style

Military style textures are mainly popular for those who make artwork that features military machinery or personnel. But how about switching the colors around a bit? That way you get a versatile look that goes with anything.

5. Reptile/dragon scales

These cool and versatile scales can be made in any color combination you want. This can be used as an exotic part of a design or to actually be used as skin for a dragon, snake or dinosaur you’ve created.

6. Brushed Aluminium

This is a texture trying to recreate the look of the good old Mac Powerbook (g4). Nowadays many things do come with this finish, maybe it even could be cool for a web design or business-card?

7. Metal Mesh

To add an extra dose of industrial funk to your design this very easy-to-make texture is worth a try.

8. Rusty texture

Rusty textures are quite in in several types of design. They make great additions to so-called “grungy” looks.

9. Glass

There are many ways of recreating the look of glass. This way is probably one of the easier ones.

10. Canvas texture imitation

By adding a texture to a picture you have you can make it fit better into a design or even on your wall. In this tutorial you will learn to make a canvas texture that has hundreds and hundreds of uses.

11. Marble

Marble has many different uses, mainly building and sculpturing. Marble comes in several color combinations from the pure white, via red and green – to black. In this tutorial you will learn to make a green one but changing the color is very easy.

12. Rock / stone

Rock can be made several ways. In this tutorial you will learn how to make it in a very quick way. Remember to try out different colors and settings to give it your own look and feel.

13. Rusty Surface

This rusty surface is quite easy to make and looks pretty realistic too. Customizing colors and patterns can be done quickly as well.

14. Fabric folds

This texture is very versatile. Choose the color that fits your design and this can be anything from curtains to bed sheets. Tweak it a bit and it can even be just some sort of smooth abstract element.

15. Wood

Wood has always been popular to recreate in Photoshop, and it’s easier to get it realistic than you might think at first. This tutorial gives kind of a worn wooden look – great for many types of designs.

16. Wood (2)

This second wooden texture tutorial gives us a darker type of wood.

17. Leopard skin

An exotic skin texture that can be used for many different projects.

18. Fur

Another type of recreating fur. Easy to follow and customize.

19. Grungy paper

By using the Photoshop texturizer filter, blend-modes and more you can create this grungy paper look. Perfect for everything from web design to birthday-invitations.

20. Leather

Leather hasn’t been the most popular texture for a while but I see it coming more and more back. Playing around with different colors gives you an interesting look to add to almost any design-project.

21. Diamond Plating

In this tutorial Corey Barker combines Photoshop and Illustrator to make a pretty cool diamond plating texture that can be used in many designs.

22. Metal “fence”

If you don’t have Illustrator or the skills to make texture #21, this is a more light versions of the same look. Play around with some settings and make your own metal.

23. Grungy Metal (+ a star)

Grungy is in, and if you don’t feel like making a rusty texture then maybe metal could be an option?

24. Lava Texture

This crazy looking texture can be used as lava or play around with settings for an abstract look.

25. Red slate tile

Recreate tiles in a house or use it for a design. This good old tutorial gives an interesting look.

26. Bubbles

An easy tutorial showing a texture that can be highly customized to fit many types of designs.

27. Cool stage curtain

This can be used as a background for your project or as part of it. A very well-explained tutorial with a professional look in the end. Takes a while to make compared to some of the others, but is definitely worth it.

28. Realistic sky

Adding some sky can be the extra it-factor needed to create a stunning piece of art/design.

29. Leaf texture

Leafs look quite interesting when you look closely. Here’s a tutorial on how to recreate that.

30. Fabric textures

We finish off with a tutorial that shows us how to easily create several different kinds of fabric. Remember that as easy as they may look it will only require minor adjustments and colorization to get completely new results. This means endless variations!

Those were the 30 texture tutorials I had found for you this time, I hope you enjoyed them!

Finally, here are some cool tutorials related to textures:

Portfolio Layout created with jeans texture

Create an eye-catching portfolio using jeans texture. Download the provided texture or use your own that you’ve made earlier in this round-up :)

Paper Texture from Scratch + Create a Grungy Web Design with it!

Using textures and grungy looks in web designs is quite popular. In this high quality tutorial you will first learn how to create paper (from scratch) followed by making a web design where it’s implemented. Great fun!

How to Turn a Texture into a Seamlessly Tiled Background

Here you will learn some tricks on how to turn your textures into seamlessly tileable background. It’s good to have that in your toolbox, – especially for making backgrounds for your designs.

And that was it for now. I hope you learned a couple of new things, good luck with creating your own textures. Always remember to play around with settings and colors, – maybe you’ll come up with something unique!

How to Create a Sleek Wii Controller

1STWD Editorial — Sun, 02 May 2010 04:52:56 +0000

Today we will be creating one of the most beautiful and evolutionary product. The Wii is a video game system made by Nintendo that has a unique interface that forces players to get physically involved in the game playing action. For creating a Wii Controller in Photoshop, you just need to know the basics of Photoshop to get a great result.

Step 1 – Background

Let’s start by creating a new document of 30 by 50 inch.

Then create a layer, fill it (with any color) and add this Gradient Overlay in the blending Options.

Step 2 – The Wii Shape

Create new layer, select the Rounded rectangle Tool (U). After then, set radius to 22px and create the Wii shape.

I have used following blending options which you can see to get exact result.

Step 3 – Glow

For a little bit glow, create a new layer and then draw a straight white line like I did.

Select the new layer, now hold down CTRL and click on the Wii Body layer thumbnail OR select the Wii layer and go to Select, Load Selection and hit okay.

Now select white then go to the Brush Tool (B) and select the Hard Round brush. Change the Master diameter to about 600 px and click one time like I did to create an inner glow effect.

Now deselect your selection by holding down Ctrl + D. Go to the layer and set the Opacity to about 50% then select your eraser (E) set its Opacity a little bit down like you want and erase a little bit of your glow like I did.

Step 3 – Speakers

Create a new layer. Set your color to the color code: #3a3a3a and create something like this using your brush tool. (in the picture you can see the sizes of pixels i used to create the circles).

Now duplicate the layer (Ctrl + J) then set these blending options for the duplicated layer.

And now create the duplicated layer below the other layer. so it will be like this…

Step 4 – Player LEDs

Your speaker is done. Now let’s begin with the LEDs. So create a new layer and at the bottom of the Wii create 1 square using the color (858585#) and duplicate it twice.

To give a glow, create a new layer, create a square and add this blending options for it.

This is what you will get.

Now create a new layer and set the brush tool to 3px

For the first square set 1 circle, for the second set 2 circles, for the third set 3 circles and for the fourth set 4

For this you need to select the same color of the Wii Body. Now because you can’t see what you are doing because it’s the same color of the Wii, select the Color Overlay in its Blending Options to see what you are doing. After you finish Deselect the Color Overlay and add this Bevel Emboss.

Below is the screen shot of blending options.

Step 5 – Power button

For the power button create a new layer and create a small circle like i did using your preferred tool. (the color doesn’t matter)

and add following Blending Options for it

Now you should have something like this…

Now to create the POWER symbol create a new layer, select a gray color , create a small circle and fill it like below

then create a smaller rounded selection

and delete it.

Create a selection of a vertical rectangular

and delete it

now create a smaller vertical selection and fill it

if you did it good, you should have something similar like this.

then set these blending Options.

Now select the Text Tool (T) and write POWER using the font: Kartika (the color i used for the font is 8a8888#)

Step 6 – Logo

Let’s go down again to write the Wii logo. The logo is just a text, so write “Wii” using your text tool with the color #989898 and using the Font: Sony Sketch EFF.

Step 7 – Home button

create a new layer and create a circle similar like this above the speaker

then add these blending Options.

Now duplicate this layer and set this Blending Options for the duplicated layer WITHOUT deselecting the other settings.

then set the duplicated layer behind the original layer.

Now create a selection around on one of the 2 layers, create a new layer, select “white” and brush like we did in the previous step. (STEP #3

Now create a new layer and create a small house and fill it with the color #31befa

Write below the button, the word “HOME” using the font: Kartika OR Simplified Arabic with the color 878686#.

Step 8 – Minus (-) Button

And add these blending options for it.

then as we did in the previous step. you can do it to create a glow effect.

Then create a new layer and create a small horizontal rectangle line with a gray color

Step 9 – Plus (+) Button

create a new layer, and create a circle like this, but this time at the right side of the HOME button and do the same settings as we did in the previous step. but now create a “Plus at the end.

Step 10 – the A button

Now create a new layer above the home button and create a bigger circle and fill it.

then add these blending options.

Now you should have something like this.

Then create a new layer and create a glow effect like i did below

now create a new layer create just a little bit smaller selection than the button, fill it with white and erase some parts like i did

Now write a Capital Letter “A” with Grey color. For the font use: Simplified Arabic.

Step 11 – the 1 and 2 buttons

Now create a new layer, create a circle and fill it with gray.

then duplicate it and move the duplicated a little bit add the right (The selection is created just to show you what i mean)

After that, add these blending options.

And create a glow effect for it.

then write number “2″ on it. i used the font Kartika.

now duplicate this layers and write “1″ in place of “2″.

you can move the gray circle layer of the other layer a little bit to make it looks different.

Step 12 – The Control Pad

To create the control pad shape select the rounded rectangle tool set it to 2px. Create new layer and follow the picture steps…

create a vertical one…

then a horizontal one.

then add this blending option.

Now if you want, you can create a new layer and brush a little bit on it for a cool glow.

Then create a new layer again to create the 4 lines like this.

Step 13 – Optional

To make this Wii controller like a real one, you can go back to the Power symbol and change the gray color to red.

so let’s go to the Power symbol layer, and change this blending options

Now to get some shadows and some glow, create a new layer and brush with a dark gray color over here.

Step 14 – Reflection

Now for the final step, let’s select all the other layers except the background and holding down “ctrl” or “shift” and selecting them. Then right click on one of them and select “merge layers. Then duplicate the layer (Ctrl + J) and go to Edit, Transform, Flip Vertical, set it below the other layer. and bring the opacity a little bit down.

and this is the end.

Let me know if you have some questions and I will answer you in comments section.

11 Awesome tips to Work without Distraction

Hilde Torbjornsen — Thu, 22 Apr 2010 21:00:53 +0000

In this article I aim to give you some tips on how to be able to work better, undisturbed by everything that is going on around you. Depending on what you work with it may some times be a big advance to be able to work without the interruption from Facebook, e-mail, texts, TV, radio or other things.

Working from home can be a big challenge which is why I decided to share some these tips. Especially if you need to use your creativity and concentrate, it can be hard to get back into the workflow if you are constantly interrupted.

Here are 11 ways to be able to work better in an environment without too much “noise” around you.

1. Make rules

Picture by Lavinia Marin

If you work from home and/or as a freelancer it takes a lot of discipline to be able to work as efficient as you should. The good thing is that you can set your own work hours, but it requires a lot of discipline to work out. My hottest tip on this subject is to make yourself an hour-to-hour timetable for every day. I use the first hour of every Monday to plan the rest of the week. That way it is a lot easier to get a full overview of what needs to be done. Looking into some sort of time management application can be very beneficial aswell.

2. Choose what can disturb you (and when)

It is important to look through your routines and decide what you can allow to “disturb” you. The more unneccessary applications you have open at one time, the bigger chance it is to lose quite a lot of time to that during the day. Don’t be on Twitter, Facebook or similar services unless you have to. If you must check them during the work hours, at least make sure to do it at set time. Same with e-mails and phone calls where you can do certain adjustments too.

Picture by Pascal Montsma

3. Turn off the tv and/or radio

Picture by Vince Petaccio

Unless you for some reason work better when you have the TV or radio on, you should just turn it off before you start working. It’s very easy to be distracted and during a week the this can steal a lot of valuable time away from you if you’re not careful. Some people work best with the radio on in the background, but be careful. Try radio stations that only play music, iTunes, Spotify or Antenna. Just remember that if you have anything turned on in the background, it should be something that doesn’t draw attention away from your work.

4. Answer mails and DMs to specific hours

Once you start getting a few mails directed from your website, ongoing projects and so on, you will see that it can quickly take your mind off what you were doing in the first place. If you decide to look through and answer these one or two times during the day, you will soon feel that your workflow gets a lot better real quick. Same goes for Facebook and Twitter messages, along with other kinds of social media. Decide when you can reply to these and do it that way.

5. Eat at set hours

Picture by Foxumon

Food is important to be able to work well. If you are too hungry or too full it’s harder to focus on what you are doing. The breakfast is the most important meal of the day – always take the time to eat properly in the morning. If you feel you don’t have time to eat properly before you start working, then get up 15 minutes earlier instead. Having a set time for lunch as well, is a good thing for both your body and brain. If you don’t have set hours for eating it can affect the workflow in many ways.

6. Work when you work (everything else should wait)

Keep private errands away from your work schedule. You would be surprised if you realized how quickly a little private mail, phone call or errand eats quickly of your work time. Decide that you will leave everything that is not work related until the afternoon when your day at work is over.

7. Make the best surroundings for yourself

Picture by Henk L

If you sit more or less all day in front of the computer, you have to take a look at your surroundings to make sure you get the work done the best way possible. Make sure your chair is good, that the room isn’t too hot or cold and don’t leave old coffee cups and mess all over your desktop. A little “mess” can be good for your creativity, but try to keep it at a decent level. Remember to get up off your chair for at least a few minutes every hour or so to get your blood flow going.

8. Software settings

If you write a lot, I would recommend a program like jdarkroom where the program can be used in full-screen to not let you be disturbed by other programs or system messages that may pop up. Set as many programs as possible to work in full-screen as it can really boost your workflow. If you have set your system to do timed defragging or backups/virus-scans, try to have these run either in the background (if they can) or set them to run when you are not working.

9. Upload and tag in bulks

If your work requires uploading files/art to various websites, I suggest that you do this in bigger amounts at a time. The same goes for tagging files you import from your camera or elsewhere. By doing things in bulks you get way more efficient. Instead of getting your workflow disturbed by uploading or tagging one thing at the time you will get more done in less time, and keep those tasks from interrupting other parts of your work.

10. Say STOP

Picture by Leslie Watts

When working from a home office it’s important to have the ones you live with understanding that when you’re in there, you’re at work. If you have someone else in the house while you’re working, you may need to have a conversation to them about this. Explain that you need to be undisturbed when you’re in there to be able to get things done. Even if they don’t understand it, at least make them respect it. Set up some rules for when you can be disturbed and not. Keep the door closed if possible.

11. Be consistent

When you’ve made your rules and changed all software and such to fit your plans, the hardest part comes. Now it’s time to actually follow through. Try to stick to your plans no matter what. Obviously there can be very rare situations that can be “excuses” to not follow your daily schedule, but these should be very rare.

Picture by Zsuzsanna Kilian

Those were my tips on how to be able to work undisturbed. Most of these things are very logical but easy to forget in the heat of the moment. I hope you found this useful to you in your situation and invite you to share your own tips and feedback in the comments.

Thank you for reading! :)