How to Edit Pages in WordPress

This is a basic guide to editing existing pages on a WordPress site.

Log in

Log in at [YOUR SITE URL]/wp-admin/ with your admin username and password. WordPress Usernames and passwords are case-sensitive, so be careful.

After your initial login, you can edit the details of your user account (such as email or password) by clicking on the “Profile” link in the main navigation on the left.

Go to the List of Pages

From the dashboard, click on the “Pages” Link in the main navigation bar on the left.

Pick a Page

Choose which page you would like to edit and click on its title.

Basic Page Edits

Copy Area

Make necessary changes to the page copy in the copy area (looks like a small word processor window).

Adding Images

Upload Insert

To add an image to a page, place your cursor where you would like the image within the copy and click on one of the icons above the copy area next to the label “Upload/Insert”.

Select Files

A pop-up dialog will appear titled “Add media files from your computer”. Click on the “Select Files” button and locate the image on your computer. Alternately, you can click on the “From URL” tab at the top of the window and paste the URL of an image from the web, if you have it.

Add an Image

Once the image has finished uploading, you will be presented with a number of fields to enter relevant data for the image. All may be left blank, but it’s a good idea to at least fill out “Title” and “Alternate Text”. Here is a rundown of the purpose of each field:

  • Title: A short description of the contents of the image. Most browsers will display this text as a tool-tip when the pointer is hovering over the image.
  • Alternate Text: Should be the same as “Title”.
  • Caption: An optional caption for the image.
  • Description: Contents of this field will not be displayed on the site. This can be used to make notes about the image for later reference.
  • Link URL: If you want the image itself to be a link to anything, paste the URL here. By default, the system will insert a link to the original uploaded image.
  • Alignment: Choose how you want the image to align within the Page. “Right” and “Left” will float the image to the right or left, respectively, and allow text to wrap around it.
  • Size: Choose from 3 sizes created automatically during upload or the original image size. Note: WordPress will only create image sizes smaller than the original.

When you have added all your image info, click on the “Insert into Page” button to insert the image into the Page where you last left the cursor.

If you have images that were previously uploaded to the site, you may find them under the “Media Library” tab in this pop-up window. Clicking on the “Show” link next to an image in the Media Library tab gives you the same fields you would see if you had just uploaded the image.

Adding Documents

Upload Insert

Uploading and adding a link to a document is very similar to adding an image. Start by placing the cursor in the copy where you want the link and clicking on one of the icons above the copy area next to the label “Upload/Insert”.

Select Files

Next, choose a file by clicking on the “Select Files” button and locating the document on your computer. Alternately, you can click on the “From URL” tab at the top of the window and paste the URL of a document from the web, if you have it.

Add Document

Once the document has finished uploading, you will be presented with a number of fields similar to the ones we saw in the image uploading process. Here is a rundown of the purpose of each field:

  • Title: This will be the text of the link inserted into the copy. It defaults to the file name, but you may change it to be whatever you like.
  • Caption and Description: These are not used on the front-end of the site. They can be used for internal reference or left blank.
  • Link URL: This will automatically be filled with a link to the file that was just uploaded. If you accidentally change the contents of this field, click the “File URL” button to repopulate the correct link.

When you have added all your document info, click on the “Insert into Page” button to insert the link to the document into the Page where you last left the cursor.

If you have documents that were previously uploaded to the site, you may find them under the “Media Library” tab in this pop-up window. Clicking on the “Show” link next to a document in the Media Library tab gives you the same fields you would see if you had just uploaded the document.

Adding a Link

insert Edit Link Button

To add a link to a Page, first select the copy you would like to be the link. Then click on the “Insert/Edit Link” button in the toolbar. It looks like a short length of chain.

Link Popup

In the pop-up dialog, enter the full link in the URL field. You may optionally add a title to the link and have the link open in a new tab or window.

Additionally, you can choose to link to other pages in the site by clicking “Or link to existing content” to expand the list of existing pages and choose one of them.

When finished, click the “Add Link” button and the link will be added to your Page.

To edit a link, place the cursor anywhere in the link in the copy area and click the “Insert/Edit Link” button again. You will see the same options you saw when creating the link.

To remove a link, place the cursor anywhere in the link in the copy area and click the “Unlink” button, directly next to the “Insert/Edit Link” button (looks like a broken length of chain).

Update

In the “Publish” panel on the right-hand side, there are additional options you may wish to use:

  • “Status” – The default status of is “Published”, but “Pending Review” and “Draft” statuses may be used for internal review purposes. Note: pages with the latter two statuses are not visible on the front-end of the website.
  • “Visibility” – Default is “Public” but can also be “Password Protected” (requires a password to view the page. Admin sets the password separately for each page with this level of visibility) or “private” (only viewable to logged-in WordPress users of the site).
  • Publish time: Shows the date the page was originally published. If this is changed to a date later then the current one, the page will not appear on the site until that date.

UPDATE

Once you are satisfied with the content of your page, you may click the “Update” button. That’s it, you’re done!

Add a comment

ExpressionEngine caching and performance

Free options: http://expressionengine.com/user_guide/general/caching.html

$70 module: http://www.solspace.com/software/detail/static_page_caching/

Notes:

  • Don’t turn on template caching for an embed template that will be called several times in a loop with dynamic parameters. you will just repeat the first result.
  • Tag Caching works pretty well. The only limitation is that it’s time-based.
Add a comment

WP e-Commerce

This thing is a beast, but hopefully the best. I’ll try to collect my solutions and resources here.

Template Tag Reference

The best list of template tags I’ve found is on a third-party site:

http://www.visser.com.au/wp-ecommerce/documentation/customisation/themes-and-templates/

Image uploader showing “HTTP Error”

Most likely PHP running out of memory during the “Crunching” phase. But this might help:

http://blog.nerdstargamer.com/2009/wordpress-upload-http-error-fix/

Tutorials

http://www.1stwebdesigner.com/wordpress/custom-wp-e-commerce-theme-2/

Custom Post Type Info

WPEC uses WordPress’s built-in custom post type system, which is awesome. Finding the name of the custom post type and the category taxonomy was not awesome.

WPEC’s custom post type: wpsc-product

WPEC’s product category custom taxonomy: wpsc_product_category

Notice the mixed use of underscore and hyphen separators. This is rampant throughout WPEC.

Remove “from: ” from prices on products with variations

Add the following to your theme’s functions.php:

function wpsc_remove_from_for_variations($from) {
return '';
}
add_filter('wpsc_product_variation_text','wpsc_remove_from_for_variations');

Via: http://getshopped.org/forums/topic/no-price-change-required-with-variations/

get thickbox to work if you’ve styled the body tag

in wpsc-core/js/thickbox.js, replace all instances of jQuery("body") with jQuery("html").

 

Add a comment

Checklist for a secure site (WIP)

SSL that covers transmitting credit card data

Hosting allows secure transfer of credit card data

Rewrite URLs to match that on SSL exactly (including “www” subdomain, if it’s on the certificate)

No links to non-secure content or content on a different domain (the latter may depend on type of SSL, not sure)

If using WordPress, the default admin toolbar on the site will cause security errors

Add a comment

Open External Links in a new Window via jQuery

$(document).ready(function(){
	$('#content a[href^="http:"], #content a[href^="https:"]').click( function() {
		window.open( $(this).attr('href') );
		return false;
	});
});
Add a comment

Link directly to Google Maps driving directions

use this URL:

http://maps.google.com/maps?daddr=

Add the destination address as the value of the “daddr” variable with + in place of all spaces. You can also add an “saddr” variable for a start address (say someone entered their address in a form on your site).

Add a comment

Good god, can you make WordPress stop adding or removing p and br tags?

Shotgun approach

Add this to your theme’s functions.php:

remove_filter (‘the_content’,  ‘wpautop’);

Scalpel

http://www.adammershon.com/stop-wordpress-from-removing-br-and-p-tags/

Add a comment

Tim Thumb Image Resizing

A handy little tool for resizing images automatically. Caches images to limit processor speed. Very nice for when your users might be uploading their own images.

Requires the gdLibrary be installed on your server. Here’s a handy script to check if it is.

Basic implementation looks like this:

<img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="">

Here’s a nice article on implementing it with a WordPress theme.

Add a comment

WordPress as a CMS

Making your own theme

Easy breezy. The minimum you need are index.php and style.css files. As long as you have the right code in your stylesheet, your theme should show up in the picker in the admin area. This doc has all the basics: http://codex.wordpress.org/Theme_Development.

Don’t forget to add <?php wp_head(); ?> right before the </head> tag in your header.php file and <?php wp_footer(); ?> right before the </body> tag in your footer.php. Without these some plugins won’t work.

Handy Functions

<?php get_header(); ?> and <?php get_footer(); ?> – I always forget those. They automatically get the header.php and footer.php files in your theme.

<?php bloginfo('stylesheet_url'); ?> – for your stylesheet call.

<?php bloginfo('template_directory'); ?> – to get to other stuff in your theme folder: images, scripts, etc. Does NOT include trailing slash like most EE template tags, so don’t forget to include that.

<?php bloginfo('url'); ?> – for your site’s url, as set in Admin > Settings > General. Especially handy when developing on a different domain than where your site will live when done. Saves work later.

is_page() – returns true if the current post is a page. Handy for adding a sub-page specific class or id.

wp_list_pages() – the best way to create a page menu. Dumps out a nested, unordered list (without the top-level ul tags) of your pages. My typical use looks like this:

<?php wp_list_pages('title_li=&depth=2&exclude=44,50'); ?>

This page in the codex has all the deets.

How to get content from a specific post

http://www.tipsandtricks-hq.com/query-or-show-a-specific-post-in-wordpress-php-code-example-44

Permalinks

Under Admin > Settings > Permalinks, add /%postname%/ under Custom Structure, to get pretty URLs that just have the page name. Should show page heirarchy when pages are nested as well.

Adding custom styles to the text editor styles dropdown

This post has all the necessary info. I’ve tweaked it a bit so that it references the main stylesheet, so I don’t have to maintain two stylesheets.

Change the “more” link on post excerpts to whatever you want

Add this to your theme’s functions.php file (create one if you don’t have one):

function new_excerpt_more($post) {
return ' <a href="'. get_permalink($post->ID) . '">' . 'Read&nbsp;More...' . '</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

Remove admin Menu items

http://www.wprecipes.com/how-to-remove-menus-in-wordpress-dashboard

Plugins

(Many plugins referenced from here: http://sltaylor.co.uk/blog/best-wordpress-plugins/)

SEO

FV Simpler SEO – great for adding meta tags for each page/post. It does a ton of other stuff, but I haven’t explored that yet.

Google XML Sitemaps – makes Google-friendly sitemaps automagically. Set it and forget it.

WP Google Analytics – adds your GA code to the right spot on every page. Also has options for turning off GA in admin area and for logged in users by role. Make sure you have your <?php wp_footer(); ?> in place for this to work properly.

UI improvements

My Page Order – drag and drop interface for re-ordering pages. Hopefully WP will have this natively some day.

Quick Page/Post Redirect – handy for when you have a page with children but no content itself. You can use this to redirect from the empty page to the first child or whatever you want. Relative links are ok.

Allow HTML in Category Descriptions – does just what it says, allows HTML code in the category description field. I’ve used this as a ghetto-charged way to add extra stuff to category pages. Custom entry types in 3.0 might handle this concept better.

Security/Performance

Email Obfuscator Shortcode – uses the native antispambot function. Super simple.

Quick Cache – great caching plugin.

WP DB Backup – easy backups. can do automated, scheduled backups.

Extra CMS-like stuff

Pods CMS – changes WordPress into a viable CMS for really reals.

Verve Meta Boxes – a fancy wrapper for custom fields that groups them and makes them easier for the end user to use.

Add a comment

Bumpy Brush Problem

Brush strokes are sometimes bumpy like this:

This can be fixed by dropping the spacing percentage in the brushes palette:

Voila:

Warning: lower spacing percentages are resource suckers. Your lines will be smoother, but your brush strokes will lag behind your actual cursor movement.

Add a comment