Create a Multi-Layout Portfolio with WordPress

WordPress, as a content management system, is frequently used for creating portfolio websites. With the progress of consumer interface design and functionalities, a new tendency has emerged: displaying portfolio substance in unrelated layouts. This tutorial particulars the method of creating a committed portfolio section in WordPress’ backend, and using jQuery and CSS3 to display the portfolio in a fashionable approach.

In this tutorial, we are going away to expansively use dominant facial appearance of WordPress, such as custom posts, custom taxonomies, and we’ll also inscribe a function to fetch our personal custom excerpts.

Step 1 - Installing WordPress and Initializing the Theme.

The initial step in building our portfolio website is to install WordPress. This is a easy task, and, even superior, the majority web hosts out there make available one click installers. However, if you are new to this, here is an awesome guide to facilitate you out with the installation.
Once the installation has fulfilled, we should after that create our custom theme which will show our portfolio. There are a variety of methods for creating custom themes. Several like better to create a new blank white template, even as others settle on to create child themes of the new TwentyTen template. For this lesson, we will make use of the Starker's theme, by Elliot Jay Stocks. It's a totally empty theme with no styling; it’s a immense base to create our theme on. Edit the styles.css file, and modify the theme name referenced at the top. To install the theme, merely paste the theme folder in the wp-content > themes folder. Once the theme is installed, you can make active it by obtainable to the themes page.

Step 2 - Planning the Layout

Our portfolio site will not hold much data. A basic portfolio site contains images of the projects, several tags to classify the projects, and a short explanation of each. The multi-layout theme will function in such a manner that the user can select stuck between a grid and list layout. Like numerous multi layout websites accessible, we are not going to fill a unusual page when the user clicks on the list view or the grid view. As an alternative, we’ll use AJAX to asynchronously load in the new observer. This is the essential design of how our portfolio site will emerge in grid mode:

On one occasion the user clicks on the list view manage, the entire layout will smoothly modify to a list view which will include the title of the project, the tags associated with it, and a short explanation.

Step 3 - Setting up the Backend

Intended for our portfolio, we require to register a custom post type, called “project.” We can modify every portion of a WordPress post. For example, we can modify the labels occupied, select various features for the post like to comments, thumbnails, excerpts, etc.
To execute a custom post, edit the functions.php file positioned within the theme folder. It holds a lot of predefined code, as the naked Starkers theme provides some functionalities of the evasion TwentyTen template. Don’t be scared or confused; you can add on the subsequent code either at the bottom or top of the functions.php file.
We fastener our custom function to the initialization (init) action in the subsequent technique:

This project_custom_init method will be used to register the custom post category in the WordPress database.


You can discover in recognize about the method engaged in registering a custom post variety here.
he register_post_type method requires a surname for the custom post, and a set of arguments, which define the individuality of the custom post. Firstly, we need to define the labels for the custom post. These labels will be used for the custom post in the WordPress admin.

On one occasion we’ve distinct the labels, we need to describe the set of influence for the custom post type. The labels array define earlier is going to be an argument as well. Formerly the arguments are defined, we register the custom post nature as “project”.

Create Custom Messages for the 'Project' Post

We can also optionally insert custom post for the custom post type. These post will be showed in the WordPress dashboard while we edit or update the custom post. We can do this by creating a strain for the post simplified messages in the following way:

Registering a Custom Taxonomy

We after that require significant a custom classification for the tags to be used with each of the portfolio items. You can learn more about the register classification manner here.


Go back to your WordPress dashboard, and open the media settings from the settings tag. Here, you comprise to set the evasion bulk for the portfolio image thumbnails. You’ll also observe in the sidebar that the “Project” custom post nature has been effectively registered, along with the custom classification, “tags.” We can inventory the default thumbnail size by means of the set_post_thumbnail method, but I’ll reveal another way to attain this. You can gain knowledge of more about how to place post thumbnail sizes programmatically here.

Create Demo Portfolio Items

Create several demo portfolio items by going away to projects and clicking on add new. We need a title for the project, the content, and a thumbnail. We can observe that a tag segment has also appeared and confirms that our custom classification was effectively registered. Add several tags for the portfolio stuff, as well.

Step 4 Coding and Styling The Template

Coding the static template

To craft the theme, we will first craft a static HTML/CSS3 pattern for the website. This separates the two errands of making the website look unswerving with the design, and enticing the content from the database. Coding the theme openly may be a bit puzzling for beginners occasionally – specially, if a lot of content is exist in the theme. Create three folders, named
“css”, “images” and “js,” respectively. The common formation for the main content locale will be like so:

Style the Template

Styling the template is needy on you. You can research with unlike colors and images to suit your desires. But for this template, we are arrival to create a dark grime theme and use some fun CSS3 to accomplish those slight hover effects and transparency. The slicing up of the design into metaphors is rather. As such, I won’t go over the minutiae here.
The following are the common styles for the project record. We will later do explicit styling for each grid layout manner and a list design mode depending on the current class of the folio list.


Also create note that we are not using the common opacity method of achieving transparency using CSS3. By means of the opacity method also affects the brood of the parent container on which the opacity is useful. As an alternative, we are using the RGBa method of adding up backdrop colors to the container, and using the alpha worth to control the transparency of the container.


You can learn more about the RGBa Property in this remarkable article.


This does not involve the transparency of the children fundamentals. We also need to create IE definite CSS code to sustain the alpha transparency.


In the HTML makeup, you will perceive that there is a class prearranged to the portfolio record.


Essentially, the “grid” class is used to show the list in a grid sight and the “list” class is used to show the list in a list view. In the grid mode, all the extra content is unseen from the user, and in the list manner, all the content is able to be seen to the user. We have two take apart sets of styling for each manner. The styles for the grid manner are as follows:

List manner styles are as follows. At any instant, only one of the grid or list styles is dynamic.


We after that will use jQuery UI to change the class of the folio record with deference to the layout button clicked by the user. We’re detecting the click occasion of the layout manage buttons, enticing the current class and the new class to be activated, and then using the add and remove class methods to modify the classes. We also have a set of parameters which identify the velocity of the events enchanting place.

Step 5 Integration with the WordPress Theme

Now that we have finished the static adaptation of the site, we can amalgamate it with the WordPress theme in a material of minutes. All we require to do is ring through the posts using a wp_query object with a query for the institution post type. Then, we lay the content in the respective position in the template.

Edit header.php

Initially, we need to change the header.php template, and embrace our custom JavaScript files. In this lesson, we’ll embrace jQuery using the Google’s CDN version. We will deregister the jQuery provided by WordPress, and register Google’s CDN version of jQuery. Paste the following snippet in your functions.php file.



Be in motion the css, js and images folders – that you shaped formerly for the motionless template – to the WordPress theme folder. Insert the jQuery UI custom file, and the major script file in the header. Make sure it is inserted below the wp_head technique.

Create the Main Template

At the moment, you can either build a new template in the theme – for example, page-home.php – or you can change the index.php already in attendance in the theme file. If you choose the previous process, then:

• Build a page
• Place the page’s template as the template you just fashioned.
• Go to the interpretation settings in the settings tab.
• Select the homepage as a motionless one.
• Choose the page you just fashioned as the homepage.

The template will first contain the header, which you can call using the get_header() method, then the main content, which you will code within the template itself. Lastly, the footer, which you can be included, via the get_footer() method.
The subsequent code demonstrates how you can generate a custom query by means of the wp_query object.

We are using a variable, count to count the figure of items in the catalog. We require this because we will remain only four substance in each line and assign a ‘rightmost‘ class to each fourth list constituent. The ‘rightmost‘ class eliminates any right fringe to the list elements. Alternatively, we could, in our CSS file, use the li:nth-child(4n) selector.

The subsequent code illustrates how we can loop through the posts and insert the content, as required.


Surrounded by the loop, we put in the content in the ordinary WordPress mode, using the $loop wp_query object, of course. The subsequent code displays how we can carry the thumbnail of the project post and interleave it into the template. Make appropriate note of how we use the $count variable to place in the ‘rightmost‘ class on each fourth list ingredient.


Now comes the content part where we require inserting the title, tags, short explanation and fetching the quotation for the post with a custom quotation scheme. Inserting the title is pretty easy, as are the tags. Remember, we formerly created a custom nomenclature by the name of tags.


You will become aware of that we are not by means of the common the_excerpt() process, provided by WordPress. As an alternative, we are essential our own custom technique by adding some filters. The common quotation technique proceeds a better length of quotation than we need. Hence, the custom description. We’re also changing the ‘Continue Reading…’ text added at the end of the default quotation, and replacing it with ‘Read More’. The subsequent snippet serves our purpose. This custom excerpt method comes in handy for profusion of situations.

Step 6 Conclusion

The over technique of creating a multi-layout portfolio is relatively undemanding and uses basic CSS and jQuery tricks to realize the result. Even superior, these techniques can be functional to a variety of projects. Other methods in this lesson, like custom post types, custom taxonomies and adding filters to the passage technique, can be used in various other inventive conducts, as well!

Read More

How to Create Validation Form for Wordpress Comments using jQuery

Step 1 – Download jQuery & the Bassistance.de Validation Plugin

Just download jQuery from  jQuery.com On the first page you will directly see “Download jQuery and a few different downloads. You can download the “Minified and Gzipped” version, this means it’s compressed.
Next we need the jQuery validation plugin, made by bassistance.de. This file contains a few Javascript files, but we only need “jquery.validate.min.js” and compressed for this tutorial.

Step 2 – Uploading files

At this moment you should have 2 files, “jquery.validate.min.js” and “jquery-1.9.1.min.js”, we are going to upload this to our WordPress theme directory.
Because in this tutorial we are using the WordPress theme, literally called “theme_name”, the folder we need is located in /wp-content/themes/theme_name/.
To keep things organized we will create a new directory/folder called “js”, this will be the folder with all the javascript. When you have the directory created, upload the files to the folder we just created. (/wp-content/themes/theme_name/js)

Step 3 – Loading Javascript

Now that we have the javascript uploaded in our directory, we still have to load it into our theme. The javascript should load between the <head> </head> tags. The head tags are located in a php file, that’s located in the theme directory.
So search for “header.php”, this is the file where the top of the theme code is located. Now we have to make sure we add the javascript before these 2 lines:

<?php wp_head(); ?>

</head>

This is how we include a javascript file:

<script src="url/to/javascript" type="text/javascript"></script>

We want things to happen automatically, so it’s best if we use WordPress tags. To display the URL to the template directory you can use this code:

<?php bloginfo('stylesheet_directory'); ?>

So in combination with the code to include the javascript, the final result is:

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.9.1.min.js" type="text/javascript"></script>

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.min.js"" type="text/javascript"></script>

Now these 2 javascript files will be loaded at every page, and can be used on all WordPress pages using this theme!

Step 4 – Activating Validation

Ok, now it’s time to activate the comment form validation, so go back into the theme directory, and look for /wp-content/themes/theme_name/comments.php
Now, we only need to take a look at the form part of the code! The form starts at line 73, and it looks like this:

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">

<?php if ( $user_ID ) : ?>

<p>Logged in<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Log out of this account">Log out »</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="25" tabindex="2" />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="25" tabindex="3" />

<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> You can use these tags: <code><?php echo allowed_tags(); ?></code></small></p>-->

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />

<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />

</p>

<?php do_action('comment_form', $post->ID); ?>

</form>

Now as you can see, the form has an ID element, it’s called “commentform”, we need this name to activate the javascript.
Don’t close this file yet, first switch back to “header.php”, and add these lines below the jquery.validate.min.js

<script type="text/javascript">

jQuery().ready(function() {

// validate the comment form when it is submitted

$("#commentform").validate();

});

</script>

As you can see, the ID of the form is in there, “#commentform” this activates the validation for any form with the id commentform.
Now, when you submit a comment currently and you leave all fields blank it does nothing, it still shows the default WordPress error. In the next step I will show you how to start validation for each field.

Step 5 – Name field validation

Now we start the validation for each field. That’s mean going through telling the validation javascript file what kind of validation is required. The validation javascript is so easy to use; user only needs to enter a few special words or character to start the validation. So let’s we’ll start off with the first field, that’s the required name field, the field looks like this:

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" />

<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

We want to make sure the commenter has filled in the field, and if possible make sure at least 6 characters are entered. So simply add class=”important”.

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" class="important" />

<label for="author"><small>Name <?php if ($req) echo "(important)"; ?></small></label></p>

If you hit submit without typing in your name you get “This field is required.” Nice!! So what about if the user doesn’t enter a minimum number of characters?
Well we can simply add that validation by adding minlength=”6″ to the field options:

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" class="important " minlength="6" />

<label for="author"><small>Name <?php if ($req) echo "(important)"; ?></small></label></p>

When you enter something (less then 6 characters) you will see a new message shows up “Please enter at least 6 characters.”. So that works perfectly! Minimum length allows you to set the minimum amount of characters, just replace the number to what you think is necessary.

Step 6 – Mail field validation

Next we will validate the email field, so this is how the field looks like:

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="25" tabindex="2" />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

Now we do just the same as the previous step. Well that would be wrong, because aside from the field simply being required, it also has to be a valid email address. Now we know how to set it required by simply adding class=” important”, but how to validate the email?
Just add “email”, so it becomes class=”required_email”, this makes it required and checks for a valid email:

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" class="required email" />

<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>

If you try out the email field email, you will notice that it’s says “E-mail address is required.” when submitted, that’s good! And now when you enter something that is not this format: wop@wp.xab it will say “Please enter a valid email address.” so that’s working perfect!

Step 7 – Website field validation

Now we are going to validate the website field? So we are going to validate a URL, it’s just as very easy as previous validations:

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="25" tabindex="3" />

<label for="url"><small>Website</small></label></p>

At now you could set it required and set a minimum amount of characters. We want a valid URL. We just add another class but this time we name it class=”web_url”:

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="25" tabindex="3" class="web_url" />

<label for="url"><small>Website</small></label></p>

As you can see it’s very easy thanks to jQuery and the Validation Plugin.

Step 8 – Comment field validation

I would like a minimum and a maximum amount of characters. But first let’s check out the comment field:

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="6"></textarea></p>

We finished step 1, add the required class (class=”important”) to make sure something is typed in the textarea. Now the minimum input text, you remember right? (minlength=”") Now I think at least 6 words need to have been typed. So that would be minlength=”6″, it’s still as easy as that. Now we want to set a maximum. Well the plugin has a solution for that, instead of minimum length just add maximum length plus the amount of words. We want 50 words are enough so add maxlength=”50″.

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4" class="important" minlength="6" maxlength="50"  ></textarea></p>

When we submit the form empty is will say as all other fields “This field is required.”, but if you enter less then 6 characters it says “Please enter at least 6 characters.” and if you enter more then 50 it says “Please enter at least 6 characters.

Step 9 – Form styling

Now we are going style everything so it looks nice and clean, but first I would like to change the label position. As you can see right now, it first shows the “input field” then the “error” and then the “field label”.
I think it should look like this “Field label”, “input field” and then the “error”, to do this we only have to move the label above the html.

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" class="important" />

<label for="author"><small>Name <?php if ($req) echo "(important)"; ?></small></label></p>

To:

<p><label for="author"><small>Name <?php if ($req) echo "(important)"; ?></small></label>

<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="25" tabindex="1" /></p>

As you can see the only thing we did was move the <label> above the <input>. When you now refresh your comments page you will see that the text “Name (required) is moved infront of the input field.
So now repeat this step for all input fields, at the end it should look like this:

Now as you can see, all fields have labels, except the comment field, I think it should have a label. So just do the same, and place a label above the input field:

<label for="comment"><small>Comment</small></label></p>

<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>

Now it’s time to open the theme CSS file. The CSS file for this theme can be found in “/wp-content/themes/theme_name/style.css”.
Now we’ll make sure to type #commentform .classname, this makes sure only fields between the <form></form> are affected.

#commentform label{

width: 200px;

float:left;

}

#commentform input, #commentform textarea{

border: 1px solid #dbd8d3;

width: 225px;

}

Step 10 – Error styling

Now when you hit submit you will see the error messages don’t look very nice. So now we’ll create a good style for error message show.

<label class="error" generated="true" for="author">This field is required.</label>

#commentform label.error{

font-size: 11px;

margin-left: 200px;

background: #fbfcda url('images/cancel.png') no-repeat left;

border:1px solid #dbdbd3;

width:209px;

margin-top:4px;

padding-left:20px;

}

Read More

How to Create a Email Newsletter Manager using Wordpress and Feedburner

There are lots of altered means to acquaint with your users these days. RSS feeds, SMS, & sites like Twitter accept afflicted how we allege to our audience. But for my money, you can’t exhaust the claimed blow of an acceptable ol’ email newsletter.
Of advance befitting up a newsletter can yield effort, but in this tutorial I’ll appearance you how to use your approved Wordpress website accumulated with Feedburner to accomplish a simple email newsletter manager.
There are abounding committed and abundant email newsletter solutions on the market. This is not advised to alter them, but rather to action a simple way to email visitors of your claimed website or blog an annular up of updates and account after accepting to install new software or set up new systems.
What we are going to do is:

1. Make a ‘Newsletter’ category in Wordpress
2. Hide it from regular posts
3. Make an RSS feed for that category
4. Give that feed to Feedburner and use their email update service to deliver our newsletter.

This tutorial is based on the absence affair in Wordpress 3.5.1. If you are application an altered theme, some cipher may be in a hardly altered abode and you may accept a few added files, but the attempt are still the same.
Once you’re all set up, sending out an email newsletter will be as simple as autograph a blog post, so let’s get started!

Step 1 – The ‘Newsletter’ category

Now we need to create a new category in Wordpress named ‘Newsletter’. Sign in to your admin area and go to Post > Categories – Add New. For Category Name let’s choose ‘Newsletter’ and Category Slug will be ‘newsletter’ , Description will be Email Newsletter and click ‘Add New Category’.

With our Newletter category created, we need to get category ID. When we keep mouse on newsletter category we can see our mew category ID(945) part of the link as shown in the screenshot below:

Our new category ID id is 975. This number will probably be different for you, make a note of it.
For the last of this tutorial you will see this number represented by {My cat_ID}. Wherever you see {MY cat_ID}, replace this with your number.

Step 2 – Hiding the ‘Newsletter’ category

Now we should adumbrate this class abroad from our capital blog/site. Firstly we’ll adumbrate it from the class account that appears in the WordPress sidebar. A class will alone appearance in the aftereffect if it has at atomic one column assigned to it, accordingly the Newsletter class will not appearance until we address and broadcast a column for it.
Go your theme folder sidebar.php file (/wp-content/themes/theme-name/sidebar.php) and look for:

1. wp_list_categories('show_count=1&title_li=<h2>Categories</h2>');  

Change this to:

1. wp_list_categories('show_count=1&exclude={MY cat_ID}&title_li=<h2>Categories</h2>');  

This will exclude our created Newsletter category from showing up in the category list in our sidebar.

Step 3 – Hide Posts

Next, we wish to stop our newsletters from assuming up in our approved posts. Excluding categories from “The Loop” (where WordPress displays our posts) seems to be a bit problematic. After aggravating this way and that way, there were still problems with paging breaking, it artlessly not alive and sql errors. We wish to accumulate this adjustment as simple as accessible after resorting to plugins so we’ll use the afterward method:
Open up the following files in your WordPress theme:

• index.php (/wp-content/themes/theme-name/index.php)
• archive.php (/wp-content/themes/theme-name/archive.php)
• search.php (/wp-content/themes/theme-name/search.php)

In each of the files, where you see the following code:

1. <div class="post">...  

Now add this line just above it:

1. <?php if (in_category('{MY cat_ID}')) continue; ?>  

so now our code in those 3 files will look like this:

1. <?php if (in_category('{MY cat_ID}')) continue; ?><br>  
2. <div class="post">... etc.  

We are cogent WordPress not to affectation any posts from our Newsletter category. Whilst this address is the atomic problematic, there is something that’s important to understand. Quoted from the WordPress documentation:
"Please agenda that even admitting the column is not getting displayed it is still getting counted by WordPress as accepting been apparent — this agency that if you accept WordPress set to appearance at a lot of seven posts and that two of the endure seven are from Class 3 again you will alone affectation 5 posts on your capital page. If this is a botheration for you, there is added complicated drudge you can apply declared in the Layout and Design FAQ or you can use query posts if you alone charge to exclude one class from the loop."
The above is also true of search results. However if you are sending out a newsletter about once a month, it shouldn’t be a real problem.
We also don’t want any posts in the ‘Newsletter’ category to show up in navigation when viewing single posts / permalinks. Open up single.php (/wp-content/themes/theme-name/single.php) and search.php (/wp-content/themes/theme-name/search.php) and change the following:

1. <div class="navigation"><br>          <div class="alignleft"><?php previous_post_link('&laquo; %link') ?></div><br>         <div class="alignright"><?php next_post_link('%link &raquo;') ?></div><br>        </div>  

to:

1. <div class="navigation"><br>          <div class="alignleft"><?php previous_post_link('%link', '%title', FALSE, '{MY cat_ID}') ?></div><br>           <div class="alignright"><?php next_post_link('%link', '%title', FALSE, '{YOUR cat_ID}') ?></div><br>      </div>  

Step 4 – Hiding ‘Newsletter’ in our RSS

Now that we accept our class set up we can move on to the RSS augment that will ability our newsletter.
Just as we didn’t wish the “Newsletter” class to appearance in our aftereffect or in our posts, we aswell don’t wish it assuming up in our website’s approved RSS feed.
The url for your WordPress site’s RSS feed should be something like http://yourwpsite.com/?feed=rss2. To exclude our ‘Newsletter’ category we ‘add &cat=-{MY cat_ID}‘ to the end so it now reads http://yourwpsite.com/?feed=rss2&cat=-{MY cat_ID}.
In the file header.php (/wp-content/themes/theme-name/header.php), you should see a line that reads:

1. <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />  

change this to:

1. <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="http://yourwpsite.com/?feed=rss2&cat=-{MY cat_ID}" />  

If you already have your main WordPress feed running through FeedBurner, you’ll need to sign in to FeedBurner, go to ‘My Feeds’, choose your feed and go to ‘Edit feed details…’ and change the ‘Original feed’ option.

Step 5 – Creating our RSS feed!

Now we create an RSS feed for just the ‘Newsletter’ category by using the URL http://yourwpsite.com/?feed=rss2&cat={MY cat_ID} – this is now your newsletter’s RSS feed url.
That was easy!

Step 6 – Burning the ‘Newsletter’ feed

Now we have an RSS feed for our newsletter, sign in to FeedBurner and enter your newsletter’s RSS feed url into the ‘Start FeedBurning now’ form:
or ‘Burn a feed right this instant’:

Click ‘Next »’.
Give your newsletter a name and new url:

Click on ‘Activate Feed’. You can then add extra bits via ‘Next Step’ if you wish or ‘Skip directly to feed management’.

Step 7 – Turning the Feed into an Email Newsletter

Almost done! Once FeedBurner tells you that your feed is ready, click on ‘Publicize’ up the top:

then choose ‘Email Subscriptions’ on the left:
Leave the default settings and click ‘Activate’.
You will now be accustomed the ‘Subscription Anatomy Code’ or ‘Subscription Hotlink Code’ which allows your website visitors to assurance up for the newsletter. Decide if you’d like a anatomy or a link, archetype the adapted cipher and adhesive it into your site. The aftereffect ability is a acceptable abode to adhesive it for now. You could aswell add a ‘Sign up for the newsletter’ appellation aloft the cipher just to accomplish it clear.
The number of newsletter subscribers’ and their email addresses can be viewed in your FeedBurner account, under Publicize > Email Subscription. You cannot sign people up on their behalf, which is a good thing. Users must click on a verification link sent to their email address before they are signed up.

Step 8 – Sending out a newsletter

Now all the fiddly being is done, sending out a newsletter is as simple as publishing a column to the ‘Newsletter’ category.
What happens is that if you column to the ‘Newsletter’ category, the RSS augment we created for that class updates. This alerts the FeedBurner email account which grabs your amend and emails it out to your account subscribers.
When you broadcast a ‘newsletter’ post, the email is not beatific out beeline away, but at the end of that day. This can acquiesce you to adapt or accomplish adjustments to your mail-out afore it is sent.

Read More