How do I make a WordPress based Website?

[definitive]

I'd like to start off by saying that I am familiar with how to building a WordPress blog, but I'm not familiar with how to make a non-blog site, where each page contains different content. I'm looking into building a website for someone which will have a drop down menu, and about eight or so pages which the end-user can edit on their own since they don't know anything about HTML, and would prefer to make updates to the news page on their own.

I've looked around in the page.php file, but I don't fully understand how to work this thing in order to be able to make each of the pages look different. Where and how would I insert different div's, etc.?

 

[brisbaneguy29]

You add pages through the "PAGES" section in your dashboard. If you want to change the look of these pages, change the page.php file, save it with a new file name (EG: no_sidebar.php) and at the top of the code, give it a new template name. When you create pages in your dashboard, you can then select the template you want to apply to that page.

From there all the content goes in through the page editor, like any CMS. I would suggest grabbing a better editor plugin. The basic tiny MCE one there is a little simple for proper content management. There is a Tiny MCE advanced plugin available, as well and a FCK editor called Foliovision. Both add a lot of content editing functionality.

What you can also do is in the dashboard under Settings->Reading , you can select the static new page you have created, instead of a posts page to display as your home page. You can also select a post page if you want to have a blog section within your website.

The built in Menu editor within wordpress 3 is also quite handy to build your navigation.

 

[definitive]

ok, i get the editing page.php file, but how do i get the file to show up in the template drop down menu? i've build a small blog theme in the past, and when i loaded it up in mamp, and tried making a new page, it didn't show the drop down menu for a different version of the page.php (i named it page2.php)

 

[notjustjay]

Some of that may depend on the particular template you're using.

I'm using a template I found called Ashford, on a website I run for a summer camp I volunteer with.
The static site content is made up of WordPress pages, and I use blog posts for various categories of blog entries, news and announcements.

A variety of plugins (along with the Ashford template) helps extend the basic functionality to get what I want.

My site is not the prettiest but it is far nicer than the custom PHP hackjob I had put together prior to switching to WordPress.

 

[brisbaneguy29]

You need to edit the code in your new page. At the top of the PHP code on the page add this.

<?php
/**
 * Template Name: [COLOR="Red"]NEW TEMPLATE NAME[/COLOR]
 *
 * A custom home page.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

Just change the template name to what you want it to be. I copied this one from the default theme Twenty Ten that load with Wordpress, but just change the details to be relevant to your site.

 

[Ride9650]

ok, i get the editing page.php file, but how do i get the file to show up in the template drop down menu? i've build a small blog theme in the past, and when i loaded it up in mamp, and tried making a new page, it didn't show the drop down menu for a different version of the page.php (i named it page2.php)

You need to provide more details. What theme are you using?

Secondly, while you can have something named page2.php, every time you load a page, Wordpress looks for template pages to display your content in this order:

-page.php
-index.php

Unless you use an include statement like

<?php  include('page2.php')

in either your page.php page or index.php page, Wordpress will never see it.

Alternatively you can apparently now identify templates using two other ways using the id or slug of the page. So it'd look something like

page-1234.php
or
page-about.php

You need to edit the code in your new page. At the top of the PHP code on the page add this.

<?php
/**
 * Template Name: [COLOR="Red"]NEW TEMPLATE NAME[/COLOR]
 *
 * A custom home page.
 *
 * The "Template Name:" bit above allows this to be selectable
 * from a dropdown menu on the edit page screen.
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

Just change the template name to what you want it to be. I copied this one from the default theme Twenty Ten that load with Wordpress, but just change the details to be relevant to your site.

While thats helpful you don't technically NEED it in a template page

 

[definitive]

You need to provide more details. What theme are you using?

i'm planning on making the theme from scratch, because it will be a fairly simple website which will contains photos, text, and one or two contact forms. the extra bells & whistles will include things like lightbox plugin, and a photo slideshow.

 

[Ride9650]

i'm planning on making the theme from scratch, because it will be a fairly simple website which will contains photos, text, and one or two contact forms. the extra bells & whistles will include things like lightbox plugin, and a photo slideshow.

wait.. then what drop down menu are you talking about?

 

[notjustjay]

Some templates provide built-in drop down menus.

OP, what theme are you using? Most themes just add new entries to the drop down menus corresponding to the various pages (not posts) you have created through the WordPress dashboard.

Edit: oops, I see you're writing a theme. From scratch? Or using an existing theme as a starting point?

Other than creating your own theme, you should not have to do ANY code editing in PHP to create a simple multi-page site with WordPress.

 

[definitive]

wait.. then what drop down menu are you talking about?

a horizontal navigation menu (wp3 introduced a way to make them easier). ex: home, about, contact us, etc. you can have sub-pages in it (drop down)

 

[Ride9650]

a horizontal navigation menu (wp3 introduced a way to make them easier). ex: home, about, contact us, etc. you can have sub-pages in it (drop down)

Ah, I'm retarded..you do mean this
right? I found a codex article on creating a horizontal menu but it doesn't mention anything about dropdowns.

Going through the older posts it's clear to me you don't understand how pages work.

When you make a new page you DON'T need a new .php file. Everything is handled inside Wordpress. brisbaneguy29's post covered the basics of it(ps thanks for the tip bout selecting templates inside Wordpress, I'll have to look for that the next time I'm do something in WP). What happens is after you create your content, it's saved to the database.

When someone views your site, when they land on a page, Wordpress figures out what page that is, grabs the content from the database, then spits it out using the page.php template(or the other ones I mentioned depending on what's in your theme)

The reason your new "page" isn't showing up in the drop-down menu is because you technically didn't add a page.

Did you not look through the Codex yet? It really does explain everything you need to know.

 

[jakeOSX]

i've been working on somethign similar, so i figured i'd jump in with a question or two myself.

i'd like my structure to be a static front page (but still editible in WP) with a link to the blog part. Seems simple, but i can't seem to figure out how.

(i understand links to catagorys or tags, but i'd like a link to 'all' basically)

 

[definitive]

ok, now i'm a bit confused about what ride9650 posted, so i made a quick sketch of the website which i'll be working on (i didn't start yet, and won't be for another week or so):

top box = header (logo, etc.)
box under it = navigation menu (to switch between pages)
box under menu = content area (note every page looks different)
box under content area = footer (basic navigation, etc.)

i know how to make the header, menu, and footer across all pages. i don't know how to make it so that every page would have different content in the content area. i'm also assuming that it will be a single column page (no sidebars), since the site doesn't really need it.

 

[notjustjay]

What you want to do is create WordPress pages (not posts). Pages can contain posts (e.g. blog pages). But pages themselves are static content. Your theme will wrap each page with the header, footer, navigation bar, etc.

To display posts in a page you can use PHP but you can also use WordPress shortcodes. You can also download a variety of plugins that can help you get exactly what you want, if you don't want to muck about in PHP yourself.

To reiterate: the secret to creating a good site in WordPress is to understand how pages and posts work, then wrap them in a theme to your liking. Customize the niggly-bits with plugins or, if you must, roll your own PHP code changes, but you shouldn't have to touch any PHP at all to get a simple site going.

 

[manueld]

When I first wanted to learn how to create a wordpress theme, I used this tutorial:

http://webdesignerwall.com/tutorials/building-custom-wordpress-theme

 

[Ride9650]

ok, now i'm a bit confused about what ride9650 posted, so i made a quick sketch of the website which i'll be working on (i didn't start yet, and won't be for another week or so):

Image

top box = header (logo, etc.)
box under it = navigation menu (to switch between pages)
box under menu = content area (note every page looks different)
box under content area = footer (basic navigation, etc.)

i know how to make the header, menu, and footer across all pages. i don't know how to make it so that every page would have different content in the content area. i'm also assuming that it will be a single column page (no sidebars), since the site doesn't really need it.

I apologize, I did skip some things because they were already covered earlier and are covered in much greater detail in the Wordpress codex.

Ok, I'll try again:

1. Design your site structure in your page.php file(again you don't HAVE to use page.php but lets start simple)

2. Add your page content in the wordpress admin. For more details go here

3. In your page.php you'll need to have this line

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

	<?php the_content();?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

This will read what page you're on and output the appropriate page content in your page.php file.


You can adjust the layout as needed with a little PHP.

Simple Explanation
Theres a "get_title()" function that will return the name the current page. You can use that in a conditional statement like so:

<?php

   $title = get_title();

switch($title){
   case ($title == "About"):
       include('pages/About.php');
   break;

//for the other pages just copy and paste the above and change About to 
//another page name.

}

This will enable you to load a different layout depending on the page.
I'm sure there are better ways to do it but this is probably the easiest to understand.

 

[definitive]

I apologize, I did skip some things because they were already covered earlier and are covered in much greater detail in the Wordpress codex.

Ok, I'll try again:

1. Design your site structure in your page.php file(again you don't HAVE to use page.php but lets start simple)

2. Add your page content in the wordpress admin. For more details go here

3. In your page.php you'll need to have this line

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

	<?php the_content();?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

This will read what page you're on and output the appropriate page content in your page.php file.


You can adjust the layout as needed with a little PHP.

Simple Explanation
Theres a "get_title()" function that will return the name the current page. You can use that in a conditional statement like so:

<?php

   $title = get_title();

switch($title){
   case ($title == "About"):
       include('pages/About.php');
   break;

//for the other pages just copy and paste the above and change About to 
//another page name.

}

This will enable you to load a different layout depending on the page.
I'm sure there are better ways to do it but this is probably the easiest to understand.

now this makes more sense to me. thank you, it's greatly appreciated. also, do i post both sets of code that you've posted one after another?

and finally... once the page.php file sees that it's getting its info from a page titled "about", it will then pull up that particular php file, and when it sees "contact us", it will pull a contact.php, etc.?

 

[jaseone]

and finally... once the page.php file sees that it's getting its info from a page titled "about", it will then pull up that particular php file, and when it sees "contact us", it will pull a contact.php, etc.?

You only need to do something like that if you want to change the layout per page, the page.php itself should take care of displaying the different pages that you create in the wp-admin interface.

 

[Ride9650]

now this makes more sense to me. thank you, it's greatly appreciated. also, do i post both sets of code that you've posted one after another?

and finally... once the page.php file sees that it's getting its info from a page titled "about", it will then pull up that particular php file, and when it sees "contact us", it will pull a contact.php, etc.?

Put the first bit of code in your template file for the page because that's whats extracting the content. So it would go in, say About.php

The second bit of code goes in the page.php file.

Yes, the "$title" variable stores the current page name, the switch statement looks at the variable and determines which php file to load.