PDA

View Full Version : Wordpress Frontpage layout



orion_joel
10-03-2009, 07:33 PM
Hi All,

I have been looking at a few different sites recently, and found that there are quite a lot that dont use a standard straight down front page. They have the feature block and then a number of other recent posts show up, with some other bits of information and feeds being incorporated as well.

I have been thinking of doing something similar on my own site, however cannot find anywhere it would seem that has anything that is comprehensive on how to work this into wordpress. Just one example would be Blog Tips to Help You Make Money Blogging - ProBlogger (http://www.problogger.net).

Anyway if anyone can shed any light on where to find information about doing this, would be greatly appreciated.

Harold Mansfield
10-03-2009, 08:53 PM
Sounds like you are just looking for a different layout for your WP site, that isn't the standard "blog" lay out. I'm pretty sure that ProBlogger is a custom design.

There are hundreds of WP themes with different layouts out there that are laid out in all kinds of ways, and there are many that you would never know were a blog..with some minor customizations and CSS, you could come up with something pretty original.
You also know that you can use a page as your landing page, and design that any way you want with good old fashioned HTML.

But if you want a custom coded theme, or tips on how to build one, I suggest you talk to Vangogh

jamestl2
10-03-2009, 11:17 PM
There's a few ways you could do this. One is to just create a custom template, upload it, and then change the page's template through the dashboard:
Dashboard > Pages > Edit > Attributes (in the right-hand column) > Template

Then just choose whichever one you want (the one you custom coded). This is assuming you already have a fair understanding of the Wordpress loop, PHP, etc. though.

A second, less common way could be to "widgetize" the page, where you create custom widget bars to a page and add whichever widget features you wish to desire. I actually wrote a tutorial on how to do this on my personal site, but since I'm still new, I can't help link-drop just yet.

If you'd like to do it the second way, let me know and I can PM you the URL. Hope this helps.

orion_joel
10-04-2009, 02:05 AM
Thanks for the replies. I think what i am looking to do is as James describes, a custom template, which i can use on a page, which i then set as a static landing page.

While i have seen some of the themes that enable this somewhat, I thought it would have been something quite common. But i am having a lot of trouble finding much to do with customer templates. More so ones you can download and use with any theme.

I imagine at the most basic look you could create something like problogger (not the same, not looking to copy, just was using this as an example). Using a series of divs, however while i can usually figure things out, if i spend enough time working on it, sometimes it is just easier to work off a base.

I would be interested to read the article James, feel free to send a PM with the link if you like.

jamestl2
10-04-2009, 10:09 AM
Sent you a PM Joel.

Also, the WP codex has some pretty good info on basic page templates. If you check out the Page Codex page, you should find some pretty useful info there too.

Harold Mansfield
10-04-2009, 12:23 PM
Thanks for the replies. I think what i am looking to do is as James describes, a custom template, which i can use on a page, which i then set as a static landing page.

While i have seen some of the themes that enable this somewhat, I thought it would have been something quite common. But i am having a lot of trouble finding much to do with customer templates. More so ones you can download and use with any theme.



You are kind of confusing me. Do you want to design a single page that you can then set as the landing page, or do you want an entire new template/theme ?

You can set a custom, or static landing page with any WP theme. You of course have to design the page first.

Most times if you just create a new page without the sidebars, you can put anything you want on it and set that as your landing page. (Go to Settings -> Reading)

You can design a theme that uses a static page as the landing page, or you can use one of the many that are out there already. It is actually quite common...many people are using WP these days because of that ability to have a static landing page, and still keep a blogs functionality to add additional content.

Or..are you talking about trying to add static page to your WP blog using an outside platform or one of those flash landing page set ups ?

orion_joel
10-04-2009, 06:54 PM
eborg, i think maybe some of the terms i have used maybe are meaning something different to both of us.

I already have the theme, what i want is a Custom Page Template which i can apply to a page i create in Wordpress. This page will become the static first page people see when they visit my blog. However it will be setup to show the most recent blog posts, and one or two featured blog posts.

Setting a static page is no isse,
Design the custom page template, and the coding behind is more then issue for me. If i can get something that i just drop in that even just shows what i want, playing around with positioning and colours and design elements is no issue, it is just the getting it to show what i want.

jamestl2
10-04-2009, 09:40 PM
Joel, if all you want is a homepage with some featured posts and a list of your most recent ones, here's something you could try.

Copy the following code into a PHP file, welcome.php for example:


<?php get_header(); ?>

<div id="content">
<div id="fposts">

<ul>
<li><a href="http://yoursite.com/link-to-post1/">Featured Post 1</a></li>
<li><a href="http://yoursite.com/link-to-post2/">Featured Post 2</a></li>
</ul>

</div>

<div id="rposts">

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>

<?php the_content(); ?>

<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?></p>

<?php endwhile; else: ?>

<p>Sorry, no posts we're found.</p>

<?php endif; ?>

<p align="center"><?php posts_nav_link(); ?></p>

</div>

<?php get_footer(); ?>


Just be sure to change the links inside the fposts div to the ones you want to display.

Save the file (welcome.php) into your theme's root folder and apply the template to a page (which I showed in post #3) which you've designated the front page (inside your dashboard settings, which eborg described).

Then open up your theme's stylesheet and add the new divs created (fposts and rposts) and apply whatever style properties you wish to use.

Let me know if this works :).

vangogh
10-05-2009, 11:41 AM
Joel you've already gotten some good advice, but I'll chime in anyway. If I'm understanding right you want a home page that looks a little different from the rest of your theme. What you want to do is create a custom page.

Copy page.php and name the copy anything you want. home.php is probably a good choice. You need to tell WordPress that your new file is a template.



<?php
/*
Template Name: Home
*/
?>


You can design and develop that page however you want. Then in the admin side of WordPress when you create your home page make sure to choose your new template as the template for the page.

Under Settings > Reading(?) there are options to set WordPress to load a static page as the home page and then choose another page as the main posts page. Choose your home page as the static home page and another page for your main posts page. You'll probably want to crate a blank page with the name Blog and set that as the main posts page.

As far as how to create the new custom page template it's really up to you. You can design and develop it any way you'd like. You probably won't find a tutorial on how to create the page specifically, but you'll find all sorts of info about doing different things within WordPress.

billbenson
10-05-2009, 12:35 PM
One suggestion, even though I'm still pretty wp illeterate, is find a template you like for the homepage, download it, copy and paste the one page into what VG described above. As long as it uses the standard tags, I would think it should work. I'll defer to others as to whether it will or won't.

jamestl2
10-05-2009, 12:45 PM
Under Settings > Reading(?) there are options to set WordPress to load a static page as the home page and then choose another page as the main posts page. Choose your home page as the static home page and another page for your main posts page. You'll probably want to crate a blank page with the name Blog and set that as the main posts page.

Yeah, that's where it is, under the reading settings. It's also how I structured my site's custom template. I just custom coded a few tables and included the WP header and footer all into one custom template.

Using this page though sometimes includes it inside the theme's navbar too, and if you don't want that, you'd have to exclude it from the header under the list pages template tag:


<?php wp_list_pages('sort_column=menu_order&title_li=&exclude=3,50'); ?>


Where the numbers 3 and 50 would be the post IDs. Although you might not have to worry about something like this if your theme doesn't use a navbar...

Harold Mansfield
10-05-2009, 01:33 PM
One suggestion, even though I'm still pretty wp illeterate, is find a template you like for the homepage, download it, copy and paste the one page into what VG described above. As long as it uses the standard tags, I would think it should work. I'll defer to others as to whether it will or won't.

A basic HTML that doesn't draw on any other scripts may work like that. The problem with using an outside source as a template is...it's rare to see a plain home page that doesn't draw from another script that is a part of the overall website, except for landing page type layouts.

You can do a lot if you have the right images and buttons...that's really where a custom home page shines.
You can still use little style tricks like the Featured Content Gallery Plug in that rotates your images and links them to posts or additional pages, as well as, other style plug ins that can be inserted anywhere with a line of PHP.

You are still going to retain your menu function (if it's across the top) and removing the sidebars gives you the whole page to work with.

I have never seen a ready made page template that you can just drop in.

billbenson
10-05-2009, 02:05 PM
Just sounded like Joel was looking for something he could drop in place. If that doesn't work, sounds like you have to design the page as VG suggested.

vangogh
10-06-2009, 01:16 AM
I just custom coded a few tables and included the WP header and footer all into one custom template.

Tables? For layout? Why oh why?

@Bill - did you mean a standard html/css template or a WordPress template? You could certainly take another WordPress theme and drop their page into your custom page template and assuming they did a decent enough job it would work.

If you take the time to read through the WordPress codex and understand how themes are put together it becomes much easier to create your own custom pages. Learn how the loop works. Much of the time when I create a theme my pages are my html/css template wrapped around and inside the loop. From there you can add WordPress specific functionality to different page templates if you want.

jamestl2
10-06-2009, 08:22 AM
Steve, I never said I used tables for layout :D.

If you checked out my homepage, I just inserted a few tables for some blurbs about the site, nothing to do with layout. (I couldn't really stand seeing a full-fledged table-based layout with a WP site, no reason to use one.)

Business Attorney
10-06-2009, 10:25 AM
I'm curious as to why so many designers are adamantly "no tables" when it comes to layouts. Now, I understand that generally using css is preferable, but there are a lot of layouts within a page that seem to work so easily with tables but are very complicated with css (and sometimes don't work across all browsers).

I looked at about a dozen Google pages, including Adsense, YouTube, search results, and more. I could not find one single Google page that did not use tables for some element of layout. In most cases they used several tables. The only page I found with just a single table was the YouTube page that used a table only to format the footer. Google pages tend to be well designed and fast loading. If Google uses tables to layout certain elements, why shouldn't I?

Again, I am not arguing that we should go back to the days of design-by-table, but I think that the other extreme - tables are only for data - seems to be an over-reaction.

Of course, I am a lawyer, not a web designer...

Harold Mansfield
10-06-2009, 12:07 PM
Comparing Google and You Tube and their use of tables and asking "Why can't I ?" is like comparing what the Supreme Court does compared to a local Attorney.

I think you can use tables if you want, no one is going to frown on you, but there are many arguments against using them to create an entire site.
Here is one that goes into detail:

Tables vs CSS: PROS and CONS - 15 points to consider before choosing a traditional table website or a CSS tables website.(i.e. CSS-P - CSS Positional or CSSO - CSS Only website) - 01 - Pros and Cons, advantage and disadvantages (or Tables vs. Divs) (http://www.decloak.com/Dev/CSSTables/CSS_Tables_01.aspx)

billbenson
10-06-2009, 12:11 PM
@Bill - did you mean a standard html/css template or a WordPress template? You could certainly take another WordPress theme and drop their page into your custom page template and assuming they did a decent enough job it would work.


I just meant if you find a template that you like for your home page but are already using a template you like, copy the template and use it as a page on your own site. As long as the standard tags are used on that page, it should work I would think.

Business Attorney
10-06-2009, 12:46 PM
@Harold

Just to be clear, I am not questioning the use of css for the vast majority of the website. What I am questioning is why some people seem to react strongly if you use ANY table for layout, period.

The use of the table in the footer of the YouTube page is a good example of what I mean. It has five columns of links and works easily as a table. Yes, you could do the same thing as divs, but why would a designer who prefers "pure" css think that using a table in that situation is bad?

I can understand personal preferences, but on some forums (not here, thankfully) I would say that the proponents of css take it to a level of zealotry and look at the use of a single table in a layout as akin to an act of heresy.

vangogh
10-06-2009, 12:51 PM
I never said I used tables for layout

Whew! You had me worried there for a moment :)

@David - I wrote a post about this very question a few weeks ago so I'll point you there for my detailed arguments: CSS vs Tables: The Debate That Won’t Die (http://www.vanseodesign.com/css/css-divs-vs-tables/)

The simple explanation is using css will help your pages load a little faster and ultimately lead to a more maintainable site. CSS also gives you more flexibility and control over how your site looks. From what I've seen most people who use tables do so because it's what they learned first and they don't seem to be willing to learn something new. That's obviously a generalized blanket statement, but that's how it comes across to me.


Google pages tend to be well designed and fast loading.

Google also has a lot or money to spend on servers and they generally don't do a lot of other things that slow down page load, namely images. How often do you see big heavy graphics on any Google page? Also the main way tables slow down things is when you begin nesting one inside the other. One table isn't a big deal, but several tables nested inside other tables does cause problems. When you use a table for tabular data you have one table with no nesting. When you use a table for your entire layout you then nest other tables inside to complete your design.

By the way looking at the YouTube home page the only table is for the links in the footer. The page isn't using tables for it's layout. AdSense uses tables (I'm looking at my reports) though they don't nest tables. Search results are using some tables, but again it's not for the entire layout.

Just because a site uses a table, it doesn't mean they're using tables to layout the site.

As far as the reaction, mine above was more of a joke since I was pretty sure James used css. Personally I don't care if someone wants to use tables. I know css is the better approach. It saves me and my clients both time and money, but if someone wants to use tables they have every right. I think part of the reason you see the reaction is because so many people who defend tables now are spreading so much misinformation. In fairness the css side spreads a lot of misinformation too. It's just one of those things that gets web developers charged like which OS or browser is best.

@Bill - What I meant was if you take a non WordPress template you won't be able to just copy the template and have any of the WordPress stuff work. You could still create a web page outside of WordPress and it would work fine. I assumed the question here though was to have a homepage with a different look that's still working within WordPress.

Harold Mansfield
10-06-2009, 12:55 PM
@Harold

Just to be clear, I am not questioning the use of css for the vast majority of the website. What I am questioning is why some people seem to react strongly if you use ANY table for layout, period.

The use of the table in the footer of the YouTube page is a good example of what I mean. It has five columns of links and works easily as a table. Yes, you could do the same thing as divs, but why would a designer who prefers "pure" css think that using a table in that situation is bad?

I can understand personal preferences, but on some forums (not here, thankfully) I would say that the proponents of css take it to a level of zealotry and look at the use of a single table in a layout as akin to an act of heresy.

That's a good example, I see website using tables in footers all the time, but..then again, links in footers "supposedly" don't carry much weight any more, so it's kind of like doing what you want in a dead (SEO) space.

The first consideration should be for the readers and users...if you use tables to do it, then do it. Personally I have nothing against tables and I don't think using a table or two is going to ruin the whole website. I wouldn't build an entire site on tables like it was 1999, but I really don't see any difference with that or using a little bit a flash for entertainment and a little "wow" factor.

I think the big argument for most is browser compatibility and the constant changes in browsers..especially IE, which a lot of people use (for some reason). You never know how it will interpret tables, but you know it will read CSS properly.. I'm just hypothesizing based on what I've read.

vangogh
10-06-2009, 01:03 PM
And again using a table to display links in your footer is not the same thing as saying you used tables for the layout out your site. When people are talking about laying out a site with either tables or css they generally mean the whole site. Personally I would still use divs and css on the footer links instead of tables, but to each his own.

Business Attorney
10-06-2009, 03:10 PM
@vangogh

I hope you didn't think I was casting you in the group of fanatics I was referring to. I understand that you are talking about table-based layouts, and not simply choosing to use a table within a layout.

vangogh
10-06-2009, 03:51 PM
Not at all. I never took your statements that way. I hope I don't come across fanatical about this stuff to anyone. I try not to, though I'm sure I've had my moments.

This is one of those charged discussions. And to some extent the reason you see people talking about it all the time is that they know it will lead to more page views and comments, etc.

What's interesting is you'll almost never find anyone who's learned to develop websites either with tables or with divs and css, choose to use tables. Most anyone who's taken the time to learn both ways to layout a site inevitably stick with css and think it obviously better. Most of the people I see arguing in favor of tables by their own admission haven't taken the time to really learn css. I'm sure that's a big generalization on my part, but it's the impression I get every time I read a new post on the subject.

In the end it comes down to me as a developer telling you as a client that it will cost more to work on your table-based site than on your div-based site and that your table-based site will have more design constraints placed on it than your div-based site.

billbenson
10-07-2009, 03:06 AM
No, VG. I was strictly referring to WP Themes. Sometimes I confuse the term template and theme as other programs call them templates.

David, I considered css to be "mainstream" when Yahoo switched to them. That happened at least a year ago. Probably two years ago. Prior to that even css tutorial pages, major newspapers etc stuck to tables because it worked across browsers.

If you look at Yahoo's source today, you will see plenty of tables. Its used for tabular data though, not layout.

If I had a table based site today, I would write the new pages in css. I wouldn't go changing 1k pages on an old site to css. Only if I rewrote them. You can mix and match in that example.

As someone who is not particularly good at css and writes web sites "kinda" for a living, people should migrate in that direction IMO. Doesn't mean tables are the devil though.

vangogh
10-07-2009, 03:25 AM
I considered css to be "mainstream" when Yahoo switched to them. That happened at least a year ago. Probably two years ago. Prior to that even css tutorial pages, major newspapers etc stuck to tables because it worked across browsers.

Guess I'm way ahead of the curve. I've been taking the all css/div based approach for about 6 years now. I built my first client site using DreamWeaver and tables and realized immediately there had to be a better way and that the way was css. I took a week or two to read a couple of books on css and have never looked back.

I still have to work on table-based sites (like this one) at times, but I would never consider building a new one with tables. Having worked with both over the years I can't think of a single reason for using tables over css.

orion_joel
10-07-2009, 09:31 AM
I think i have found a solution, i might just go ahead and actually spend money this time, and buy a theme that does just what i want. Might save me a bit of time

Harold Mansfield
10-07-2009, 10:22 AM
I think i have found a solution, i might just go ahead and actually spend money this time, and buy a theme that does just what i want. Might save me a bit of time

I was going to suggest that right from the beginning, it's sooo much easier to take something that is already built and customize it to suit your needs, and there are hundreds of designers tout there that have already done the work for you..... but I make that suggestion a lot and didn't want to sound like a one trick pony.:) and sometimes people resent being told to just buy it, when they are trying to create it.


Here is a nice collection of themes that have static looking layouts and the prices are not too high. I am sure you can find something nice there that won't break the bank:
WordPress Themes, HTML Templates - ThemeForest (http://themeforest.net/)

vangogh
10-07-2009, 11:26 AM
Buying a well done theme is actually a bargain when you consider what you get. And if you can customize it a little you move past the one down side, that being your site design isn't unique.

Harold Mansfield
10-07-2009, 01:57 PM
Buying a well done theme is actually a bargain when you consider what you get. And if you can customize it a little you move past the one down side, that being your site design isn't unique.

I'm a firm believer in what ever is going to be easiest and save the most time, combined with what I can afford.
There is something to be said for both..buying one and customizing it and having an original one designed. The goal is to get what you want and make it yours.

When ever I need something, I always look to see if someone has already done it..most times if you look around, odds are someone has already solved the problem a while back and you can just make subtle changes to update it.

orion_joel
10-08-2009, 08:52 AM
I love learning and being able to do things myself. Because often when i do this it becomes quite easy for me to repeat it. However i was reading something just the other day that reminded me of the fact that you should do only the things that are your strong points and leave the rest to other people.

So I spent $19.95 and joined Elegant Themes, (1 year membership, access to all the themes, about 20 i think) and pretty much use any or all). Most of them by default do just what i want, so it is perfect.

billbenson
10-08-2009, 11:10 PM
Well, really, it comes down to page layout (2 col, 3, col header, footer) in most cases. Those are easy to edit with a little experience. Then there is the real pain, the buttons. I have taken to just using text buttons (images in text format) as a black "add to cart" is pretty universal. Certainly not as good looking, but can be used anywhere in any theme if you rename them. Its also pretty easy and not that time consuming to sit down with photoshop and make a bunch of buttons. Its a few hours work at the worst, just realllllllllly tedious. The amount of work we are looking at is a day to tweak everything at worst and you get what you want.

My approach in general would be to reuse a theme you know, change buttons and layouts as you see fit to get a look you want. If you want a good header or logo, pay someone for that, which would be required anyway.

I spend way to much time doing stuff myself that I should farm out. I agree with eborg that just buying it is more cost effective. But if you make any modifications at all to the theme you are buying, I suspect having a generic theme that you modify may be the best use of money and time.

vangogh
10-09-2009, 01:46 AM
I agree with eborg that just buying it is more cost effective.

That is true. Of course I'll add the it depends clause here. For most people wanting a blog or site there's no reason to go about designing and developing it themselves. For someone like me who's business it is designing and developing sites it can make a lot of sense to get into the code and learn how to build themes.

On an individual project it would be quicker and more cost effective for me to use/customize someone else's work. Over time the learning I put in leads to more opportunities to bring in revenue.

But yeah the general point holds true. I still don't get why people try to build their own sites. The money spent on hiring a professional will be one of the best investments you can make and you'll usually be repaid in a short amount of time.

Harold Mansfield
10-09-2009, 01:24 PM
I have gotten so used to doing it myself or plopping down a few bucks to someone who has done the work that I get upset if I am looking for some type of solution and it's not out there.

90&#37; of what you need done online can be paid for as good or service and when you put it into context of how you spend money offline, it's definitely worth it.

I suspect the big reason people try and build their own sites is cost..trying to save a few bucks, but I never understood people who have the budget, that still won't hire a pro.
I certainly wouldn't buy a book, or read on online tutorial to do my own plumbing repairs, or represent myself in court...I don't think that either one would turn out well.

billbenson
10-09-2009, 03:31 PM
When you do it yourself, how do you deal with the button issue VG? One of my biggest complaints is the use of nonprofessional buttons on a lot of templates. Do you farm that out or just run through and redo all the buttons in photoshop?

Eborg, there is one other advantage of doing it yourself at least part of the time. You gain knowledge of the program and programming. There have been a lot of little things that I would not have thought of, had I not dug into programming. You can learn a lot by doing the occasional site yourself. Say a custom drop down menu based on what the site visitor last searched for or...

Harold Mansfield
10-09-2009, 06:16 PM
Eborg, there is one other advantage of doing it yourself at least part of the time. You gain knowledge of the program and programming. There have been a lot of little things that I would not have thought of, had I not dug into programming. You can learn a lot by doing the occasional site yourself. Say a custom drop down menu based on what the site visitor last searched for or...

Oh absolutely. Doing it myself is how I learned what I do know.
As far as buttons are concerned, it's really easy to create them.
You can do a search and there are quite a few free online apps to make them like Web 2.0 and grudge free buttons generator! (http://www.mycoolbutton.com/).

You can get ideas, save and re-edit in Photoshop or Gimp...after all a button is just an image. If you know how to use PS, or Gimp well, you an add effects to them, and you can usually find a tutorial online to show you how on both platforms.

There are also free buttons available, people design and release them all the time via CC, just like Social Icons, most times it's just a matter of resizing them to fit on your site.

vangogh
10-09-2009, 08:01 PM
I suspect the big reason people try and build their own sites is cost..trying to save a few bucks

Agreed. The thing is you're going to have to invest something in your business if you want it to succeed. A decent website is one of the best investments you can make since a bad one can completely derail everything else. I understand not having the money. If you don't, you don't. But in that case try something like WordPress where you can get a pretty good design for free or less than $100. Or at least take the time to actually learn web design and development.


When you do it yourself, how do you deal with the button issue

I create my own in Photoshop. Buttons are pretty easy to create. If you do a search for buttons photoshop you'll find a lot. Even if you don't use Photoshop you'll see how to create some good buttons. Then save them in the native file format for your program and you can go back later and resize them or change colors.

Lots of people also offer free button graphics for download. Again they're just a search or two away.

orion_joel
10-11-2009, 10:00 AM
I think i have it sorted now, you can see the solution at JOELBROWN.ID.AU- A new beginning in business (http://www.joelbrown.id.au). The theme is called "Who's Who" from Elegant Theme's. It is a really simple and nice theme, and does what i want with the front page.

The only thing it is going to force me to do now is find pictures, for every new post. Also going to be starting to look for pictures for the older posts as well.

vangogh
10-12-2009, 12:47 PM
Definitely a more colorful theme. I liked the other one too. That one just needed color.

I still think Photo Dropper is a great way to find images. You sometimes have to get creative when searching. You have to think about how someone would tag an image and use those words when searching.