Get How to Edit WordPress by adding a custom admin panel today!

Finding accurate tutorials with specific examples showing how to edit WordPress can waste a lot of time without turning up any good results.

It took me a few days of pouring over various existing themes and hunting around the internet to before I finally figured out how to customize wordpress for my own purposes.

If you would like a straight forward example of creating options for your own WordPress theme and building an admin panel so that you ( or others ) can easily change those options, then I have put together a short, concise manual that may be exactly what you are looking for.

Within this short 23 page manual you will find everything you need to:

• Create an admin panel for your WordPress theme
• Handle processing and display of your WordPress theme
• Use CSS and JavaScript within your admin panel
• Display status codes to users after processing requests
• Write a php class to handle all of your admin panels functions
• Read and write theme options to the builtin WordPress database
• Add functionality beyond updating options to your admin panel

With that being said, this manual does not cover more advanced topics such as:

• Storing theme options in custom database structures
• Creating admin panels with multiple tabs
• Creating top level WordPress admin menus

However, if you know how to create tabbed html pages and/or use php to access a database directly, then this manual should get you going on those things as well.

Once you have finished this guide, you will know how to edit wordpress by adding options to your favorite wordpress theme and building a panel to make updating your option settings a breeze.

Also included with this manual is a modified version of the default wordpress theme which contains an admin menu having seven options and illustrating how to use the following major form controls to manage your options:

• Text Boxes
• Text Areas
• Check Boxes
• Radio Buttons
• Select Menus
• Multi-select Menus
• Multi-option Check Boxes

The included ( very basic ) theme is not meant for normal use, but rather to clearly illustrated how to customize WordPress with extra options.

For only $7.00, this manual ( and the included code ) could save you hours or even days spent trying to track down solid information showing how to edit wordpress for your own purposes.

Grab a copy now for only $7.00!

The below image shows an example of a customized wordpress homepage using the Atahualpa theme (version 3.2).

Creating a page like the one displayed above is covered by this article. As you can see this particular layout has:

A link to the store

Setup as a home page kicker in atahualpa

A headline and introductory blurb

To give customers a bit of information about your store

A featured categories section

To list featured categories in your store

These can link directly to your store, to category showcases, or to category directories.

An incentives section

This can be used for anything, but in the above page it is used to show incentives for buying from that particular store.

A shipping information section

In this case it notes that shipping is combined on all orders, that all new packaging is used, and provides a link to the sites shipping details page

The most recent product showcases and articles on the site

These are shown automatically as they are posted on the right side of the page.

The number to show can be manually set.

If using my product showcase module, links to product showcases on the right also provide direct links to view the item on the store as well as the store category that the item is in.

Requirements for using the below homepage as is

If you want to be able to use this homepage without having to modify theme files, then you will need to be using the Atahualpa theme ( version 3.2 ). These instructions do not currently work for newer versions due to changes in the theme.

Of course, with a bit of work you can probably work it into any theme.

Note: All instructions below assume that:

You are running WordPress with the Atahualpa 3.2 theme activated.

These files will require some editing for other themes

You are hosting your files on Hostgator

For other hosts, they should be good enough as long as you are running on a linux server and/or using cpanel

Of course, some steps provided might not be exactly right, but they should be good enough to get things setup.

Step 1: Adding the customized homepages CSS entries

Before you place up the customized homepage and edit it, you should first add the styling sections to it.

Adding CSS Sections to Atahualpa

Copy the text in the below box

Click in the box

Select "Edit" → "Select All" from the file menu.

Select "Edit" → "Copy" from the file menu.

/* entire wrapper for home page */
table.pws-home-wrapper {
	border: none;
	background: #FFFFFF;
}

/* left side of home page (table) */
td.pws-home-left {
	border: none;
	background: #FFFFFF;
        width: 50%;
        vertical-align: top;
}

td.pws-home-left table {
	border: 1px solid #CCCCCC;
	background: #FFFFFF;
        width: 95%;
}

/* each item in left side of home page (table) */
.pws-home-lbone {

}

.pws-home-lbtwo {

}

.pws-home-lbthree {

}

/* right side of home page */
td.pws-home-right {
	border: none;
	background: #FFFFFF;
        vertical-align: top;
}
td.pws-home-right table {
	border: none;
	background: #FFFFFF;
}

/* tables containing post pieces in right side of home */
table.pws-home-item {
	border: 1px solid #CCCCCC;
	background: #EEEEEE;
}
/* title of each post */
.pws-home-itemhead {
	font-weight: bold;
        border: 1px solid #CCCCCC;
}
.pws-home-item td {
        border: 1px solid #CCCCCC;
}
.pws-home-item td a.more-link {
        float: right;
}

.pws-home-itembody img {
	width: 60px;
	height: 48px;
	float: left;
	margin-right: 0.5em;
	margin-bottom: 0.25em;
}

.pws-home-itemfoot {
	text-size: 85%;
}

Paste the copied text into Atahualpa’s CSS Inserts

To do so:

Log into wordpress

Select "Appearance" → "Atahualpa Theme Options" from the admin menu.

This will load the Atahualpa Theme Options page

Select "HTML/CSS Inserts" from under the Atahualpa Theme Options header

This will load the HTML/CSS Inserts page

Find the "CSS Inserts" box and paste the css into it

Scroll to the bottom of the box.

Put your cursor at the end of the last line of text.

Press enter on your keyboard to create a new line.

Select "Edit" → "Paste" to add the css entries.

Save your changes

Select the "Save Changes" box at the bottom of the page.

Now that you have your css entries added, it is time to get the homepage file, edit it, and place it on your site.

Step 2: Download the customized homepage file

Download my Atahualpa Customized Homepage One file

Save it somewhere that you will find it.

Extract the contents of atahualpa-customized-homepage-one.zip

The only file in it is home.php.

Most people can download zip files easier than php files.

See how to extract zip files on windows if you need help.

Step 3: Edit the contents of home.php

Now that you have the customized homepage downloaded and extracted, it is time to modify it for your site.

Open home.php in the editor of your choice.

Click it with your right mouse button and select "Edit" if you are using windows

Edit the headline for your page

Scroll down and find the section that has <!– Post Headline –> above it.

Edit the headline for your page

Replace HEADLINE-FOR-YOUR-PAGE with the headline you want for your homepage.

I recommend using at least one of your sites primary keywords in the title.

See Basic Keyword Research and Domain Keyword Research if needed.

Edit the Top Left Box

This box is designed to link to your category showcases, category directories, and store categories.

Edit the Box Header

Scroll down to the section that starts with <!–Left Box One–>.

Replace FEATURED CATEGORIES HERE with an appropriate header

If possible, keep it short and include one of your targeted site keywords.

Edit the Box Contents

The box contains both an introductory blurb and category links

Change the introductory blurb

This is located inside of <p> and </p> tags.

If you can make it sound natural, use at least one of your site targeted keywords in it.

Change the links

For each link:

• Replace CATEGORY-SHOWCASE-LINK with a link to a category showcase, category directory, or category on your store.
• Replace CATEGORY-TITLE with a short, descriptive title for the link.
• Replace CATEGORY NAME with the name of the category to link to.

If you need more links:

Add new <li><a href=""></a></li> lines among those that are there and edit them.

Edit the link to your store

Replace the URL displayed with the URL to your store.

• Bonanzle sellers just need to replace BOOTH-NAME with the name of their Bonanzle booth

Replace BOOTH-TITLE with a short descriptive title for your store

Edit the 2nd Left Box

By default, the second box on the left side is used to display incentives and/or reasons to buy from you rather than someone else. Of course, you can use it for whatever you want.

To start editing it for your site, scroll down and find <!–Left Box Two–>

Edit the Box Title

Find BUYING-FROM-US-OR-INCENTIVES-TITLE.

Replace it with the title you want for the box.

If you can think of a good, short phrase which contains one of your main site keywords, do so…but don’t sweat it.

Something like "Why by from (storename)" or "Reasons to shop with" might be decent.

Edit the Box Contents

This box contains a short preface followed by a few links.

If you don’t want links, remove the <a href="LINK-HERE"> and </a> tags from around an item.

Replace the "When you buy from us…" blurb

Keep the P tags around it.

Use at least one broad site keyword if you can make it sound natural to do so.

Add any links or pieces of information you want displayed

You can create posts and link them here.

You can link pages on your site or store.

For each link:

• Replace LINK-HERE with the URL of the page you want to link to.
• Replace LINK-TITLE with a quick introductory title to the item being linked.
• Replace NAME-FOR-LINK-HERE with the name you want for the link.

Update or remove the blurb after the links

If you want more information after the links, edit the line after them that is between <p> and </p> tags.

If you don’t want information after the links, delete everything from the line <!–second section–> to <!–end second section–>

Edit the 3rd Left Box

The third box on the left is intended to give people quick information related to shipping, handling, packaging, etc.

Of course, you can put anything you want in the box.

Edit the Box Title

Replace SHIPPING-PACKING-OR-WHATEVER-TITLE with the title you want.

Something like YourStoreName Shipping Details might be good.

Edit the Box Contents

This box contains a short preface followed by a bulleted list then another short informational blurb.

Replace the intro blurb

I recommend leaving the <p> and </p> tags in and only updating the text between them.

Edit the list items

Each list item is between <li> and </li> tags.

You can add more items by copying a line and placing it in with the others.

You can remove items by deleting an entire line

Edit the second blurb

If you have a shipping details page, place the URL to it between the quotes after href=

If you want a shipping details page, create a new page for shipping details

If you don’t want a shipping details page, remove and/or replace everything between the <p> and </p> tags in the second blurb.

Adding more boxes on the left

If you want more boxes on the left side, you can create a new table before, between, or after the existing boxes.

The base of the table should look like:

<table class="pws-l-default">

<tr><td>

YOUR CONTENT HERE

</td></tr>

</table>

When entering information in the box, I recommend enclosing text which is not part of a list inside of <p> and </p> tags to make it display nicely.

You could have whatever you want in these boxes. Some ideas:

• Your picture with a brief biography linking to your about page
• Lists of good articles related to what you sell
• Offers for magazines, books, or other items related to what you sell
• Free ebooks related to the items you sell

When finished making changes, save this file

Select "File" → "Save" from the file menu.

Step 4: Prepare your posts for your modified home page

Your home page will look quite funny if you include entire posts in it.

Before you place your homepage up, you should go through all of your existing posts and be sure to place a <!–more–> tag after the first sentence or two.

The more tag tells WordPress to only show the content before it on post which make use of it when displaying them on archival pages…or this customized home page.

Step 5: Modifying Atahualpa Theme Options

To get posts on your front page to show properly, you should alter the more tag settings within atahualpa theme options.

Make sure Posts or Excerpts on Home page is set to "Full Posts"

Select "Appearance" → "Atahualpa Theme Options" in the admin menu

Select "Posts or Excerpts" under the Atahualpa Theme Options header

Next to "Posts or excerpts on HOME page?", make sure that Full Posts is selected.

Make sure that "Show the first X posts…" is greater than zero. It should be set to the number of posts you want displayed on your home page. If you get an empty right side on your home page, this is the problem.

If you changed it, select "Save Changes" at the bottom of the page.

You should also be sure that the right sidebar is not displayed on your homepage

Disable the right sidebar on your homepage.

To do this:

• Select "Appearance" → "Atahualpa Theme Options"
• Select "Sidebars" from under the Atahualpa Theme Options header.
• In the "Right Sidebar: Display on" section, uncheck "Homepage"
• Save your changes

Step 6: Upload your custom home.php page

Now that everything is prepared, upload your home.php file

Upload home.php to the atahualpa theme directory on your server

This should be /public_html/wp-content/themes/atahualpa if you are using hostgator and have installed wordpress on the root of your website.

Review your customized home page

If you see any posts on the right side with a large amount of text, you probably forgot to add a <!–more–> tag to such posts. You will know it needs such a tag for sure if there is no "Read more →" link at the bottom of the post.

If you want to make further changes, you can either use the built in editor or edit home.php locally and re-upload the file.

If there are serious problems which you cannot fix immediately, delete the home.php file you uploaded off of the server and things should return to normal.

Step 7: Adding Special Sections (Atahualpa Only)

If you are using Atahualpa, each post and page is made of five parts:

• A Kicker (displayed above the headline)
• The Headline (you create this for each post or page)
• A Byline (displayed between the header and the body)
• The Body (you create this for each post or page)
• A Footer (displayed under the body)

For this theme, I recommend setting up your home page kicker and your home page byline.

Creating your homepage Kicker

This will be displayed above the title on your home page.

Go to Post/Page Info Items in Atahualpa Theme Options

Select "Appearance" → "Atahualpa Theme Options"

Select "Post/Page Info Items" under the Atahualpa Theme Options header

Edit KICKER: Homepage

I recommend a link to your store.

<a href="STORE-LINK" title="DESC">LINK-NAME</a>

You might have it read Visit the (link) today!

Edit BYLINE: Homepage

I recommend an introductory blurb for your site.

This will be placed between the header and the rest of the page.

Save your changes

Select "Save Changes" from the bottom of the page

Reload your home page and you should now display your kicker and byline.

]]> http://www.privateerwebsolutions.com/articles/how-to-create-a-customized-homepage-for-your-store-traffic-site.html/feed 0 http://www.privateerwebsolutions.com/articles/how-to-create-category-showcases-for-your-store-traffic-site.html http://www.privateerwebsolutions.com/articles/how-to-create-category-showcases-for-your-store-traffic-site.html#comments Thu, 02 Jul 2009 20:16:28 +0000 Privateer Web Solutions http://www.privateerwebsolutions.com/?p=430 Creating a category showcase for your store traffic site can help to increase the number of reasonably well targeted potential buyers who visit your store.

An example of a category showcase

Below is an example category showcase built for the Atahualpa 3.2 WordPress theme.

The above category showcase does the following for a store traffic site:

It provides a general page for driving traffic related to roleplaying games

It has sections for information relevant to potential customers:

• Reasons to buy from you
• Links to news and resources published on site which are updated automatically as you create new content.
• A quick selection of subcategories for those interested in particular roleplaying items or systems
• A list of recently added roleplaying games which is generated automatically from the most recent product showcases published on site.
• A store widget to showcase a couple of specific products

Creating your own Category Showcase

To create a category showcase like the one above, you will need the following:

• A WordPress site
  • See my store traffic website page for details.
• The Recent Posts plugin for WordPress
• The Post Plugin Library for WordPress

Note:
See Setting up new plugins in WordPress for help with installation.

Step 1: Setting up the Recent Posts Plugin

The Recent Posts plugin needs to be configured to allow output in content.

Log into WordPress

Select "Settings" → "Recent Posts"

This will bring you to the recent posts setting screen.

Select "Placement" from the top menu

This will bring up the recent posts Placement Settings screen

Set "Output in content:" to "Yes"

This lets you place special tags in posts and pages to display recent posts.

Select "Save Placement Settings"

This will save your settings

Step 2: Add CSS entries to your site

The category above uses a few CSS settings to take care of placement.

You may want to add more for finer display control.

Add the below stylesheet information to your site

• Atahualpa version 3.2 Instructions:

Copy the contents of the box below

Click in the box

Select "Edit" → "Select All" from the file menu

Select "Edit" → "Copy" from the file menu

Login to your wordpress site

Select "Appearance" → "Atahualpa Theme Options"

Select "HTML/CSS Inserts" from the theme options at the top

Paste the copied code into the end of the CSS Inserts box

Scroll down to the end of the CSS Inserts Box

Click at the end of the last line

Select "Edit" → "Paste" from the file menu

Select "Save Your Changes" from the bottom of the screen

• For most other themes, copy the contents into your style.css file.

.pws-cat-list tr td {
    vertical-align: top;
}
.pws-cat-show tr td {
    vertical-align: top;
}

Step 3: Update Atahualpa Theme Options

Disable the right sidebar on "Page" pages

To do so:

• Log into WordPress.
• Select "Appearance" → "Atahualpa Theme Options".
• Select "Sidebars" under the Atahualpa Theme Options header.
• In the "Right Sidebar: Display on" section, uncheck "Page pages"
• Save your changes

Step 4: Create your new Category Showcase Page

To create a category page like that shown at the top of this page, use the following code snippet for the body and edit it to suit your tastes.

 CATEGORY BLURB 
<table class="pws-cat-show">
<tr>
<td width="50%">
<table width="100%">
<tr>
<th>Why buy from us?</th>
</tr>
<tr>
<td>

REASON-AND-INCENTIVE-INFO
</td>
</tr>
<tr>
<th>News and Resources</th>
</tr>
<tr>
<td>
  <!--RecentPosts limit=5&tag_str=*********************-->
 </td>
</tr>
</table>
</td>
<td>
<table width="100%">
<tr>
<th>Our store categories</th>
</tr>
<tr>
<td>
<ul>
<li><a href="URL_HERE">LINK_NAME</a></li>
<li><a href="URL_HERE">LINK_NAME</a></li>
<li><a href="URL_HERE">LINK_NAME</a></li>
<li><a href="URL_HERE">LINK_NAME</a></li>
</ul>
</td>
</tr>
<tr>
<th>RECENTLY_ADDED_CAT_NAME_HERE</th>
</tr>
<tr>
<td><!--RecentPosts limit=5&included_cats=**^**^**^**^**^**^**--></td>
</tr>
</table>
</td>
</tr>
</table>

<center>


WIDGET_HERE


</center>

Create a new Page in WordPress

Log into WordPress

Select "Pages"Add New" from the admin menu

This will bring up the new page dialogue.

Enter the name you want for your category showcase page

This should be the primary keyword for your category.

Copy the below text into the body of your new page

Click in the box below

Select "Edit" → "Select All" from the file menu

Select "Edit" → "Copy" from the file menu

Click in the body of your new page

Select "Edit" → "Paste" from the file menu

Set the page order and parent if wanted

Fill in Description and Keywords for Platinum SEO Pack if installed

Select Save Draft

Edit the page contents for your site

Edit CATERGORY BLURB

This should provide descriptive information about your category.

Edit REASON-AND-INCENTIVE-INFO

This should offer information on why buying from you is a good thing

Edit tag_str=***************

The *********** should be changed to a list of tags seperated by commas.

Posts with the tags listed here will automatically show up in the News and Resources box on the page.

For example, tag_str=books,fiction,adventure

Enter links to related store categories

These should be links directly to categories in your store.

Replace URL_HERE with the URL to your store category

Visit your store category in a different browser window or tab

Click in the box at the top where you see http://….

Select "Edit" → "Select All" from the file menu

Select "Edit" → "Copy" from the file menu

Back in your wordpress editor, delete the URL_HERE you want to replace

Place your cursor between the quotes after href=

Select "Edit" → "Paste" from the file menu

Replace LINK_NAME with the name you want for the link

This should be your primary keyword for the linked category.

Repeat for each category link you want to display

Remove any extra list item lines

To add more links copy a line and edit it.

Edit RECENTLY_ADDED_CAT_NAME_HERE

Something like "Newly added whatevers"

Set categories to have recent posts displayed for

Delete the **^**^**^**^**^**^** after included_cats=

Enter the IDs post categories you want to display here

Finding post category IDs

In a new window, go to your wordpress admin panel

Select "Posts" → "Categories" from the menu

Click the category you are interested in

In your browsers URL line, find cat_ID=#

That number is the ID for the category you selected.

Multiple IDs can be specified by seperating them with commas

Edit WIDGET-HERE

If you don’t want a widget, just delete everything after the last </table> tag

If you do want a widget:

Delete the WIDGET-HERE text

Copy a widget into the area it was in

See Bonanzle Widget Instructions

Select Save Draft

Select Preview to view your showcase

Make sure that everything looks ok

Test the links out to ensure they work

When you are satisfied that everything looks good, publish your new page.

Creating a Template for Future Category Showcases

Now that you have your first category showcase created, you might want to go ahead and create a template for it.

Read how to create templates for faster wordpress posting for full instructions on how to make a template for your category pages.

Note: As of WordPress 2.8, template creation is more difficult than it was because you can no longer edit templates with the plugin I use…but it still works just fine.

]]> http://www.privateerwebsolutions.com/articles/how-to-create-category-showcases-for-your-store-traffic-site.html/feed 0