How to build a home page for your wordpress BLOG
February 25, 2009 by MK
Filed under Wordpress, web development
Adding a Home page to your BLOG gives you an opportunity to present your site in a more professional manner and let users visiting your home page have a better understanding of your niche and site’s foundation.
Why good site foundation is necessary?
Each successful site is based on a certain foundation and as a site admin or as a site owner make sure you know what you need that foundation to do. I mean, think about how those words, sentences and paragraphs are going to effect your bottom line. Remember, you are making this site for a reason. Whether it is to get a laugh, express a thought or make a buck, all those words, sentences and paragraphs need a reason for being there. They mean something. Once you have all those thoughts gathered, its very important to display them in an hierarchical and meaningful manner.
Here is a list of what a perfect web site hierarchical structure might consist of -
Home Page or Landing page with content “buckets”
Blog
Single Post with Comments and Pingbacks
Single Page
Archive and Search Pages
Custom Pages
Store and product sub pages
Forum
Well designed 404 page
How to build a BLOG Home Page -
This article is first in a series of articles covering How to build a BLOG home page, BLOG landing page template and an Archives page template.
An ideal home page will display any or all of the following:
Featured Articles and Videos
Top viewed posts (or Pillar articles)
Top Comments
Sponsors of your site and/or Products showcase
People following you (Social Networking sites/RSS feeds/Email Newsletters)
For this article we will be reusing the header, footer and sidebars from an existing theme and hence we will concentrate on building the main body of the Home page that will display featured categories and a limited number of articles per category.
We are going to name our home page as Home.php. (A complete download of the code is available at the bottom of this article).
Following is the code that you will need to use to display each category and a limited number of articles for each category along with a thumbnail that will be picked up by associating a custom field in the admin section while writing an article.
///////////////////////////////////////////////
<div id=”homepage_leftarea”>
<!–This section is currently pulling category ID #1, and can be switched by changing the cat=1 to show whatever category ID you would like in this area. You can get your category ID by hovering over the category in admin section and looking at at the URL–>
<div class=”featuredCategory”>
<h3>Featured Category #1</h3>
<!–This is where the thumbnails are found for the homepage bottom section - note the custom field name for this image is “thumbnail”.–>
<?php $recent = new WP_Query(”cat=18&showposts=5″); while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, “thumbnail”, true) ): ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;” src=”<?php echo get_post_meta($post->ID, “thumbnail”, true); ?>” alt=”<?php the_title(); ?>” /></a>
<?php endif; ?>
<?php if (false): ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark”><img style=”float:left;margin:0px 10px 0px 0px;” src=”<?php bloginfo(’template_url’); ?>/images/thumbnail.png” alt=”<?php the_title(); ?>” /></a>
<?php endif; ?>
<b><a href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a></b>
<?php the_content_limit(100, “”); ?>
<div style=”border-bottom:1px dotted #94B1DF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;”></div>
<?php endwhile; ?>
<!–This is where you can specify the archive link for each section. Replace the # with the appropriate URL–>
<b><a href=”#” rel=”bookmark”>Read More Posts From This Category</a></b>
</div>
</div>
//////////////////////////////////////////////
By passing the category ID as parameter (and by using DIV’s or tables to place each category in an individual container) you can create a Home page providing an overview of a limited set of articles for each category.
And by implying some PHP skills you should be able to write a Featured Articles Plugin by simply associating article posts with custom field, and then picking that custom field randomly you should be able to rotate the articles on each page refresh. I will leave this to our readers as an exercise but do let me know if you need help.
After the Home Page has been crated, the very first problem you will face is how to make home.php your BLOG’s default landing page.
Well the good news is you don’t have to do anything. Why? because wordpress takes care of this for you.
The answer to above question comes from Wordpress Page Hierarchy -
e.g. If a visitor goes to your home page at http://example.com/wp/, WordPress first determines whether it has a static front page. If a static front page has been set, then WordPress loads that page according to the page template hierarchy. But if a static front page has not been set, then WordPress looks for a template file called home.php and uses it to generate the requested page. If home.php is missing, WordPress looks for a file called index.php in the active theme’s directory, and uses that template to generate the page.
So if your page name is home.php, wordpress will automatically pick it up before index.php and thus home.php becomes your sites default home page. There you go you are all set now with a landing page for your website.
Please leave your comments or email me - info[@]coolwebdeveloper[.]com if you need help implementing this article or any of your web development tasks.
Click here to download the complete code and related functions.
Downloaded folder include - home.php and functions.php. (You will need WinZip Software to open the downloaded file)
home.php - includes the home page structure
functions.php - includes the functions required that are not available in wordpress.
Google Mobile App released for Windows Mobile Devices
Being long awaited by Windows Mobile users (including myself), Google Mobile App was released today by Google. Google Mobile App provides faster searching and easy access from the Today screen of Windows Mobile devices.
That means while you are on the go you dont need to dig down deep into Start and Programs to fire your search.
Google Mobile App can be downloaded by visiting http://m.google.com from your mobile phone.
There’s no need to wait for a browser to open to begin a search, and with search history available to reduce typing, you can get your search results with fewer clicks than before.
Check out this video of Google Mobile App on Windows Mobile -
Google Mobile App is available for all devices running Windows Mobile in the US, UK, Canada, France, Italy, Spain, and Germany. It is also available for iPhone, iPod touch and BlackBerry devices.
What is hosts file and how to edit hosts file in Win XP and Win Vista?
Most of the times when we visit a web site e.g. http://www.coolwebdeveloper.com by typing in the domain name, our browser sends a request to the DNS (Domain Name Server or System) to map that name with the IP address of the web server. The DNS server will then query other servers on the Internet that know the correct information for that domain name, and then return to the web server’s IP address.
DNS stands for Domain Name System and is the standard domain name resolution service used on the Internet. Whenever a device connects to another device on the Internet it needs to connect to it via the IP address of the remote device. In order to get that IP address, DNS is used to resolve that domain name to its mapped IP address.
There is another way to resolve domain names without using the Domain Name System, and that is by using your HOSTS file. Almost every OS that communicates via TCP/IP, the standard of communication on the Internet, has a file called the HOSTS file. This file allows you to create mappings between domain names and IP addresses.
The HOSTS file is a text file that contains IP addresses separated by at least once space and then a domain name, with each entry on its own line. For example, imaging that we wanted to make it so that if you typed in www.google.com, instead of going to Google we would go to www.coolwebdeveloper.com. In order to do this you would need to find out one of the IP addresses of Yahoo and map www.google.com to that IP address.
One of the IP addresses for www.coolwebdeveloper.com is 216.110.120.72. If we wanted to map Google to that IP address we would add an entry into our HOSTS file as follows:
216.110.120.72 www.google.com
Note the space between the 2 entries, this is important.
| Operating System | Location on Hard Drive |
| Linux/Unix | /etc/hosts |
| Windows 3.1/95/98/ME | c:\windows\hosts |
| Windows NT/2000/XP Pro | c:\winnt\system32\drivers\etc\hosts or c:\windows\system32\drivers\etc\hosts |
| Windows XP Home | c:\windows\system32\drivers\etc\hosts |
| Netware | SYS:ETC/HOSTS |
| Apple | System Folder:Preferences and in the System Folder itself. |
| Win Vista | c:\windows\system32\drivers\etc\hosts |
For editing hosts file in Win Vista you will need administrative privileges, and you will not be able to edit as a regular user. Here are the steps that you need to follow to edit hosts file in win vista.
- Click Start , click All Programs, click Accessories, right-click Notepad, and then click Run as administrator.
- If you are prompted for an administrator password or for a confirmation, type the password, or click Allow.
- Open the Hosts file, make the necessary changes, and then click Save on the Edit menu.
Right Flyout for Nice menus (Drupal) not showing for IE6
February 9, 2009 by MK
Filed under CSS, Javascript, web development
There seems to be a bug with Zen 3 column layout for Drupal and using it with Nice Menus created by jakeg.
I am using a Zen 3 column layout for one of my clients. While the layout was working okay, I was experiencing problem with Nice Menu not appearing on hovering over parent nodes in IE6. Nice Menus were working as expected both for IE7 and FF though.
Nice Menus does provide a JavaScript file to make the menus work with IE6. Though the JavaScript file was working okay, I was still not able to get the hover menu.
After wrestling with CSS that came along with Nice Menus and by stripping the page off with all the unnecessary DOM, I concluded that there is nothing wrong with Nice manus but the page layout itself might have a CSS bug.
That is after I started debugging layout.css that I found the real culprit. I am pasting the solution here just in case any of our developer friends is having the same problem.
In layout.css file comment position:relative; attribute as follows -
#sidebar-left
{
float:left;
float:right;
width:170px;
/*position:relative;*/
right:15px;
padding: 0;
}
And that will do the trick. Please leave comments about other issues with Drupal and what you did to get rid of them, or email me if you need any help and I will try my best. Happy Coding.
