Customizing Your Website
March 23rd, 2007
Once you are familiar with how your website works, it’s time to get creative and start customizing. The tutorial now splits into different subjects that require no order. From here on you can do whatever you want, adding and subtracting, perfecting and scrambling your site at will. The amount of effort you put into the site is now up to you. You can work with the two WordPress Themes that came with the installation, or seek out another Theme that better meets your needs. You can totally customize all the links and information, or get serious and completely re-design the entire site to do whatever you want. You have the basics, the rest is up to your imagination.
WBCCI.net Themes
There are several WBCCI.net Themes for you to choose from. All do basically the same thing but graphically present the information in myriad ways. Choose a few that look interesting to you, and meet your member’s needs and your desires, and then test drive them following the test drive instructions above. Click through the whole site, the categories and archives as well as the individual posts to see how the Theme handles each one. The look may be nice on the front page, but if it handles things in a way you don’t like on the single post, then you will have to dig into the code and make changes. Not ready for that, try another theme.
If you run into problems, check out the Codex’s Troubleshooting Themes article.
Customizing The Look
If you are familiar with CSS, HTML, and even PHP and MySQL, consider customizing the Theme to your own needs. This is not for the timid, and it is for the informed and experienced. If you want to expand your web page design and development skills, WordPress can help:
- Using Themes
- Theme Development
- Stepping Into Templates
- Templates Files
- Blog Design and Layout
- CSS Overview, Tips, Techniques, and Resources
- FAQ - WordPress Layout
- Stepping Into Template Tags
- Template Tags
- CSS Troubleshooting
- CSS Fixing Browser Bugs
WordPress Plugins
Plugin Panel
WordPress Plugins are also known as add-ons or extensions. They are software scripts that add functions and events to your website. They cover the gamut from up-to-date weather reports to simple organization of your posts and categories. Plugins are designed by volunteer contributors and enthusiasts who like challenges and problem solving. They are usually fairly simple to install through the WordPress Admin Plugin panel, just follow the instructions provided by the plugin author. Remember, these are free and non-essential. If you have any problems with plugins, contact the plugin author’s website or plugin source first, then search the Internet for help with that specific plugin, and if you haven’t found a solution, then visit the WordPress forums for more help.
- WordPress Plugin Repository (http://www.wp-plugins.org)
- WordPress Plugins (http://www.wp-plugins.net)
- Managing Plugins
- Plugins
Above and Beyond the Basics
The exciting thing about WordPress is that there are few limits. Thousands of people are using WordPress for blogging and for running their websites. All have a different look and different functions on their sites.
What you do from here is up to you, but here are a few places to take that first step beyond the basics:
- WordPress Features
- Working with_WordPress
- Using Pages
- Understanding the WordPress Loop
- Troubleshooting
- Using Permalinks
- Press It - Post to your site from the web instantly!
Getting More Help
Articles
March 23rd, 2007
The process of adding Articles to your WBCCI.net website is easy.
- Login to your WBCCI.net Administration Panel.
- Click the tab for Write.
- Start filling in the blanks.
- When you are ready, click Publish.
That’s it. You expected more? Okay, we have more details below, but from here, you can probably figure it out for yourself.
Writing an Article- Step by Step
There is no right or wrong order to writing an article for your WBCCI.net website, but we’ll start from the top and give you the step-by-step details for filling in each of the blanks on the Write Article panel.
WBCCI.net has two article editing modes, basic and advanced. Typically, the basic mode is the default for writing new posts, but that can be changed with the When starting a post option in the Writing Options SubPanel of the Options Administration Panel. We will take you first through the basic post screen and then the advanced.
Basic Post Editing Screen
- Your Drafts
- Drafts are posts that have been saved rather than published. If you have posts you have written and saved, thereby creating a Draft, they will be listed above the Write Post title. Click on the title link to open that posts’ Write Post edit screen, edit the post, and when you are ready, click Publish and it will be released to your site and to the world.
- Title
- This is where you enter the title of your post. You can use any words or phrases. Avoid using the same title twice as that will cause problems. You can use commas, apostrophes, quotes, hypens/dashes, and other typical symbols in the post like “My Site - Here’s Lookin’ at You, Kid”. WordPress will clean it up for the link to the post, called the post-slug.
WordPress Admin Writing Post Basic Panel
- Discussion
- The Discussion section hosts two checkbox choices. One is for Allowing Comments and the other is for Allowing Pings. If Allowing Comments is unchecked, no one can post comments to this particular post. If Allowing Pings is unchecked, no one can post pingbacks or trackbacks to this particular post.
- Password-Protect Post
- To keep this particular post private so that only those with the password can read it, enter a password here. Be sure and write it down somewhere safe.
- Categories
- The list of categories on your site is found here. By default, the uncategorized category will be checked, unless you have already changed the name of that category. Check the categories and sub-categories the post belongs in and make sure to uncheck “uncategorized” if applicable.
- Excerpt
- An Excerpt is a summary or brief teaser of your posts featured on the front page of your site as well as on the category, archives, and search non-single post pages. WordPress handles Post Excerpts in two ways. One is by an explicit excerpt and the other is through the use of the Quicktag button more. If you want to have a summary of the post show, rather than the first paragraph or so, write the summary of your post in the excerpt field.
- Quicktags
- Quicktags are buttons right above the Post editing textarea box. These buttons produce HTML tags for bold, italic, image, link, lists, and more. Click on these to add their HTML tags and the tag will either be reproduced in the editing area or a window will pop-up asking you to fill in the details, and when you are done, the information will be in the editing area.
- Post Editing Area
- The big blank box is where you enter your writing, links, links to images, and any information you want to display on your site is the Post Editing Textarea or editing box.
- Save and Continue Editing
- Below the Post Editing textarea box are three buttons. The first one is Save and Continue Editing. If you would like to save the post to your database, but continue working on it, click this button. Below in the Preview screen, you will then see your post. Using this button, the post will not be published unless the Publish check box is checked below in the Post Status area.
- Save
- In theory, clicking the Save button will save your post. But it is a conditional save. Using the Advanced Editing screen, if the option in the Post Status is set to Draft, your post will be saved as a Draft. If set to Publish, the post will be saved and published to your site. If set to Private, the post will be saved as a private post, accessible only by you, the user/author and not the public. Once you have clicked Save, the Write Post screen will clear and you will be ready to add another post.
- Publish
- To publish your post to your site, click the Publish button.
Advanced Post Editing Screen
In addition to the basic editing screen contents, the following is visible when using the advanced post editing screen.
WordPress Admin Writing Post Advanced Panel - Top of Page
- Post Status
- In the Post Status section there are three choices. Draft, Publish, and Private. To save the post as a Draft, choose Draft. To publish the post when you click Save, then choose Publish. To keep the post private, choose Private.
- Send Trackbacks To
- Trackbacks let other blogs know you’ve referenced one of their articles. To send trackbacks from this post, enter the URI or website addresses in the box, separating each one by a space.
- Post Slug
- This is where WordPress will “clean up” your post title to create a link, if you are using Permalinks. The commas, quotes, apostrophes, and other non-HTML favorable characters are changed and a dash is put between each word. If your title is “My Site - Here’s Lookin’ at You, Kid”, it will be cleaned up to be “my-site-heres-lookin-at-you-kid” as the title. You can manually change this, maybe shortening it to “my-site-lookin-at-you-kid”.
- Post Author
- This is where the author of the post’s name is chosen from a pull down list. Authors are added to your site by registering and through the Users and Authors panel.
WordPress Admin Writing Post Advanced Panel - Bottom of Page
- Edit Time
- By default, at the time the post is saved, that will be the date and time of the post within the database. To change this, click the checkbox and change the date and time information. All posts dated in the future will not appear on the site until that time has passed. If you wish to write posts that will automatically appear on your schedule, set the date and time here.
- Delete This Post
- If you decide to Delete this post forever, click this button. It will ask “Are you sure?” to give you a second chance to reconsider.
- Custom Fields
- Custom Fields offer a way to add information to your site. In conjunction with extra code in your template files or plugins, Custom Fields can modify the way a post is displayed. These are primarily used by plugins, but you can manually edit that information in this section.
[edit]
The WordPress Bookmarklet
At the very bottom of your Write Post screen is a buried treasure feature of WordPress that is a powerful tool. The WordPress Press It bookmarklet is a bit of Javascript you can click and drag to your browser link bar. Just put your mouse over the link, press down on the left button and, without letting go, drag it to the top menu bar of your browser (most browsers) where the “Link Toolbar” resides and release it. It will add a link that says “Press It” and the name of your WordPress site.
When visiting a web page that has information you would like to share with your WordPress site users, click the Press It link and a window will pop-up. If you are not logged into your site, the login will appear. If you are, it will automatically bring up the Write Post screen with the link to the site you are currently viewing already set in the Post Editing box and the title of the site in your post Title box. You can write more information about the site, change the title, set the categories, and when you are ready, choose Save as Draft, Save as Private, and Publish. Choose Publish and your post is published to your site, ready for the world to see and read. Simple and easy.
Post Slugs
March 23rd, 2007
The Post Slug is the title of your article post in the link, if you are using Pretty Permalinks. A title such as “I’ll Make A Wish” is typically truncated to “ill-make-a-wish”. You can change the Post Slug to whatever you would like, like “make-a-wish”, which sounds better than a wish made when sick.
Permalinks
March 23rd, 2007
Pretty Permalinks
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 refer to your article (or section), or how you might send a link to your story in an e-mail message. Because others may link to your individual postings, the URL to that article shouldn’t change. Permalinks are intended to be permanent (valid for a long time).
“Pretty” Permalinks is the idea that URLs are frequently visible to the people who click them, and should therefore be crafted in such a way that they make sense, and not be filled with incomprehensible parameters. The best Permalinks are “hackable,” meaning a user might modify the link text in their browser to navigate to another section or listing of the weblog. For example, this is how the default Permalink to a story might look in a default WordPress installation:
/index.php?p=423
How is a user to know what “p” represents? Where did the number 423 come from?
In contrast, here is a well-structured, “Pretty” Permalink which could link to the same article, once the installation is configured to modify permalinks:
/archives/2003/05/23/my-cheese-sandwich/
One can easily guess that the Permalink includes the date of the posting, and the title, just by looking at the URL. One might also guess that hacking the URL to be /archives/2003/05/ would get a list of all the postings from May of 2003. Pretty (cool). For more information on possible Permalink patterns in WordPress, see Using Permalinks.
Images
March 23rd, 2007
A picture says more than a thousand words.
WordPress makes it easy for you to add images to your WordPress site. You can upload them directly from within WordPress by using the built-in file uploading utility in the post screen. Or you could use any FTP Client software to upload many images to your WordPress site.
The Quicktag buttons feature an image link, making it easy to link to images from within your post as you write it. If you used the inline upload feature, your picture will be in the /wp-content folder.
Wordpress can now (within the posting page) resize images and create thumbnails. There are also photo galleries that can show many images without adding each one separately to a page.
And if you choose to let the images speak for you, consider creating a PhotoBlog or Gallery.
[edit]
Images Resources for Wordpress
Example of images in background, sidebar, blockquote, and post
There are a variety of WordPress Image Plugins which add image functionality, utilities, and galleries to your website. Some run from within WordPress while others stand alongside.You can also add images to your WordPress site through the use of template tags, plugins, and in the style sheet of your Theme. For example, you can add images to your:
- Categories
- Comments with Gravatars
- Graphics Symbols
- Header
- Headings
- Smilies
Gravatar used in Comments
- Sidebar
- Footer
- Lists
- Menus
- Between posts
- Between lists
- Graphics in Feeds

- Links and Blogrolls
- Next and Previous Links
- Template Tags - Many feature image parameters
[edit]
Using Images in Posts
Missing image
springfairythemeheader.jpg
A highly graphic header
Images can be used in a variety of methods in your WordPress posts and Pages. They can be a major subject, or a referenced detail that enhances the information or story.The first thing you should consider is the “look” of the images on your page. Not what the images are of, but the general look of how they flow and interact with the rest of the content on your page. Wrapping Text Around Images helps you to begin to understand how images interact with the text around them, changing the margins, padding and borders around the images within the content. It will also help you understand how to create captions under your images.
The next thing to consider is the size of the images. There are two ways of actually sizing an image. It is either the size that it is, or a thumbnail link which, when clicked, takes the user to a new page with an enlarged image of the graphic.
[edit]
Image Size and Quality
The size and quality of an image for use on a web page is determined by a variety of things.
- Physical Size
- The physical size of an image is based upon two things: The size of the image on the screen and the file size. Generally, the file size is treated as a different issue.
- File Size
- This is the size of the file on your hard drive or server.
- Resolution
- Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image.
- File Type
- There are basically X image types popularly found on the Internet: jpeg,gif,png and (for favicons (the icons next to the address)) ico.
The physical size of the image is information we need to know in order to determine how much “space” will the image occupy on a web page. If your WordPress Theme features a fixed width content area of 600 pixels and the image you want to use is 800, the image will push the sidebar and layout of your web page around, messing up your design. Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page. It’s up to you to determine what size they should be from there, matching the image to your overall layout and styles.
File size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. People often don’t have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower.
The resolution of the image dictates its clarity. The higher the resolution, though, the larger the file size, so you have to make a compromise between quality and file size.
Luckily, the various file types most commonly used on the Internet have compression features. When you save the file as one of these types, it condenses or compresses the data information in the image file. Internet browsers can decompress this information to display the image on the screen. Some graphic software programs allow you to set the compression rate to control the quality of the image (and file size) at the time you save it. Depending upon your use of the images on your site, you may have to experiment with this to get the right ratio that keeps the resolution quality good while maintaining a small file size.
Websites use four common file types. The end of a filename (called the extension) tells what type it is. One type, ico, is to make a favicon file — but this is usually only done when a website is first set up. The other three types are used for general images:
- jpg (JPEG) is good for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the “compression”). Different photos need different compression; doing this carefully and viewing the result can give you a usable photo with a small file size.
- gif can be poor for photographs. It’s better for line art, like logos, with solid areas of the same color.
- png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs. Some older browsers don’t completely support png, though.
If you aren’t sure which file type is best for a particular image, try saving the image in more than one type and comparing the file sizes. Using the right type can make a big difference! There’s more information in Sitepoint’s GIF-JPG-PNG What’s the Difference (http://www.sitepoint.com/article/gif-jpg-png-whats-difference) article.
[edit]
Resizing Images
Not all graphic software packages allow you to resize images, though most should. Check your graphics software table of contents or index for resize, size, transform, reduce, or enlarge, all synonyms for the for the same thing. If they don’t have the feature, you may have to find different software.
The process of resizing images is fairly simple. There are usually two methods:
1) You can resize an image through the use of tools provided which allow you to manually shift the edges of an image to deform or resize the image. The best way is to grab a corner, not the edge, to resize the image. The corner “handle” will usually resize the image maintaining the overall height-width ratio. Check your manual for specific instructions.
2) The other method involves simply specifying the image’s final size. The advanced graphics programs allow you to set it by exact dimensions or a percentage of reduction or enlargement.
After resizing the image, the image may be smaller, but it may also be slightly out of focus. You can sharpen the focus of the small image by using the sharpen feature in your software.
When you have fine-tuned your small sized image or new thumbnail, export the image as a jpg, gif, or png.
[edit]
Styling Images
Images can have borders, frames, captions, and be styled in many different ways. There are basically two ways to style an image on your site. You can style it from within the style sheet or inline on a specific image.
[edit]
Styling All Images
Styling your images from within the style.css of your WordPress Theme can cover the styling for every image on your site, or specific images.
To style every image on your site to look a particular way, look for or add the CSS selector for the image tag. Then add your styles to the tag. For instance, let’s say that you want a black border around all of your images and you want space between the border and the image, as well as the appropriate spacing around the image and the text.
img {
margin: 5px;
padding: 10px;
border: solid black 1px
}
Maybe you want something a little more dramatic. You can change the border thickness and set it to a “double” line. And maybe you really want to isolate your image from the rest of the text, so you increase the margin around the image.
img {
margin: 20px;
padding: 10px;
border: double black 1px
}
[edit]
Styling Some Images
You can add to your style sheet a specific style for certain images. If you have already styled all of your images, you must make sure you specify every style declaration or attribute specified in the image tag style in order to override that attribute. If you do not change the margin, then it will remain the same in the new style. This is called the CSS Parent/Child Relationship.
Let’s say you would like to have some images in your posts filed in the category of Nature have a nice green background. The rest of the images should look the same, just the ones you add in your Nature category. You simply add a class to your style sheet and each image within that category.
To make it easy to remember, we’ll call our class “nature”. We want to have a very dark green thick border and a medium green background around the image to highlight it.
img.nature {
margin: 20px;
padding: 20px;
border:solid #003300 4px;
background: #006600;
}
On each of the images within that category, you simply add the class for “nature”:
<img src="leaf.gif" alt="Red leaf" class="nature" />
If you need more styles for different images, you can create more of them as needed.
[edit]
Styling One or Two Images Inline
There are times when you just want one or two images on your site to look different from the rest. This technique is called inline styles. It applies the CSS styles directly to the image itself.
For example, say you want to have an image isolated against a back background to call attention to it.
<img src="leaf.gif" alt="Red leaf" style="padding:20px; background: black; border: none" />
This is not a technique to use on every image. It is to be used on occasional images that need a “little something special.”
Missing image
Example.jpg
Image:Example.jpg
C:\Documents and Settings\internet\Desktop\4.jpg==Image Resources==
Web Pages
March 23rd, 2007
What is a Page?
Posts are time-oriented objects. You write them at a specific time, and that time defines their context.
Pages, on the other hand, are most often used to present information about yourself or your site that is somehow timeless - information that is always applicable. For example, you might write a Post describing what you did or thought on a particular morning (”Breakfast was good”), but on a Page you might write something whose context is less time dependent (”This site is about breakfast”).
Of course, this is your WordPress; you can do whatever you want with it and its features. Pages can be used to present any information you want to live “outside” your blog. Experiment and be creative. And, as always, have fun doing it!
Some examples of Pages to create on your site may include, Copyright, Legal Information, Reprint Permissions, Contact Information, About Me, About Site, Accessibility Statement, among other things.
In general, Pages are very similar to Posts in that they both have Titles and Content and can use your site’s Presentation Templates to maintain a consistent look throughout your site. Pages, though, have several key distinctions which makes them quite different from Posts.
[edit]
Pages in a Nutshell
[edit]
What Pages Are
- Pages are for content that is less time-dependent than Posts.
- Pages can be organized into pages and SubPages.
- Pages can use different Page Templates which can include Template Files, Template Tags and other PHP code.
[edit]
What Pages are Not
- Pages are not Posts nor are they excerpted from larger works of fiction. They do not cycle through your blog’s main page, nor can they be associated with Categories.
- Pages are not files. They are stored in your database just like Posts are.
- Although you can put Template Tags and PHP code into a Page Template, you cannot put these into the content of a Page and expect them to run. (Note: You can achieve this by using a PHP evaluating Plugin such as RunPHP (http://dev.wp-plugins.org/wiki/RunPHP). See also the list of Posts Formatting Plugins.)
[edit]
Creating Pages
To create a new Page, log in to your WordPress installation with sufficient admin privileges to create new articles, and click on the Write tab in the admin interface, which will have a Write Page tab. Clicking the Write Page tab will lead you to the page where you can create your new Page.
Note: Your .htaccess file must be writeable for Page Permalinks to work, otherwise you must update your .htaccess file every time you create a Page.
[edit]
Listing Your Pages on Your Site
WordPress is able to automatically generate a list of Pages on your site, for example within the sidebar, using a Template Tag called wp_list_pages(). Please see the documentation describing this tag’s use for information on how to
- sort the list of Pages (to fully customize the order in which the Pages are listed, you might find the “Page Order” field on the Write->Write Page administration panel useful),
- exclude (or ‘hide’) a Page from the list,
- control which Pages are displayed (i.e. all Pages or just certain Sub-Pages), and
- control how deep into your Page hierarchy the list goes.
Naturally, you can also link to Pages manually with an HTML link. For example, if you want your Copyright Page listed in your footer, that link might read
<a title="Copyright information" href="wordpress/?page_id=14">Copyright 1996-2006</a>
if you do not have Permalinks set up, or
<a title="Copyright information" href="wordpress/copyright/">Copyright 1996-2006</a>
if you do have Permalinks set up.
Note: Your .htaccess file must be writeable for Page Permalinks to work, otherwise you must update your .htaccess file every time you create a Page.
[edit]
Organizing Your Pages
Just as you can have Sub-categories within your Categories, you can also have SubPages within your Pages, creating a hierarchy of pages.
For example, suppose you are creating a WordPress site for a travel agent and would like to create an individual Page for each continent and country to which the agency can make travel arrangements. You would begin by creating a Page called “Africa” on which you could describe general information on travel to Africa. Then create a series of Pages which would be SubPages to “Africa” and might include “Lesotho”, “Cameroon”, “Togo”, and “Swaziland”. Another individual Page is made for “South America” and would feature SubPages of “Brazil”, “Argentina”, and “Chile”. Your site would then list:
- Africa
- Cameroon
- Lesotho
- Swaziland
- Togo
- South America
- Argentina
- Brazil
- Chile
To begin the process, on the Administration > Write > Write Page panel, in the upper right corner of the panel, is a drop-down box called “Page Parent”. This contains a list of all the Pages already created for your site. To turn your current Page into a SubPage, or “Child” of the “Parent” Page, select the appropriate Page from the drop down list. If you specify a Parent other than “Main Page (no parent)” from the list, the Page you are now editing will be made a Child of that selected Page. When your Pages are listed, the Child Page will be nested under the Parent Page. The Permalinks of your Pages will also reflect this Page hierarchy.
In the above example, the Permalink for the Cameroon Page would be:
http://example.com/africa/cameroon/
[edit]
Page Templates
Individual Pages can be set to use a specific, custom Page Template that you create within your Theme. This new Page Template will then override the default page.php Page Template included with your Theme. See What Template is used to Display a Particular Page?, below, to find out exactly which Template will be used. But read what follows first, so you understand the answer
WordPress can be configured to use different Page Templates for different Pages. Toward the bottom of the Write->Write Page administration panel is a drop-down labeled “Page Template”. From there you can select which Template will be used when displaying this particular Page. NOTE: In order to access the Page Template selector, there must be at least one Page Template available in the active theme.
[edit]
Default Theme Page Templates
The Default theme contains three Page Templates for your use:
- page.php - Default Page Template: displays Page content
- archives.php - ignores Page content and instead displays a list of Archives by Month and Archives by Subject (by Category)
- links.php - ignores Page content and instead displays your links using get_links_list
[edit]
What Template is used to Display a Particular Page?
WordPress will look for several template files in your active Theme. The first one it finds will be used to display any given Page. Below is the order of files WordPress will look for:
- The Page’s selected “Page Template”
- page.php
- index.php
[edit]
Creating your own Page Templates
The files defining each Page Template are found in your Themes directory. To create a new Template for a Page you must create a file. Let’s call our first Page Template for our Page snarfer.php. At the top of the snarfer.php file, put the following:
<?php /* Template Name: Snarfer */ ?>
The above code defines this snarfer.php file as the “Snarfer” Template. Naturally, “Snarfer” may be replaced with most any text to change the name of the Page Template. This Template Name will appear in the Theme Editor as the link to edit this file.
The file may be named almost anything with a .php extension (see reserved Theme filenames for filenames you should not use; these are special file names WordPress reserves for specific purposes).
What follows the above five lines of code is up to you. The rest of the code you write will control how Pages that use the Snarfer Page Template will display. See Template Tags for a description of the various WordPress Template functions you can use for this purpose. You may find it more convenient to copy some other Template (perhaps page.php or index.php) to snarfer.php and then add the above five lines of code to the beginning of the file. That way, you will only have to alter the HTML and PHP code, instead of creating it all from scratch. Examples are shown below. Once you have created the Page Template and placed it in your Theme’s directory, it will be available as a choice when you create or edit a Page.
[edit]
Examples of Pages and Templates
The following is a list of instructional examples. Feel free to make additions.
[edit]
Archives with Content
A Page Template that shows the Page’s content at the top, and then displays a list of archive months and categories below it. This is designed to work with WordPress’s Default theme (aka Kubrick), but will probably work with many other themes with a little modification.
Save this to arc-cont.php:
<?php
/*
Template Name: Archives with Content
*/
?>
<?php get_header(); ?>
<div id="content" class="widecolumn">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>"><?php the_title();?></h2>
<div class="entrytext">
<?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>
</div>
</div>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<div id="main">
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<h2>Archives by Month:</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h2>Archives by Subject:</h2>
<ul>
<?php wp_list_cats(); ?>
</ul>
</div>
<?php get_footer(); ?>
[edit]
WordPress as a CMS
With the new Pages feature in 1.5, it’s easy to use WordPress for basic content management.
[edit]
Using a Page as the Front Page (version 2.1+ only)
Wordpress 2.1 introduced the Option to conveniently set any Page as your Front Page. Go to Options -> Reading in Wordpress Admin interface. Under the “Front Page” heading, you can choose to set any (published) Page or Posts Page as the Front Page. The default setting shows your blog with the latest blog posts.
The following paragraphs explain how to duplicate this functionality for versions prior to v2.1.
[edit]
Using a Page as the Front Page with Wordpress versions prior to v2.1
Using the Static Front Page Plugin (http://www.semiologic.com/projects/static-front/), it is possible to set any Page as the “front page” of your site. The plugin modifies the home page query and sticks the Page with a Page slug of “home” to the front page.
When the Page is being displayed as the Home Page, if a Page Template with the filename home.php exists for your active Theme, the plugin will override the Page’s set Page Template and use home.php instead. The Page’s set Page Template will still apply if the Page is visited like a standard Page (eg http://example.com/home/)
As an alternative to the plugin, WordPress will recognize a “home.php” document in your template directory and use it rather than index.html to theme your front page. Using the query_posts() template tag, you can call on any page before you invoke The Loop. For instance:
<?php
query_posts('pagename=home');
?>
Will call up only the post with the pagename “home.” See query_posts() for more examples of the template tag in action.
The home.php file is not needed in versions 2.1+ . Use the setting in the control panel to set your static home page.
[edit]
Including a Page
You might also want to include Pages in various places on your site. That way, you can have an easy way to edit elements of your website. There is a plugin called Include Page that makes doing this easy. Improved Include Page (http://www.vtardia.com/blog/improved-include-page/) is a more updated version of the plugin.
[edit]
Making your blog appear in a non-root folder
Suppose you have Wordpress running at http://example.com/. Suppose further that you want your blog to be located at http://example.com/blog/ and that you want other pages to be available at http://example.com/page1/.
The first thing you will want to do is to create a home page. You can do this by creating home.php in your theme directory. Next, create a blog template. The easiest way to do this is to create a file named blog.php with the following contents in your theme directory:
<?php
/*
Template Name: Blog
*/
// Which page of the blog are we on?
$paged = get_query_var('paged');
query_posts('cat=-0&paged='.$paged);
load_template(TEMPLATEPATH . '/index.php'); //loads index
?>
Log into Wordpress and create a page named “Blog” with template “blog”. You’re done. The one last thing you will want to do is to update your permalinks structure to begin with “/blog/”, ie, “/blog/%year%/%monthnum%/%postname%/”. Now you have a Wordpress-managed CMS with a unique front page and logically-structured blog content.
As noted above, the home.php file is not needed in versions 2.1+. If both the blog.php and home.php files are deployed in 2.1+ they will conflict and cause the blog.php templated page to appear blank.
[edit]
A Note on Nomenclature
A page can be static or dynamic. Static pages are those which have been created once and do not have to be regenerated every time a person visits it. In contrast, dynamic pages do need to be regenerated every time they are viewed; code for what to generate has been specified by the author, but not the actual page itself. These use extensive PHP code which is evaluated each time the page is visited, and the content is thus generated on the fly, upon each new visit.
Almost everything in WordPress is generated dynamically, including Pages. Everything you and others write in WordPress (Posts, Pages, Comments, Blogrolls, Categories, etc.) is stored in your MySQL database. When your site is accessed, that database information is then used by your WordPress Templates from your current Theme to generate the web page being requested. Thus, WordPress information is dynamic, including the information contained in your Pages.
An example of a static page might be an HTML document (without any PHP code) you’ve written as an addition to your dynamically generated WordPress pages, perhaps an “About Me” page. The problem with purely static pages is that they are difficult to maintain. Changes you make to your WordPress settings, Themes and Templates will not be propagated to pages coded only in HTML. The Page feature of WordPress was developed, in part, to alleviate this problem. By using Pages, users no longer have to update their static pages every time they change the style of their site. Instead, if written properly, their dynamic Pages will update themselves along with the rest of your blog.
Despite the dynamic nature of Pages, many people refer to them as being static. In the context of web publishing, static and dynamic mean what has been described above. More generally, however, static can mean “characterized by a lack of change”. It is easy to see how this definition influenced the word’s use in describing types of web pages. It is also to easy to see why people think of Pages as being static; Posts come and go, but Pages are here to stay since Pages are typically used to display information about your site which is constant (e.g. information about yourself, description of your site, etc.).
In other words, a Page contains static information but is generated dynamically. Thus, either “static” or “dynamic” may be validly used to describe the nature of the WordPress Page feature. However, in order to avoid confusion, and because Pages themselves are dynamic while it is only their contents which are in some way static, this document does not refer to Pages as being static.
The Dashboard
March 23rd, 2007
The Dashboard tells you about recent activity both at your site and in the WordPress community at large.
Latest Activity
The Latest Activity box presents a concise summary and convenient links regarding current events at your blog. Displayed are:
- Incoming Links
- Links to sites referring to your blog
- Comments
- Comments in moderations and links to most recent comments
- * Comments in moderation - How many comments have been held for Comment Moderation, and a link to moderate those comments. (see also the Administration > Options > Discussion).
- * Recent comments - Five recent comments with a link to each comment on their respective post pages, and a link to edit each comment.
- Posts
- The titles of the five most recent posts, and links to edit them.
- Scheduled Entries
- The titles of all future dated posts, when those posts will go live, and links to edit them.
- Stats
- Some statistics on your blog: the number of posts, the number of comments, and the number of categories.
Adding Links
March 17th, 2007
WBCCI.net allows you to store a set of external Links, also known as your “blogroll”. These links can be put into categories, imported, and exported; they can be added, deleted, and edited; and their categories can be added, deleted, and edited. This article describes how to do all of the above, using the Links section of the WBCCI.net Administration Panels.
Managing Links
When you click on “Links” in the main Administration Panel, you will come first to the Manage Links SubPanel, where you will see a list of all of your links. In WBCCI.net, click “Links” in the main Administration Panel, and the SubPanel is called “Manage Links”.
Listing Links
In the Manage Links SubPanel, your Links are displayed in a tabular format. Each link is a row in the table, and the table has the following columns:
- Name
- The name of the link (in bold) and its description.
- URI
- The URI (location) of the link.
- Category
- The category that the link is in.
- rel
- The XFN relationship for this link.
- Image
- Whether or not there is an image associated with this link.
- Visible
- Whether or not the link is visible to visitors on your site.
- Action
- Section containing links to Edit and Delete the link, as well as a checkbox for Managing Multiple Links.
You can change the display in the following ways:
- Restrict to just one category
- Choose a category from the “Show Links in Category” drop-down (or choose “All” to change back to displaying all links) and click Show, and the list will be restricted to the category you chose.
- Change the sorting order
- Choose one of the options in the “Order By” drop-down and click Show, and the list will be sorted by Link ID, Name, URI, Description, Owner, or Rating. By default, the links are sorted by name.
Managing Multiple Links
You can modify many links at once by using the options found at the bottom of the SubPanel. Changes are applied only to the links above whose checkboxes are checked. You can quickly toggle all of the unchecked boxes to checked, and all checked boxes to unchecked, by clicking on “Toggle Checkboxes”. The following actions are available:
- Assign Ownership
- Each link has a user who “owns” the link. You can change the ownership of all the checked links by selecting a new owner from the dropdown and clicking “Go”.
- Toggle Visibility
- Links can be visible to or hidden from visitors to your blog. Clicking “Toggle Visibility” immediately makes all checked links previously marked with Visibility “Yes” to “No”, and all checked links previously marked with Visibility “No” to “Yes”.
- Move to Category
- You can change the category of all of the checked links by selecting a new category from the dropdown and clicking “Go”.
Adding Links
Add Link screen.
When you click “Links” in the main Administration Panel, and then click “Add Link”, you will come to the Add Link SubPanel, where you can add a new link to your list. The screen looks similar to the image to the right, and has the following sections:
- Basics
- All of these fields, except for the Short description, are required. Sample input is shown in parentheses.
- URI or Link Address - The URI of the web page you’re linking to, with the http:// (http://example.com/).
- Link Name or Name - The text that will be shown on your blog screen for the link (John Doe’s Blog).
- Short description or Description - If your Theme includes it, this descriptive text will be put on the screen after the actual link. It will also be shown to the user as a “tool-tip” when they hover their mouse over the link. (The blog of John Doe, unknown blogger).
- Category - Select the category for the link.
- Link Relationship (XFN)
- XFN (Xml Friends Network) is a way to define your relationship with the linked person. For example, if you work with Harriet Smith, and you link to her blog, you can check co-worker or colleague, symbolizing that she is one of those. Same with crushes, dates, and you can also say whether this is another one of your sites.
- XFN relationships are optional for WordPress links. You can leave everything in this section blank and all your links will still work. Defining Relationships with XFN makes the links defined on your weblog more understandable to machines that will process your pages.
- rel - Specifies the rel attribute that will be put onto the link’s a tag when displayed on the screen. Some possible values are nofollow (if you don’t want search engines to follow the link), author, and smart. Multiple rel keywords should be separated with spaces.
- Advanced
- The Advanced fields are not required, but can add extra information to the link. Note that a few of these fields have been moved into their own sections in Version 2.1 of WordPress.
- Image URI - An image to be displayed with the link. This can either be an absolute URI (http://some.site/images/image.png) or a relative path (/images/some.png). You may want this to be rather small, around 16×16, similar to a favicon.
- RSS URI - URI of the RSS feed associated with the Link, which will be displayed next to the Link itself (if your Template allows it). Example: http://example.com/feed/
- Notes - Any notes you want to store, for your own internal use, about the Link. Example: Nice design, from #wordpress.
- Rating - A ranking of the Link, which can be used to sort links within Categories.
- Target - Specifies the target attribute that will be put onto the link’s a tag when displayed on the screen, which tells where the page will appear if the user clicks on the link. There are three options:
-
- none: open the link in the same window or frame (default).
- _top: if you’re using frames, open the link at the top level of the frame system.
- _blank: open the link in a new window.
- Visible Whether or not the link will be shown on your site. You can hide a link (temporarily or permanently) by choosing “No” for the Visible attribute.
When you have set all the options you are interested in, click Add Link to add the new Link to your blogroll.
Editing Links
Manage Links screen.
To edit a link, in case of an error or change in the link information, WordPress provides an Edit Link option.The Links > Manage Links subpanel features an Edit button on the link’s table row. This brings you to the Edit a Link subpanel.
Edit Link screen.
This mode is essentially the same as the Add Link SubPanel. The only difference is that the buttons to save your work are called “Save Changes” instead of “Add Link“. When you’re done you can hit one of the three Save Changes buttons, whichever one is closest to the section that you’re working on.
From within the Edit Link panel, you can change any or all of the options for the link, including XFN relationships, category, address, description, RSS URI, or any other detail.
Deleting a Link
Manage Links screen.
To delete a link, go to Manage Links. From the table list of links, identify the link you wish to delete. Click the Delete link for that link to delete it. Remember, you will not have a chance to cover from this delete. It makes a permanent change to the database.
Did you really want to delete that link?
A popup window with a confirmation should appear. Choose OK or Cancel if you hit the Delete link by accident. Remember, this is the only chance you have.
After making your choice, you will be directed back to the Manage Links page.
Link Categories
Link categories.
Links in WordPress can be organized into categories, all the better for organization. The default installation of WordPress automatically sets one category, Blogroll. You are given the ability to add, edit and delete categories.
- Note: You can’t delete the Blogroll category, but you can edit it. You can rename it if you prefer another name.
Adding a Category
Adding a link category.
To add a link category in WordPress 2.0, navigate to the Manage Links > Link Categories SubPanel. The Add Link form is farther down the page.
The following options are available:
- Name
- Name of the category. This is the name that will display on your site in your Links list.
Example: My Uber-kool Category
- Show
- What you want to show with the category. You can choose any, none or all of these options. All of these depend on whether you have entered values when you added the link:
-
- Images associated with the links in this category
- Descriptions of links in this category
- Ratings of the links in this category
- Updated indicates whether a link has been recently updated or changed. Note: Updated means when you last updated the link entry, not when the linked webpage was updated.
Example: Image, Description and Rating Example 2: Description
- Sort Order
- How you want the links to be sorted when they’re displayed. Possible options are:
-
- Name
- ID
- URL
- Rating
- Updated
- Random
Example: Random Example 2: Id, descending
- Limit
- Got a whole bunch of links in that one category? Put a number in here to limit how many are shown. If you set the Sort Order to Random, this will show different links every reload/view (if you have enough links in the category, of course).
Example: 5
- Toggle
- Auto-Toggle hides all other links in this category so that the new link is the only one displayed on your site. If used, only this link will be visible in the category, even if you try making them manually visible in the Manage Links subpanel. Usage: YES enables and NO disables Auto-Toggle.
Example: Yes
Editing a Category
Link categories
To edit an existing category, go to Link Categories SubPanel. From the table list of link categories, choose the category you wish to edit and click the Edit link.
Editing a link category
The category fields to edit and change are the same ones in the previous section on adding link categories.To save your changes, click Save Category Settings. This will retrun you back to the Link Categories section.
Deleting a Category
Link categories.
To delete an existing category, use the Link Categories SubPanel.From the table list of categories, find the category you wish to delete and click the Delete link. Remember, once you have deleted a category from your database, it cannot be undone. This is a permanent delete.
Do you really want to delete that category?
A popup window will appear requesting confirmation of the delete. Choose OK to confirm the delete or CANCEL to back out of the delete.
Make your choice, and it’ll send you back to the Link Categories screen.
Formatting
You can alter how your website displays the list of links from this category by modifying the text found in the following three text boxes. However, these options are only used by some themes.
The following template tags are used only with Link Manager:
- Before Link
- This string of characters or HTML tags which will be inserted before every link in the list of links from this category.
Example: <li>
- Between Link and Description
- When a category is set to show the description with the link, this is what separates them.
Example: <br />
- After Link
- This string of characters or HTML tags which will be inserted after every link in the list of links from this category.
Example: </li>
To actually add the category, just click Add Category or Save Category Settings to save the information you’ve entered.
Importing Links
Importing links
WordPress makes it easy to import links into Link Manager. The
