I’ve posted the rough details on beginning WordPress development, now I’ll get into the specifics. There are many skills that go into becoming a solid web developer, I’ll cover a specific skill in this and the following posts. I could just dump it all out into one long intimidating article, but it would chase you off or bore you so I’ll try to keep them short and to the point.

Basic HTML and CSS Skills:

It’s tempting to start diving into a pre-built theme and start jacking up the code with snippets from around the web. If you want to be successful you’ll need to start with HTML basics.

Q. WordPress themes and plug-ins are written using PHP, so why does knowing HTML and CSS matter?

A. PHP is it’s own language, but HTML is woven into the core. CSS allows you to express your artistic/creative touch.

If you already know basic HTML and CSS you can probably skip to the next post. For the beginners I’ll provide you with a few good sites that will help you learn the right way. Anyone can do a Google search and find tutorials, but the truth is many or most of the articles you find were posted for SEO purposed and the author didn’t actually care about quality. When I started I followed several dead end suggestions trying to learn. That will waste your time and cause you to freak out and write mean replies which will fall on deaf ears, smash keyboards, cuss at inanimate objects, and other mean and nasty things!

HTML Tutorials:

CodeCademy- This website offers interactive lessons that allow you to progress at your own pace. You can create an account for free so you can keep track of your progress.

Features-

• Step by Step, short tutorials
• Hints if you get stuck
• Progressive difficulty which should accelerate the learning process
• The code editor has a Result Button so you can instantly see how the code is displayed in a browser
• A helpful HTML Glossary Section so you can look up any terms you’re unsure of the meaning

Try to avoid the temptation of wandering off into the other scripting tutorials for now, you’ll have time for that later. When you can create a complete page on your own without hints or templates you will be ready to begin CSS.

The post WordPress Essentials appeared first on IdeaTree Website Design.

The first part of this series will cover the bare essentials needed to begin developing using WordPress, or any web design platform.

Commitment:

1. Be willing to fail
2. Be prepared to get back up after failing
3. Set aside a large amount if not all of your free time to devote to learning

One: This one is important if you’re going to make it. One thing wrong with society today is the fear of failure. Many people pass up or give up simply because they are afraid to fail. Think of things you consider innovative, or great. Now think about the person/people who created them. Do you think they would exist if the creators were afraid of failure? The answer will almost always be no. You won’t get it the first try, you will not succeed if you aren’t willing to fail a time or two.

Two: Another needed asset for developers is the ability to shrug off a failed attempt. The quicker you let it go, the quicker you can try again.

Three: Web development isn’t a casual hobby. It will demand a lot of your time. If you truly enjoy what your doing this one should come naturally. Once you start to learn you’ll naturally want to keep going. If you’re like me the challenge won’t be making yourself keep going, rather the challenge will be making yourself stop.

ToolBox:

1. Almost any computer will work. If you have an old computer you might think about installing a light weight Linux OS to help with “Lag”. If you don’t know where to start with Linux feel free to ask and I’ll point you in the right direction.
2. An Internet connection- This isn’t a must have, but will help test your work. If you don’t have access to the Internet you can still develop using a local server like WAMP or XAMP, or MAMP.
3. A good text editor, or a complete IDE (integrated development environment). For beginners I’d suggest starting with a good text or code editor to keep things simple.
4. A working knowledge of CSS and HTML (PHP and Javascript are great to know, but to start out you’ll need to have a good understanding or HTML and CSS).

I’ll wrap up the first part here and pick things back up in the next article and get into more details and WordPress specifics. If you have any questions or need some suggestions on the ToolBox software just ask and I’ll try to help.

The post The Foundation appeared first on IdeaTree Website Design.

Welcome to the first post in the my new project. If you’re new to WordPress, follow along with our new series. When I started my journey to become a web designer/developer 3 years ago I’ll admit I was overwhelmed. It was exciting to take on the task, but at times the goal might seem out of reach. I’ve received some quality help from the abundant and generous WordPress community. The one thing that could have expedited the learning curve would have been knowing where to look for the answers to my questions.

This series will hopefully give you the resources to reach your goal much faster than I did. I’ll list a short summary of what’s you can expect:

• The foundation or base that defines a true artisan web designer
• Layout a clear path to becoming a solid WordPress designer
• Share the invaluable resources I’ve picked up along the way
• List the challenges you’ll face and how to complete them
• Discuss the basics of a WordPress theme and how it works
• Encourage you to join the WordPress community to learn and help others

There’s the short list of things to come. Feel free to ask questions along the way or suggest a topic. I look forward to getting this started. I’ll get things going by pointing you towards the WordPress Codex pages. Go check it out and learn your way around, I’ll be referring to it quite often.

The post WordPress Users Start Here appeared first on IdeaTree Website Design.

If you’re like me, you try to go as much as possible without installing another plug-in to your WordPress website. There are plenty of plug-ins available for adding a Lightbox or Thickbox effect to your images. For simple WordPress Lightbox or Thickbox effects you should consider taking advantage of the built in JavaScript or jQuery that comes with WordPress. Follow these steps to add the effect to your current theme, or to your custom built themes:

1. First you’ll need to open your functions.php file located in your theme’s files
2. Next copy and paste the code below at the bottom of your functions.php file
   !IMPORTANT: If your functions.php file ends without a closing ?> tag, paste the code as is if the file ends without the closing php tag, remove the <?php start tag from the code below
3. The code will work automatically on all images that are set to “File URL” and not “Attachment Post URL”.

<?php
  function add_themescript(){
    if(!is_admin()){
      wp_enqueue_script('thickbox',null,array('jquery'));
      wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
      }
    }
  add_action('init','add_themescript');
  define("IMAGE_FILETYPE", "(bmp|gif|jpeg|jpg|png)", true);
  function wp_thickbox($string) {
    $pattern = '/(<a(.*?)href="([^"]*.)'.IMAGE_FILETYPE.'"(.*?)><img)/ie';
    $replacement = 'stripslashes(strstr("\2\5","rel=") ? "\1" : "<a\2href=\"\3\4\"\5 class=\"thickbox\"><img")';
    return preg_replace($pattern, $replacement, $string);
    }
  function wp_thickbox_rel( $attachment_link ) {
    $attachment_link = str_replace( 'a href' , 'a rel="thickbox-gallery" href' , $attachment_link );
    return $attachment_link;
    }
  add_filter('the_content', 'wp_thickbox');
  add_filter('wp_get_attachment_link' , 'wp_thickbox_rel');
  ?>

Click the jQuery Logo to see the effect:

The post Use Native WordPress Lightbox appeared first on IdeaTree Website Design.

• Where will you add the Read More links?
• What do you want them to say?
• Have you backed up your template files?

The typical placement for the read more links are in the index.php file. This is the usual template for displaying your multiple blog posts. Other possibilities are; loop.php, archives.php. Once you’ve decided where to put them, and have backed up your template files in case something goes wrong, you are ready to get started.

Step One:

Open your functions.php file and check for any code that may exist for current read more function. It’s important to replace the current functions and not just add this code. Having both functions will cause an error. If you don’t have any current read more function, simply add this to the functions.php file:

<?php
function new_excerpt_more($more) {
   global $post;
   return '… <a href="'. get_permalink($post->ID) . '">' . 'Read More &raquo;' . '</a>';
   }
add_filter('excerpt_more', 'new_excerpt_more');
?>

You can change the text above from “Read More” to whatever you want (continue reading, read the rest of the post, full article, etc…).

Step 2:

Save the file and open your index.php file, or whatever template file you decide to use and add this piece of code:

<?php the_exerpt(); ?>

The post Better WordPress Read More Tag appeared first on IdeaTree Website Design.

What does the WordPress Custom Navigation have to offer?

• If your theme doesn’t have a vertical multi-level drop-down menu this will allow you to add this feature
• You will be able to easily choose which pages appear in your WordPress navigation menu without the use of a plug-in
• Complete control over the layout and order of the navigational menu
• You’ll be able to style the menu however you want
• Dynamic drop-down menu without having to “hard-code” it into your design

OK, lets get started!

First you’ll want to open your themes header.php. You’ll want to find what your theme is currently using for its navigation. If you’re not sure what to look for, here are a few different possibilities:

The list Pages option:

wp_list_pages('exclude=17,38' );

Another Possibility:

<ul id="pagenav">
  <li>
    <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>">Home</a>
  </li><?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&exclude=17,38'); ?>
</ul>

If you’re menu is hard-coded, it will look something like this:

<ul id="menu-main">  
  <li><a href="#">Home</a></li>  
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>  
  <li><a href="#">Blog</a></li>
</ul>

There are several possibilities, if you can’t find your themes navigation menu you can post a reply or send the code to me in an e-mail and I will be glad to help you find it.

Once you have found the navigational code in your WordPress theme you will replace it with this:

<?php wp_nav_menu( array( 'theme_location' => 'main' ) ); ?>

The menu will have an ID of menu-main by default because I added men’ => ‘main’. You can use your themes id or class to keep the current style. You should avoid using id or tags that might get used by another element. I’ve seen other elements like widgets, and sidebars use the “nav” id, so make sure you use something that is unique. You can name it whatever you like just as long as you remember the name so you can style it later using css. This alone won’t do anything to your navigation, you’ll need to open your functions.php file next and add this:

<?php
add_action( 'init', 'register_my_menus' );
function register_my_menus() {
  register_nav_menus(
  array(
    'main' => 'main',
    'secondary' => 'secondary',
    'tertiary' =>  'tertiary', ));
 } ?>

What we’ve just done is add some classes to the drop-down menu so we can have multi-level navigation. I’ve wrapped the code for the functions file in php tags. You should be able to add this to the bottom of you current functions.php file. If you don’t have a functions file, just create a blank text file and name it functions.php, add the code and save it.

It’s important that you back your files up whenever you are working on the functions.php file. If you miss a closing bracket or any number of possible mistakes it can cause you to crash your website.

If you look at you WordPress site now you will notice it isn’t a drop-down menu yet. To finish this up we need to add some CSS code to it. I’ll get you started with some basic styling. You can customize it however you want later.

Here is the CSS:

#menu ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 20;
}
#menu ul li {
float: left;
margin: 0;
padding: 0;
position: relative;
}
#menu li a {
color: #484848;
}
#menu ul li a {
background-color: #F6F6F6;
border-left: 1px solid #484848;
float: left;
font: bold 13px/18px Arial, Helvetica, sans-serif;
margin: 0;
padding: 12px 15px;
}
/*--- DROPDOWN ---*/
#menu ul,#menu ul * {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul ul {
position: absolute;
top: -999em;
float: right;
width: 170px;
/* left offset of submenus
need to match (see below) */
}
#menu ul ul li {
width:300%!important;
}
#menu ul li:hover {
visibility: inherit;
/* fixes IE7 'sticky bug' */
}
#menu ul li {
float: left;
position: relative;
}
#menu ul ul a {
float: left;
display: block;
position: relative;
width: 140px;
}
#menu ul li:hover ul {
left: 0;
top: 42px;
/* match top ul list
item height */
z-index: 99;
}
#menu ul li:hover li ul, #menu ul li li:hover li ul{
top: -999em;
}
#menu ul li li:hover ul, #menu ul li li li:hover ul{
left: 170px;
top: 0;
}
div#menu {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
padding-bottom: 22px;
}
#menu ul li a:hover {
background: #e38484;
color: ghostwhite;
}

Add that to your style.css file, and you now have a WordPress 3.0 compatible custom navigation menu. Now just adjust the style to fit your theme. Good Luck!

To view a sample of the menu, click this link:
Menu Example

The post WordPress Custom Navigation appeared first on IdeaTree Website Design.

CSS Tricks has several things to offer including:

• Questions and Answers Forum
• jQuery, PHP, CSS, htAccess, and HTML Snippets
• A Great Download Section
• Helpful Web Design Videos

The post CSS Tricks appeared first on IdeaTree Website Design.

The post A List Apart appeared first on IdeaTree Website Design.

There are some tutorials, but mostly I use this to find links to icon sets and other free resources for graphic and website designers.

HONKIAT

The post Hongkiat appeared first on IdeaTree Website Design.

Web Monkey Design and Code Resource

Web Monkey is a product of WIRED, an online learning resource website.

The post Webmonkey appeared first on IdeaTree Website Design.