Voosh Themes http://www.vooshthemes.com Wordpress Premium Themes and Templates Thu, 15 Jul 2010 14:56:05 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 WordPress Quick Tip: Highlight Author Comments Using CSS3 http://feedproxy.google.com/~r/VooshThemes/~3/q9gb1PB67BM/ http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-highlight-author-comments-using-css3/#comments Thu, 15 Jul 2010 14:56:05 +0000 Chris Creed http://www.vooshthemes.com/?p=3150 Highlighting comments made by authors in the discussion section of blog posts and articles can be a good way of enhancing the readability of a comments section.

This is very straightforward to do and in this quick tip we’ll be using a little bit of CSS3 to add some nice styling to all comments made by authors.

In this post I’m going to be using the comments section in the Zamka WordPress Theme, but the same code should also work in whichever theme you have installed.

As you can see below, I’ve adapted the Zamka comments section so that all comments have a white background:

Based on the appearance of each individual comment it would be very difficult to locate which comments were made by the author – especially if all the comments had gravatars associated with them.

What we want to do is change the styling of the comment made by me (“Chris Creed” – i.e. the author of the sample blog post used in this example).

Since the release of WordPress 2.7 there has been a function called wp_list_comments which automatically generates a class that can be used style author comments.

This class is called “.bypostauthor” and by targeting this we can easily change the look and feel of author comments. You can test this by adding the following code to your stylesheet:

.commentlist .bypostauthor { 
 
  /* -- Add a darker border - */
  border: 1px #bbb solid;
 
  /* -- CSS3 Linear Gradient -- */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f5f5f5), to(#ddd)); 
  background: -moz-linear-gradient(0% 100% 90deg,#ddd, #f5f5f5);  
 
  /* -- CSS3 Shadow -- */
  -webkit-box-shadow:0px 0 50px #ddd;
  -moz-box-shadow:0px 0 50px #ddd; 
  box-shadow:0px 0 50px #ddd;
 
}

In the above code we’re initially adding a darker border to help the author comments stand out a little more. We’re then adding a linear gradient and a shadow using some CSS3. After you’ve added the code your author comments should look something like the following screenshot:

All done! It’s a subtle effect, but it does help to make the author’s comments stand out much more and can enhance the readibility of a comments section – especially when there are lots of comments to read through.

I hope you found this useful – leave a comment below if you have any questions/feedback/suggestions.

]]> http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-highlight-author-comments-using-css3/feed/ 0 http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-highlight-author-comments-using-css3/ Voosh Themes Club Update http://feedproxy.google.com/~r/VooshThemes/~3/6qeu77cQJV8/ http://www.vooshthemes.com/blog/announcement/voosh-themes-club-update/#comments Fri, 02 Jul 2010 12:48:12 +0000 Chris Creed http://www.vooshthemes.com/?p=3139 This is just a quick note to let you know that the structure of the “Voosh Themes Club” has changed.

You can now get all premium themes on the site for $97 – in addition to this you’ll also get all future themes at no extra charge.

You can get more details about the benefits of being a member on the Voosh Themes Premium Membership page – feel free to get in touch with at chris@vooshthemes.com if you have any questions about becoming a premium member.

]]> http://www.vooshthemes.com/blog/announcement/voosh-themes-club-update/feed/ 0 http://www.vooshthemes.com/blog/announcement/voosh-themes-club-update/ Create A Clean and Stylish CSS3 Contact Form http://feedproxy.google.com/~r/VooshThemes/~3/Jf4rEtDevMI/ http://www.vooshthemes.com/blog/design-tutorial/create-a-clean-and-stylish-css3-contact-form/#comments Tue, 29 Jun 2010 12:20:55 +0000 Chris Creed http://www.vooshthemes.com/?p=3067 Building stylish contact forms typically requires the use of images (and maybe some JavaScript) to create something that looks professional. However, with CSS3 it’s now much easier to create some nice effects that don’t require the use of any images, yet can still look clean and stylish.

In this tutorial we’re going to look at a range of different CSS3 effects – in particular, we’ll be creating background gradients, adding shadows to elements, applying some rounded corners, and adding a couple of simple animation effects.

Click the button below to view the live demo – it works in best in browsers powered by the WebKit rendering engine (i.e. Chrome and Safari), but also degrades well in Firefox, Opera, and IE.

Here’s a screenshot of what we’ll be creating:

Create The HTML Structure

To start with, create a new HTML document and add the following code inside the <body>:

<form action="#"> 
 
        <fieldset id="user-details">			
 
            <label for="name">Name:</label>
	    <input type="text" name="name" value="" /> 
 
	    <label for="email">Email:</label> 
	    <input type="email" name="email" value=""  /> 
 
	    <label for="phone">Phone:</label> 
	    <input type="text" name="phone" value=""  /> 
 
	    <label for="website">Website:</label> 
	    <input type="url" name="website" value=""  /> 
 
	</fieldset><!--end user-details-->
 
	<fieldset id="user-message">
 
	    <label for="message">Your Message:</label> 
	    <textarea name="message" rows="0" cols="0"></textarea> 
 
	    <input type="submit" value="Submit Message" name="submit" class="submit" />		
 
	</fieldset><!-- end user-message -->
 
</form>

This is quite straightforward – we’re simply creating a form that has two containers – one that displays input fields for user details (#user-details) and another that displays a textarea for users to enter their message (#user-message).

Now add the following line in your <head>:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />

This will make a nice font available from the Google Fonts directory – we then need to add some basic styling for the main document elements:

 
* { margin: 0px; padding: 0px; }
 
body { 
    margin: 0 auto; 
    background: #f5f5f5; 	
    color: #555;	 
    width: 800px; 
 
    /* make reference to the Yanone Kaffeesatz font */
    font-family: 'Yanone Kaffeesatz', arial, sans-serif;
}
 
h1 { 
    color: #555; 
    margin: 0 0 20px 0; 
}	
 
label {	
    font-size: 20px;
    color: #666; 
}
 
fieldset { border: none; }
 
#user-details { 
    float: left;
    width: 230px; 
}
 
#user-message { 
    float: right;
    width: 405px;
}
 
textarea {		
    width: 390px; 
    height: 175px; 		 		
}

Apply Some CSS3 Magic

Now onto styling the form – in each part we’ll initially add the standard CSS code first and then move on to discuss the CSS3 code that helps to enhance everything. So, to start with, add the following CSS code to style the form:

form { 
    float: left;
    border: 1px solid #ddd; 
    padding: 30px 40px 20px 40px; 
    margin: 75px 0 0 0;
    width: 715px;
    background: #fff;
}

If you check in the browser you should have something that looks like the following image:

We now want to add some rounded corners, a linear gradient background, and a drop shadow to the form – to achieve this we’re going to make use of some CSS3 code. Add the following code at the bottom of your “form” element:

form {
 
...
 
/* -- CSS3 - define rounded corners -- */	
-webkit-border-radius: 10px;
-moz-border-radius: 10px; 
border-radius: 10px;
 
/* -- CSS3 - create a background gradient -- */
background: -webkit-gradient(linear, 0% 0%, 0% 40%, from(#EEE), to(#FFF)); 
background: -moz-linear-gradient(0% 40% 90deg,#FFF, #EEE); 
 
/* -- CSS3 - add a drop shadow -- */
-webkit-box-shadow:0px 0 50px #ccc;
-moz-box-shadow:0px 0 50px #ccc; 
box-shadow:0px 0 50px #ccc;
 
}

In the above code, the “-moz” prefix is used to target Gecko based browsers (e.g. Firefox and Flock) whilst the “-webkit” prefix is used for browsers powered by the WebKit rendering engine (e.g. Chrome and Safari).

Once you’ve added this code your form should look something like the following screenshot:

As you can see, with just a few simple lines of CSS3 we’ve already significantly enhanced the appearance of the form. Now let’s add the basic code for the <input> and <textarea> elements:

input, textarea { 		
    padding: 8px; 
    margin: 4px 0 20px 0; 
    background: #fff; 
    width: 220px; 
    font-size: 14px; 
    color: #555; 
    border: 1px #ddd solid;
}

Following this, we want to add a drop shadow to each input element and a CSS3 transition effect (i.e. an animation), so that we can fade in a different background color whenever the user hovers over an input/textarea element. To do this, we initially need to add the following code:

input, textarea {
 
...
 
/* -- CSS3 Shadow - create a shadow around each input element -- */ 
-webkit-box-shadow: 0px 0px 4px #aaa;
-moz-box-shadow: 0px 0px 4px #aaa; 
box-shadow: 0px 0px 4px #aaa;
 
/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */		
-webkit-transition: background 0.3s linear;					
}

The transition effect will be triggered when the user hovers over the input and textarea elements – we therefore need to add the following code to define the action to be taken on this event:

input:hover, textarea:hover { 
    background: #eee; 
}

If you now hover over an input field or the textarea you should see the background color change to grey over a short delay (0.3 seconds). Your form should now look almost complete:

It’s now time to work on the submit button – again we’ll add our standard CSS code first:

input.submit { 	
    width: 150px; 
    color: #eee; 
    text-transform: uppercase; 
    margin-top: 10px;
    background-color: #18a5cc;
    border: none;
}

Then add a CSS3 transition, gradient, and some rounded corners:

input.submit {
 
... 
 
/* -- CSS3 Transition - define which property to animate (i.e. the shadow)  -- */
-webkit-transition: -webkit-box-shadow 0.3s linear;
 
/* -- CSS3 Shadow - create a shadow around each input element -- */ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#18a5cc), to(#0a85a8)); 
background:  -moz-linear-gradient(25% 75% 90deg,#0a85a8, #18a5cc); 
 
/* -- CSS3 - Rounded Corners -- */
-webkit-border-radius: 4px;
-moz-border-radius: 4px; 
border-radius: 4px;
 
}

We then need to trigger the animation on the :hover event, so let’s add the code for that:

input.submit:hover { 		
    -webkit-box-shadow: 0px 0px 20px #555;
    -moz-box-shadow: 0px 0px 20px #aaa; 
    box-shadow: 0px 0px 20px #555;		
    cursor:  pointer; 
}

If you now test the code in your browser you’ll see a fairly large shadow around the button whenever you hover over it (note that this effect is only available for WebKit browsers, so you’ll need to test it in Chrome or Safari to see it working).

Your form should now be complete:

All Done …

That’s everything done – you now have a clean contact form made with nothing other than CSS. Of course, there are still some issues with implementing CSS3 in that it wont work in all browsers, but the form has been designed to degrade well in older browsers.

You can use the buttons below to take a closer look through the live demo – you can also download and have a play around with the source code.

I hope you found this useful – let me know in the comments below if you have any comments/suggestions/feedback.

]]> http://www.vooshthemes.com/blog/design-tutorial/create-a-clean-and-stylish-css3-contact-form/feed/ 22 http://www.vooshthemes.com/blog/design-tutorial/create-a-clean-and-stylish-css3-contact-form/ New Theme Release: Zamka http://feedproxy.google.com/~r/VooshThemes/~3/Iqh0vh8kg48/ http://www.vooshthemes.com/blog/announcement/new-theme-release-zamka/#comments Thu, 17 Jun 2010 16:38:40 +0000 Chris Creed http://www.vooshthemes.com/?p=3049 I’ve just released my latest theme – it’s called Zamka and is ideal for individuals and small businesses looking to promote their services online.

It comes with a range of different page templates including a professional front page design, a clean portfolio template, and a minimalistic blog design.

Other features include six different color schemes, Google Analytics integration, advertisement management, a fully functional contact form, and much more!

The download file contains all source files, the fully layered Photoshop file, and instructions about how to install and configure the theme.

You can get more details about the main features by visiting the Zamka features page – there’s also a live demo you can check out to get a closer look at the theme.

Note for Voosh Themes Club Members: Zamka is now available for you to download in your account area.

Not a Voosh Themes Club Member? Sign up today and get all themes for $97.

]]> http://www.vooshthemes.com/blog/announcement/new-theme-release-zamka/feed/ 0 http://www.vooshthemes.com/blog/announcement/new-theme-release-zamka/ Zamka http://feedproxy.google.com/~r/VooshThemes/~3/APS4RReF4gY/ http://www.vooshthemes.com/wordpress-theme/zamka/#comments Thu, 17 Jun 2010 16:10:09 +0000 Chris Creed http://www.vooshthemes.com/?p=3038

]]> http://www.vooshthemes.com/wordpress-theme/zamka/feed/ 0 http://www.vooshthemes.com/wordpress-theme/zamka/ Things To Consider When Using WordPress For Client Websites http://feedproxy.google.com/~r/VooshThemes/~3/OjdxnaRfCEM/ http://www.vooshthemes.com/blog/wordpress-tip/things-to-consider-when-using-wordpress-for-client-websites/#comments Tue, 15 Jun 2010 13:20:21 +0000 Chris Creed http://www.vooshthemes.com/?p=3026 When using WordPress for client websites it’s important to give some additional consideration to how you intend to install and configure the site for them.

You need to think ahead of time to anticipate any issues as they are likely to have little experience with WordPress and may be unsure how to complete even the easiest of tasks.

In this article I want touch of some of the things that you might want to give some thought to if you’re using WordPress to power websites for your clients.

Upgrades

One thing that your clients will almost certainly need to do when using WordPress is upgrade to the latest version. Several new updates are typically released throughout the year (for both WordPress and individual plugins) that contain bug fixes, patches for security holes, and new functionality.

However, there are always risks associated with upgrading – the functionality of a site can be significantly affected and it’s not uncommon for there to be incompatibilities with installed plugins. This can potentially cause a range of issues with a website and as a result it’s usually best to test things locally before upgrading.

This could be an issue though as the vast majority of clients are unlikely to test anything before upgrading. To address this, you may want to consider altering their WordPress installation so that they can’t see update messages for both the WordPress core and individual plugins (check out this article to find out how to remove the WP dashboard message).

By doing this you can ensure that your clients wont take it upon themselves to update without consulting you first. However, it’s probably best to discuss this with your clients first – it’s always worth informing them about the benefits of upgrades and also the associated risks.

Offer Training / Video Tutorials

If you’ve been using WordPress for a while you’ll no doubt find it really easy to use – however, lots of clients will have little technical experience and will find even some of the most basic tasks (e.g. publishing posts, adding categories, etc.) difficult without some basic training.

It’s therefore worth taking the time to tell your clients how to use WordPress – you can do this in a variety of ways – written documentation, in person, over the phone, or a good approach is to record some short videos that show how to do basic things such as adding posts/pages, editing content, adding categories, and deleting posts.

The good thing with this approach is that you can then reuse these videos for each new client that you build a WordPress site for.

Custom Fields

When building a theme for client websites I think it’s best to reduce the amount of custom fields that you use. Whilst they offer lots of potential to extend the core functionality of WordPress, they can also come across as being quite technical and intimidating to clients.

For example, when building a WordPress site that incorporates a portfolio, it’s not uncommon with many themes out there for you to have to create a new post (which actually is supposed to represet a portfolio item) and then associate custom fields with that post that provide details such as an overview of the portfolio item, a URL to an image screenshot, project dates, etc.

This is not intuitive to those who have little experience with WordPress – they just want to click buttons that say “Add New Portfolio” and “Add New Project” which then take them to pages where they can select things from drop-down boxes and enter text into input fields.

With the new custom post type functionality that will be included in the imminent release of WordPress 3.0, it will be much easier to create this type of functionality for users.

Making use of this feature will enable you to reduce your reliance on custom fields and therefore create a more intuitive interaction experience for your clients.

Security

If possible it’s worth taking the time to enable Akismet for your clients to stop them receiving lots of comment spam. It’s also worth taking steps to enhance the security of their site – so, for example, you might want to perform some of the standard security steps for them such as ensuring they use a secure password, deleting the admin user, restricting access to important areas via .htaccess, and hiding the WordPress configuration file (wp-config.php).

I’ve written about each of these before in a previous post (Make Your WordPress Site Hack-Proof) – check it out if you’d like some tips about making WordPress sites more secure.

It may also be worth installing some security plugins as well to enhance security – there are numerous ones out there including WP Security Scan and WordPress Exploit Scanner that help to check your site for any vulnerabilities.

Others aim to protect your site through the use of a firewall (e.g. WordPress Firewall) or through Anti-Virus (e.g. WP AntiVirus).

Database Backups

Another thing that your clients might not give consideration to is the fact that they’ll need to backup their WordPress database.

WordPress Database Backup is a great plugin that will allow clients to easily update their sites and then send the backup to their email account. They can even set it to run daily, weekly, or as frequently as they choose – so they can essentially set and then forget about it.

This is also quick and easy for you to implement, so it doesn’t take up too much of your time – just be sure to run through with your clients how the plugin works and the different functions it provides.

Analytics

It’s likely that your clients will want to monitor traffic to their site, so you’ll want to make this easy for them to do.

There are several approaches you could use here – you could get clients to give you their analytics tracking code and then copy it into the site manually yourself. Or you could provide a theme option that allows them to complete this task themselves.

You could also use a plugin, but that may be overkill – the key thing is to ensure that this is configured for your clients so that they can then easily monitor visits to their site.

Bookmark Important Pages

It’s always worth telling clients to bookmark the WordPress Admin login screen – whilst it’s obvious to those of us who use WordPress on a regular basis where to access this page, those who are relatively new to WordPress wont be aware of the URL they’ll need to visit.

It’s therefore worth ensuring that they bookmark both the login page and the obviously the main URL of their site.

Your Thoughts?

These are just some suggestions about what you need to give consideration to when using WordPress on client websites – obviously this will depend on individual client needs and the nature of the project, but hopefully the areas I’ve discussed cover the main points.

Do you use WordPress for client websites? Leave a comment below if you have any advice or if you think I missed anything out…

]]> http://www.vooshthemes.com/blog/wordpress-tip/things-to-consider-when-using-wordpress-for-client-websites/feed/ 4 http://www.vooshthemes.com/blog/wordpress-tip/things-to-consider-when-using-wordpress-for-client-websites/ Integrate Google Analytics With Your WordPress Blog http://feedproxy.google.com/~r/VooshThemes/~3/oP3SbDHUQQU/ http://www.vooshthemes.com/blog/wordpress-tip/integrate-google-analytics-into-your-wordpress-blog/#comments Wed, 09 Jun 2010 16:51:04 +0000 Chris Creed http://www.vooshthemes.com/?p=3006 It’s important to keep track of how many people are visiting your website and to monitor some key statistics such as the number of unique visits, the pages most viewed, and the length of time visitors are staying on your site.

Google Analytics is the main tool that is used for this task and does a very thorough job – you can get information on just about everything and really drill down and understand how people are interacting with your website.

In fact, the amount of data it provides can be a little overwhelming if you’re relatively new to statistical applications. However, it’s certainly a great tool and something that you’ll want to be using to track visitors to your WordPress blog.

Quick Tip For iPhone Users – many people prefer using the Analytics App for the iPhone to view Google Analytics data as it’s less overwhelming than the standard web-based version and does a good job of providing you with key data about your website’s traffic.

Once you have created your Google Analytics account there are three primary ways in which you can enable it on your WordPress powered site.

1. Manually add it to your footer.php file

This is relatively quick and easy – copy the code that Google Analytics provides you with and paste it the bottom of your footer.php file (just above the </body> tag).

Save your changes and Google Analytics will be enabled. The only downside to this approach is that the footer.php is a “theme” file which means that if you change your theme you’ll need to update the footer.php file on your new theme.

This can be something that’s very easy to forget to do when changing themes, so bear it in mind when using this approach.

2. Edit the functions.php file

Another separate approach is to edit your functions.php file – add the following code to this file:

<?php
add_action('wp_footer', 'enable_google_analytics');
function enable_google_analytics() { ?>
// Edit Your Google Analytics Code Here
<?php } ?>

Make sure that you add your Google Analytics code in the appropriate place and it will then be integrated with your site and ready to start monitoring traffic.

Again, the main issue with this approach is that the “functions.php” file is a theme specific file. So, as with the footer.php approach, if you decide to change your theme you’ll need to update the functions.php file in your new theme.

3. Use a plugin

One way to get round the issue of editing theme specific files is to use a plugin – there are some useful ones around that do the job such as Google Analytics For WordPress.

The only slight downside to this approach is that you have to add another plugin to your website which adds an additional overhead when the same functionality can be achieved in a just few lines code.

However, if you change themes the plugin should continue to work, so you can set and forget it which is appealing to many people.

In summary, all of the above approaches will work just fine – the one you choose largely depends on your own personal taste. If you change your site’s theme on a regular basis you may want to opt for the plugin approach.

If, on the other hand, you’re unlikely to change your theme in the near future maybe option one or two might be suitable for you.

]]> http://www.vooshthemes.com/blog/wordpress-tip/integrate-google-analytics-into-your-wordpress-blog/feed/ 0 http://www.vooshthemes.com/blog/wordpress-tip/integrate-google-analytics-into-your-wordpress-blog/ WordPress Quick Tip: How To Change The WordPress Admin Footer Text http://feedproxy.google.com/~r/VooshThemes/~3/mPejhDvih1Y/ http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-how-to-change-the-wordpress-admin-footer-text/#comments Tue, 08 Jun 2010 15:14:52 +0000 Chris Creed http://www.vooshthemes.com/?p=2989 In a previous tip I showed you how to add your own logo to the WordPress Admin login screen. This can be useful if you need to customize WordPress installations for clients and it helps to keep the branding of the site consistent.

Another place where you may like to add some custom branding is the WordPress Admin footer – by default the content displayed here is a little generic, so you may want to adapt it to make it more relevant to your client’s business/organization.

Here’s what’s displayed by default in the WordPress Admin footer:

To change this to something more suitable add the following code to your functions.php file:

<?php function change_footer_content () {
    echo "Copyright &copy; 2010 / My Company Name / All Rights Reserved";
} 
add_filter('admin_footer_text', 'change_footer_content');
?>

Save your changes and then view your WordPress Admin area – you should now see that the footer text has changed.

Nice and simple! I hope you find this tip useful – let me know if you have any questions/feedback.

]]> http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-how-to-change-the-wordpress-admin-footer-text/feed/ 1 http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-how-to-change-the-wordpress-admin-footer-text/ Create A Professional Portfolio Using WordPress 3.0 Custom Post Types http://feedproxy.google.com/~r/VooshThemes/~3/MCMN9MTb0L4/ http://www.vooshthemes.com/blog/wordpress-tip/create-a-professional-portfolio-using-wordpress-3-0-custom-post-types/#comments Mon, 07 Jun 2010 14:10:43 +0000 Chris Creed http://www.vooshthemes.com/?p=2902 WordPress 3.0 will be released in the near future and the first release candidate (RC1) is currently available to download and have a play around with. There are lots of great new features included in the latest update with one of the most interesting and useful being that of custom post types.

In this tutorial I’ll show you how to make use of the new custom post functionality to create a portfolio for your WordPress site.

What Are Custom Posts?

Custom posts are similar to blog posts in that you can add and edit them in the same way, but they differ in that they can be used to represent any sort of concept. So, for example, you might use a custom post to add a new project to a portfolio, a book to an online library, or a new member to subscription site.

When you create a new custom post type it will appear in your WordPress Admin menu and will enable you to create new “things” in much the same way you currently create posts and pages.

There are several advantages to this – for instance, it will make things much tidier and easier to manage as we’ll no longer have to use numerous custom fields to create sites that have portfolios, galleries, products, and any other type of custom post.

It will also be much better for those who are not experienced WordPress users – it will make it far easier for them to configure and maintain sites themselves as the interface will be much more intuitive.

For example, when adding a new product to an ecommerce site, all they will need to do is select the “Add New Product” link, provide some details about that product (e.g. a name, image, price and description) in the fields provided, and then save their updates.

Nice and easy!

Creating A Portfolio

Now we know what custom posts are, it’s time to get our hands dirty. We’ll be adding a website portfolio that makes use of the new custom post functionality to the Kanzoo WordPress theme. Whilst I’ll be using this theme to demonstrate what you need to do, you’ll be able to use the code provided in any of your own sites/themes.

We’re aiming for something simple that has just a few portfolio items – you can then use this as a template to create a bigger and better portfolio – this is what we’re looking to build:

Create The Custom Post Type

The first step in creating the portfolio is to actually create the new custom post type – you can do this by adding the following code to your functions.php file:

<?php
	add_action('init', 'create_portfolio');
	function create_portfolio() {
    	$portfolio_args = array(
        	'label' => __('Portfolio'),
        	'singular_label' => __('Portfolio'),
        	'public' => true,
        	'show_ui' => true,
        	'capability_type' => 'post',
        	'hierarchical' => false,
        	'rewrite' => true,
        	'supports' => array('title', 'editor', 'thumbnail')
        );
    	register_post_type('portfolio',$portfolio_args);
	}
?>

The first line of this code uses the “init” hook to ensure that the “create_portfolio” function is called when WordPress is initialized. This function is then defined on line 2 and essentially creates the new custom type via an array called $portfolio_args.

The “register_post_type” function is then passed the name of our custom post type (i.e. “portfolio”) and the “$portfolio_args” array that defines the custom type.

You can view the available arguments for “register_post_type” in the WordPress codex.

Input Fields For Our Portfolio

The next step is to create an input field that allows the user to enter some related details about the portfolio items. We’re going to keep things simple and will add a textfield where users can enter a website URL that points to a live demo of a project – add the following code to your functions.php file:

<?php
	add_action("admin_init", "add_portfolio");
	add_action('save_post', 'update_website_url');
	function add_portfolio(){
		add_meta_box("portfolio_details", "Portfolio Options", "portfolio_options", "portfolio", "normal", "low");
	}
	function portfolio_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$website_url = $custom["website_url"][0];
?>
	<div id="portfolio-options">
		<label>Website URL:</label><input name="website_url" value="<?php echo $website_url; ?>" />		
	</div><!--end portfolio-options-->   
<?php
	}
	function update_website_url(){
		global $post;
		update_post_meta($post->ID, "website_url", $_POST["website_url"]);
	}
?>

The first line of code here simply states that when the WordPress admin panel is initializing, call the “add_portfolio” function. This is defined on line 3 and basically adds a new section to the custom post called “Portfolio Options” and tells WordPress to use the “portfolio_options” function (line6) to display the appropriate elements in the new section.

The second line of code above is for recording user input whenever a custom post is updated – this is implemented by calling the “update_website_url” function which then ensures that any input is stored.

Your portfolio page should look something like the following (you can access this page by selecting the new “Portfolio” link in your WP Admin):

We now need to add some more appropriate columns to the the “Portfolio Overview” page – add the following code to the functions.php file:

<?php 
add_filter("manage_edit-portfolio_columns", "portfolio_edit_columns");
add_action("manage_posts_custom_column",  "portfolio_columns_display");
 
function portfolio_edit_columns($portfolio_columns){
	$portfolio_columns = array(
		"cb" => "<input type=\"checkbox\" />",
		"title" => "Project Title",
		"description" => "Description",
	);
	return $portfolio_columns;
}
 
function portfolio_columns_display($portfolio_columns){
	switch ($portfolio_columns)
	{
		case "description":
			the_excerpt();
			break;				
	}
}
?>

This will enable users to easily see details of the projects that they have added to their portfolio:

Displaying The Portfolio

OK, so now that we have the backend sorted and the custom “portfolio” post type created, we want to display the portfolio items on the screen. Let’s create a new page template called “portfolio.php” – here’s the code for that file:

<?php
/*
Template Name: Portfolio
*/
?>
<?php get_header(); ?>
	<div id="content">
	<?php 
		$loop = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => 10)); 
	?>
	<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
	<?php	
		$custom = get_post_custom($post->ID);
		$screenshot_url = $custom["screenshot_url"][0];
		$website_url = $custom["website_url"][0];
	?>
        <div id="portfolio-item">
		<h1><?php the_title(); ?></h1>
		<a href="<?=$website_url?>"><?php the_post_thumbnail(); ?> </a>
		<?php the_content(); ?>
	</div>
        <?php endwhile; ?>  
        </div><!-- #content -->
<?php get_footer(); ?>

Let’s break that down a bit – lines 1-3 tell WordPress that this is a page template called “Portfolio”:

/*
Template Name: Portfolio
*/

The important bit of code is the following:

$loop = new WP_Query(array('post_type' => 'portfolio', 'posts_per_page' => 10));

This tells WordPress to loop through the portfolio post type and display the individual portfolio items. The rest of the code is essentially defining what should be displayed on the screen for each individual portfolio item.

Now create a new page in your WordPress admin panel and assign the “Portfolio” template that we just created to it.

Now create some new portfolio items and add a thumbnail to each one:

If you now view your page in the browser, you should see the thumbnails being displayed for each individual project, along with the project title and description. However, it may look a little messy and require some styling – here’s the CSS code that I used for the Kanzoo theme – you many need to adapt this for your site to make the look and feel consistent:

<style>
	#content { width: 1200px; margin: 20px 0 0 -60px; }
	#portfolio-item { float: left; margin: 0 0 0 60px; width: 280px; }
	#portfolio-item h1 { font-size: 16px; margin: 20px 0 5px 0; }
	#portfolio-item img { border: 1px #ccc solid; margin: 0 0 10px 0; }
</style>

This results in the Portfolio looking a little tidier:

All Done!

So, that’s it – the example provided in this tutorial can be adapted for all sorts of custom posts (books, people, products, films, phones, cars, etc.), so have a play around and see how it easy it is to enhance your themes.

I hope you found the tutorial useful – leave comment below if you have any questions/feedback.

]]> http://www.vooshthemes.com/blog/wordpress-tip/create-a-professional-portfolio-using-wordpress-3-0-custom-post-types/feed/ 49 http://www.vooshthemes.com/blog/wordpress-tip/create-a-professional-portfolio-using-wordpress-3-0-custom-post-types/ WordPress Quick Tip: Remove The Dashboard Update Message http://feedproxy.google.com/~r/VooshThemes/~3/Etvj9UQRpOU/ http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-remove-the-dashboard-update-message/#comments Fri, 04 Jun 2010 15:01:45 +0000 Chris Creed http://www.vooshthemes.com/?p=2930 A particularly useful function of WordPress is that it informs you when a new update is available to download. This is displayed at the top of your WordPress admin panel and provides a link to the update page where you can automatically install the new available version.

Updating your WordPress installation is important because the latest version will likely contain security updates and will give you access to any new functionality that has been developed.

However, there are occasions where you might not want this message to displayed – for example, if you’re building a WordPress site for a client, you might want to remove the message to stop them from updating the site themselves.

WordPress update message in the dashboard

This is because sometimes it’s best to initially test the effects of a new WordPress update locally to ensure that it doesn’t cause the site any problems – it’s not unusual to have configuration issues with plugins that cause the website not to display or work properly.

Removing the update message is very straightforward to do – simply add the following lines of code to your functions.php file:

remove_action('wp_version_check', 'wp_version_check');
remove_action('admin_init', '_maybe_update_core');
add_filter('pre_transient_update_core', create_function( '$a', "return null;"));

Then check your WordPress admin panel and you should see that the message has disappeared.

Whilst this removes the update message, please make sure that you still update to the latest version when it becomes available. Not doing so can leave you vulnerable to security risks, so make sure you’re aware of when new versions are released and ensure that you apply the update.

I hope you found this tip helpful – let me know if you have any questions or comments.

]]> http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-remove-the-dashboard-update-message/feed/ 1 http://www.vooshthemes.com/blog/wordpress-tip/wordpress-quick-tip-remove-the-dashboard-update-message/