How To Show A WordPress Post As Featured Article

This is a guest post by Amit Banerjee. If you want to guest post on this blog, check out the guidelines here.

Do you want to highlight something on your blog homepage as “Featured Article” ?
It may be some of your best content that is popular and you wish to highlight it. In some case you can show your blog contests or Your email Newsletter Service just above your latest articles(above the Fold).

A featured Section is basically an area where you want your readers to focus and “Call to Action”. Technotip.org uses a “Featured Article” section on the Homepage that showcases some of the best content published recently.
Featured-section

If you want to design a similar feature in your Theme then read on. I have described two Methods to Create the featured section for your theme.

Procedure A : This Method Is Simpler. It shows a particular(selected) article in your Featured section of the Homepage. But In future if you want to change and show another article, you have to manually edit your index.php file and change the ID of the post being called. This technique can be used, if you are planning to have an article permanently or for a long time in the featured section.

Procedure B : This Method is a Bit Geeky. But its actually worthwhile. This procedure is used, if you want to show a latest post from a Particular category (or tag) in your Featured section automatically. You just need to Tag your post and the postlist plugin does rest of the job for you!

Procedure A
Step 1: Create a Back Up Copy of your Template : Always create a back up copy of your original theme. If things go wrong, you can restore your Theme using the backup. Use any FTP client ( I recommend using FileZilla ) and download the current theme of your Blog to your computer. Create a copy of that Theme and work on the customizations that we are going to discuss in this article.

Step 2: Upload the WordPress plugin and activate it Download the get-a-post WordPress plugin and upload it to your wp-content/plugins directory. Activate the plugin. No customizations are required.

Step 3 : Write a new post that you want to show in Featured Section If you want to show something static in your featured section, then you need to create a new post and publish it in a back date. This will prevent your article from appearing in the homepage as a repetition[duplicate copy]. Note down the ID of the post. You will need it later on.

Hover your mouse pointer on the published post(in the wp-dashboard) and see at the bottom(status bar) for the article ID.

For example :
You may wish to show a Newsletter Service or Some Freebies In your Featured section. In that case create your new article and publish it in a back date.

Step 4: Customize your index.php The index.php file is responsible for showing your Homepage. Open Index.php file in any HTML editor or Notepad and find the following code

<?php if (have_posts()) : ?>

Add The following code just Before it..

<!-- The Intro section.Start editing -->
<div class="intro">
<?php get_a_post(ID); ?> 
<!-- Replace with the Post ID that you want to show -->
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<!--The Intro section ENDS.STOP editing here -->

See this Screenshot for Better Understanding :
Featured-section-coding
Remember to replace ID, with the ID of the post that you wish to see in your featured section.

What we are doing here : We are creating a separate class called intro, that would contain your Featured section’s styling(CSS). And we are using the get_a_post plugin to call a particular post in that section. This Section will be called just before the array of posts that appear in your homepage. Its placed ahead of the Loop.

Note:
A word of caution:
Here we are using the class as “intro”. Check Your template, if you are using the same class name already, then it may mess things Up. In that case Simply use a different class name.

5. Style Your Featured Section: Ok All Set. Now you Need to Style your featured section and add Width and Height parameters.
Open your Style.css file and add the following code:

.intro{
margin:0px 0px 30px 20px;
padding:10px;
border:1px solid #CCCCCC;
width:570px; /* EDIT THIS WIDTH */
height:200px; /* EDIT THIS HEIGHT */
background:#F4F7FC; /* background color of the box */
}

You have to customize the CSS of your Featured Section according to your template. It involves modifying the width and background colors, padding borders etc. Make sure to adjust the width and height of the box or else your featured section may break up.

6. Upload the New theme In Your Themes Directory and Activate it You are ready to shoot. Upload your theme and See the Difference.Your Homepage will show your featured section. Test your featured section. Change the heights, width or other parameters and make sure your featured section looks clean and neat. You may want to use Firebug(addon), its Brilliant for testing Designs.

Procedure B
Back up your Template: Please create a back up copy of your original theme, so if things go wrong you can restore your theme to its previous state.

Step 1: Download the postlists WordPress plugin and activate it.
Step 2: Log in to your WordPress admin panel and Create a unique Tag (say “Feature”). You will be Using this particular tag to show a post in the featured section. So use them only on those posts that you want it to appear in the “Featured Section”.
Step 3: Select Postlists Under The Posts Menu and Create a New List.Name It “Feature”.
Step 4: Start Editing Your List. At First Define a placeholder for your list. You will call this placeholder from your Index.php file.
place-holder
Step 5: After that, you will see two boxes each for html codes before and after the list. Keep both of them blank.
place-holder-blank
Step 6: Next you will See “HTML code for each entry”. Paste the following code in the Box Provided. A typical HTML entry that shows one of your article:

<div class="post" id="post-<?php the_ID(); ?>">
<p><h2><a href="%posturl%">%posttitle%</a></h2></p>
<?php the_content(''); ?>%content%
</div>

Step 7: Select the minimum and maximum number of posts to show in your Featured section. If you want to show only 1 post then select one in both the cases.
number-of-article
Step 8: Select The rule “Show Only Posts of this Category”. Keep it Blank.

Step 9: Select The rule ” Show Only Posts of this Tag”. Select the Tag that you created in step 2.( In this example its Feature.)

Step 10: Select the Rule “Show only Posts With this status”. Use “published” as the option.

Step 11: Select the rule “Show only Posts With this type”. Use “Posts” as the option.

Step 12: Leave All other rules as Blank. See the screenshot below and study it carefully.
plugin-settings
Save your list. You are done Configuring your list. Whenever your list is called, it will show a latest post of the tag that you have specified in step 2.
Step 13: Now you need to call your list in the desired area from the Homepage. Open your Index.php file and look for the Following code:

<?php if (have_posts()) : ?>

Add the following code just before it:

<div class="intro"><?php if( function_exists("pl_postlist") ) pl_postlist("Feature");?></div>

Please note that, we are calling the placeholder that we had created in Step 2. (In this example its “Feature”)

Step 14: You have to Style your Featured Section. Note that we have Kept the Featured section under a Unique Class “Intro”. Add The following code in your Style.css

.intro{
margin:0px 0px 30px 20px; 
padding:10px;
border:1px solid #CCCCCC;
width:570px; /* EDIT THIS WIDTH */
height:200px; /* EDIT THIS HEIGHT */
background:#F4F7FC; /* background color of the box */
}

Modify the Intro Style as per your need so that it blends with your theme. Please be careful: If your Template already Uses the Class “Intro” then this would override the already described class. In that case simply replace the name Intro in step 13 and 14 with some other Unique name.
Step 15: All done. Upload the new theme and activate It. Select a post from your archives and Tag it with “Feature” tag. Now browse your new theme. You will have your new featured Section ready.

Some rapid questions[FAQ]:

Q : I want some of my Best Content In the featured Intro section. How do I change the Posts ?
A : If you are Using method A Open index.php and Find < ?php get_a_post(ID); ?>.Change the ID of the post as per your need.

If you are Using Method B Tag The Post as “Feature” (or your own Customized tag).

Q : How do I show My latest post or a list of post automatically in the featured section ?
A : If you want to show your latest Post or a list of posts in the Featured section automatically, then follow procedure B.

Q : Can I Use the “Read More” excerpt in that Section ? Can I Use images or Videos ?
A : Of course you can. Treat the article just as you treat any other article of your blog.

Q: Can i show any of my pages in that section ?
A: Yes you can . But it needs Some customizations. If you are Using Method A Visit the plugin page for more Information. If you are Using Method B then Select the rule : “Show posts of this Type ” and Select “pages”

Q: My Theme has broken since i installed your code. What should I do now ?
A: You can restore your theme if you had already backed it in step 1. If not leave a comment in this article. I will help you in sorting it out.

Q: I Know very little about Coding WordPress themes. Can You help me out ?
A: Why Not. I can help you code the featured section (provided I get fewer requests). Please feel free to leave your comments in this article if you need any kind of support. I love to help fellow Bloggers and I have learnt this from the Host : Technotip.org

Guest article written by Amit Banerjee from Ampercent.com, a popular technology website with tech articles, tutorials and how-to guides related to software, computers, and internet.

Add Custom Search Engine to your wordpress blog easily

Replace your default wordpress theme search engine with Google Custom Search Engine.
There are 3 option’s to show the result page:-

    Open results on Google in the same window.
    Open results on Google in a new window.
    Open results within my own site.

Google-SERP-option
If you want to have results within your own site, then you need to create another page similar to your blog pages(to make it look more professional), and add the codes from Adsense account. This requires one to have some knowledge about html and some other basic Internet programming knowledge.
If you are using a magazine style theme and if you are showing additional advertisements on the sidebar, then remove it from your result page. Because its an violation of adsense policy.

There is another easy option, which doesn’t require any programming knowledge.
1. Open results on Google in the same window.
2. Open results on Google in a new window.

Now you decide about opening results page in new window or in the same window(Its considered user friendly, if all links open in same window, so we recommend selecting the 1st option. i.e., Open Results in the same window.)

Goto your Adsense account or Google Custom Search Engine page and get the codes to paste in your wordpress blog.

Now login to your wordpress and click on the “Design” tab –> Click on “Theme Editor”. Now search for “searchform.php” or similar file and click on it.
Now look for <div class="search"> </div> tags and delete everything inbetween them and paste the CSE codes from your adsense or Google CSE account and save it.
Google-Custom-Search-Engine-results
For Example:- Look at my Custom Search Engine[Top right corner — near navigation bar] and search for any keyword and see the result page.

If you are good at HTML and PHP, you can integrate the CSE into your own site and you can make the results to be shown in your own site. This looks even more professional.
But having any type of Custom Search Engine is better than not having one, so follow any method and integrate CSE to your blog.

Blogging Made Easy by "Windows Live Writer" – A Small Review

This is my first post in Technotip.org about Windows Live Writer(WLW) and I am now writing this article using “WLW” itself. I have previously used it to write articles for my blogger blog.

Why we thought about an alternate editor, when we have a simple and good editors(Visual & HTML) in WordPress ?

As always, we wanted some more features to write articles and we use to face some problem while using default WordPress editors.

Problems that we had faced in default WordPress editor:

1. We had problem with adding and aligning the images. Each time we added a image to our article, consumed lot of time.

2. Sometimes when we open the old posts and save it again, we noticed that some irrelevant “Category” got added to it automatically from our “Categories” list.(Hope this is a typical problem only with us!)

3. Loading time….(I agree that, loading time has been improved a lot with new versions of WordPress, but WLW loads superfast as it is an Desktop application.

4. Problem inserting “tables” :- There is no option to insert a table in WordPress editors. This surprises me!

We need to have “insert table” feature that will be of use many times. We know that, using tables may slow down the page loading time, and its good to use CSS/DIV to get the tables, but everybody using WordPress are not programmers or geek’s to do that. And many blogger’s don’t have patience and time to do it.

5. Each time we see the preview of the article it even loads the advertisements. This will make our own impressions on those advertisements. Those impressions will be OK, if they are less in number, but I don’t want any advertisers to pay me for my own impressions on my own blog.

6. We had problem with italicizing the words. When we press the Italicize button, the selected word would be in Bold!

We use to insert <i> </i> tags in html mode to get the results.

7. And the <code> </code> was not working!

(Hope many problems listed above are topically problems only faced by us. Because we have never seen anybody else reporting these problems).

Actually I like the new WordPress editors for many reasons, but the above mentioned points make me to use WLW.

Actually, I write articles in WLW and then save it directly to my WordPress draft and then again modify it there if necessary.

Why we like “Windows Live Writer” ?

This is the actual reason to write this article..

1. Many features, and many tools/plugins to make blogging much more easy.

2. Offline blogging. This will really help a lot. Just try this for 1 week and you will know the power and impact of offline blogging.

No distraction from Chatting buddies, emails etc. In the beginning I got irritated, as there was no Internet connection, but now I am getting used to it and my articles are now more focused. And actually I have installed “WLW” in my laptop and I can now start blogging from almost any place I love.

And more importantly, I can now keep blogging, even when there is problem with my “ISP”(Internet Service Provider), and I can publish the posts by taking my laptop to my friends home, who are using someother ISP.

3. Lot of options to play with images I insert into my articles now. We can revert the image in one click, we can contrast, sharpen etc.

4. Faster loading..Saves lot of time, over time.

5. Publish to most major blog services: Including Windows Live Spaces, SharePoint, WordPress, Blogger and many others.

6. Insert photos and videos, maps, tags and lots of other cool content, all in a snap. Powerful editing features include tables, spell checker, and quick hyperlinks.

7. We can write for multiple blogs using the same “WLW” :

Just add another weblog account and you can start writing for both blogs.

8. All the other options which is present in WordPress are also present in “WLW”.

There are many advantages of using Windows Live Writer and We recommend everybody to give it a try. Mac users can try Ecto. And for people who want to use simple and neat interface can try blogdesk.

Whatever you use and try, but don’t forget to give a try to “Windows Live Writer“, it has been improved a lot over time, and its latest release will really impress you, by the way it works.

Here are some screen shots of installing “WLW”:-

installing-windows-live-writer Select the software you want to install from the list and sit back and do whatever you want to do. Internet connection needed!

After installing “WLW”, click on the shortcut and configuration window opens- See Below screenshot, to configure your weblog account.

homepage-login-info Weblog Homepage URL: Put your blogs homepage. Ex:- http://technotip.org

And in the username and Password section, type the username and password of your account(Windows Live Spaces, SharePoint, WordPress, Blogger or any other, that you use as your blogging platform.)

After successful installation and configuring, you can just test the power of “Windows Live Writer”.

WLW is a must use tool for bloggers using blogspot.com(bloger.com). Blogger(Blogspot) editor seems to be too bad(my personal opinion), using WLW helped get rid of all silly problems and now blogging has become more friendly.

What’s your opinion about “WLW” ? Which editor do you use ? Do you still use the default WordPress/blogger editors ?

Yahoo Buzz! is now open to everyone.

Yahoo-buzz-logo-tmAre you banned from Digg? Are you an active person in sites like Digg, stumble ?

If you said yes, then you have a Happy news. As said in the title of this article, Yahoo Buzz! is now open to everyone. Previously it was a closed Beta.

Now without wasting much of your time..I will tell some of the points and you can hurry to grab the Buzz Button.

1. Its an Digg like site of Yahoo!.

2. Believed to be the most powerful (more than Digg — Tested).

3. As almost all net users have an YahooMail Id, many people can Vote for your story on Yahoo Buzz!, than on Digg, stumble etc.

4. Yahoo Buzz! site is looking clean and easier to use than any other Social Bookmarking site.

5. The featured article will be displayed on “Yahoo.com” and not just on “buzz.yahoo.com”.

6. Its now open for everyone.

Now Go Grab the Buzz button. And Buzz my stories also, if you find anything interesting in Technotip.org!

orelse here is a small work around for wordpress blogs…


<script type="text/javascript">
  yahooBuzzArticleHeadline = "<?php the_title(); ?>";
  yahooBuzzArticleSummary = "<?php the_excerpt() ?>";
  yahooBuzzArticleType = "text";
  yahooBuzzArticleId = window.location.href;
</script>
<script type="text/javascript"
  src="http://d.yimg.com/ds/badge2.js"
  badgetype="text-votes">       
</script>

This code will get the Title, URL, and the excerpt of your article automatically to the Yahoo Buzz site, instead of manually inserting all these details.

And change “text-votes” to “square” or “small-votes” or “medium-votes” or “large-votes” or “logo” or “text” or “small” or “medium” or “large” to change the button type.

If you are using Blogspot, then remove these yahooBuzzArticleHeadline = “< ?php the_title(); ?>“; yahooBuzzArticleSummary = “< ?php the_excerpt() ?>“; two lines, and use the code. I think it will work. I have not tested it on Blogspot, but still hope it works fine. If anyone of you have tried this, then please confirm us, by leaving a comment below this article.

How to Change Permalink Structure in wordpress

I know this is a small thing to many people out there, but I am writing about this for the beginners. I had also faced lot of problem in changing the permalink, when this blog was hosted in Yahoo! server.

Permalinks are the permanent URLs to your individual weblog posts, as well as categories and other lists of weblog postings. A permalink is what another weblogger will use to link to your article (or section), or how you might send a link to your story in an e-mail message. The URL to each post should be permanent, and never change — hence permalink.

To change the permalink structure, first you need to grant permission, to access the .htaccess file(It should be in writable mod). To do that, log into your hosting account using any FTP software...we recommend using "FileZilla". As it is a FREE software and a good featured one and yet so simple to use.

FileZilla-server-name-user-name-passowrd-field
Ask for the host name to your hosting support team or search in their blog. Username and password will usually be the same as the username and password of your hosting account cpanel.

After logging into your Hosting account through “FileZilla”, goto the folder, where you have installed your wordpress theme, select .htaccess and index.php files and then right click and select “File Attributes”..Now change the Numeric value from 644 to 666. This would grant the writing mode to those two files.

And there is a .[dot] in the beginning of the file name .htacess, that file many not be visible. In this case change the settings to show all the files. or you can ask about it to your web host support team.

FileZilla-index.php-file-attributes

Now you can simply log into your wordpress account and then click on the “settings” tab, and then click on the Permalinks tab.
permalinks-wordpress-setting

There choose which ever format you want your permalink to be.

If you don’t like any of those, then select the “Custom Structure”, as shown in the above image. Now specify whatever structure you want…

Make sure to end your permalink structure with either %post_id% or %postname% (e.g. /%year%/%monthnum%/%day%/%postname%/) so that each permalink points to an individual post.

%year%
The year of the post, four digits, for example 2004
%monthnum%
Month of the year, for example 05
%day%
Day of the month, for example 28
%hour%
Hour of the day, for example 15
%minute%
Minute of the hour, for example 43
%second%
Second of the minute, for example 33
%postname%
Shows only the post name after your blog URL.
%post_id%
The unique ID # of the post, for example 423
%category%
A sanitized version of the category name (category slug field on New/Edit Category panel). Nested sub-categories appear as nested directories in the URI.
%author%
A sanitized version of the author name.

Now choose any one of these or the combination’s of these and put it  in the “Custom Structure”, and make sure to end your structure with either %post_id% or %postname% .

Ex:-

/%day%/%postname%/

Now press “Save Changes” button. Thats it. You have setup the permalink structure of your choice. Congrates!

And now don’t forget to change the file permission of .htaccess and index.php files to 644 again, for security purpose.

If you still face any problem with this, then it would be better to contact your hosting provoider.

And you may also feel this plugin interesting to redirect the older permalink structure to the new one’s without any hassle.

For more details about this click here.

You could also be interested in reading Permalink contribution for duplicate content.