WordPress – Page 19 – computeraxe

Permalinks Totally Screwed Up When Changing From Default Structure

Permalinks are the URLs that refer to your WordPress pages, posts and categories. Essentially, the links to your blog pages and posts are permanent links or permalinks.

Each post or page created in WordPress is identified with an ID number. Default URLs use the ID number to differentiate between individual pages and posts. An example URL would be something like https://www.computeraxe.com/?p=123 for the post or page that has ID number 123.

The problem with this default permalink structure is that nobody can remember which posts the numbers represent. To make your blog URLs more meaningful you can change the permalink structure from the default structure to a more useful one.

This is a great tip for anyone interested search engine optimization for their blog.

In your admin area go to Options/Permalinks. At the top of the page you’ll see the default ID permalink style selected. Choose another style that you like and then click on Update Permalink Structure to make the changes stick. Now, if your blog is fresh out of the box and you haven’t already made posts with it, then you’re set to go.

I changed my permalinks to a custom structure like so, /%post-name%/ , and when I went back to view my site, all the posts and pages were gone!

What happened here? The server could not find my existing pages and posts because it was looking for them with the old numerical names. Instead of recreating the content, changing page names, or reverting back to the old permalink structure, there is an easier way to fix this issue.

One way to solve this problem of disappearing posts or missing pages is to make the following entry in your htaccess file in the public_html folder of your domain.

Options +Followsymlinks

# BEGIN WordPress RewriteEngine On RewriteBase / RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] # END WordPress

Be aware that htaccess files can exist in any directory on your site.

You want to allow the server to write to your htaccess file as updates are made to your blog. Set permissions or chmod the htaccess file to 666.

Gradient Backgrounds for Body and Header Give a Smooth Appearance to WP

The structure of many WordPress themes includes a width definition for the actual blog contents so that there is an empty space on either side of said contents in most modern computer screens. Not many people use 800×600 resolution these days, so some designers argue that the default or standard size of window that we should design for can be larger than 800 x 600 pixels.

Even though the size of standalone monitors and laptop screens are much larger than they were 3-4 years ago, I would bet that many people do not run their browsers at full screen on such large monitors. With Windows Vista, for example, the new sidebar feature takes up a width of 150px which may take away from the browser real estate.

Also, with the ability of modern computers to run several programs at one time, people operate them in this fashion. It’s convenient to be able to see more than one program at a time and if browsers are constantly run at full screen that’s not allowed. Besides, it’s very difficult to read all the way across such large computer screens.

So, we are left with the current state of affairs where most blogs and Web pages have these spaces running down the sides of the real content. Should those spaces be left blank to have a white background?

Let’s make it a bit more interesting and put some color in there. Instead of choosing a background color for the body tag, why not use a gradient? Gradients can be designed with any choice of colors and blending between the colors is up to your imagination.

Open up The GIMP and create a new file 300-400px wide and at least 1000px in height. The width doesn’t really matter here as we’ll trim that down to a couple pixels when we’re satisfied with the gradient we’re making. The height can be much longer – it just depends how fast you want to see the gradient run out when you scroll down your pages.

Double-click on the gradient tool button to open the gradient tool options dialog:

The GIMP dialog box.

The gradient tool is selected in The GIMP.

latest gradient highlighted in tool options

The last-used gradient appears in the gradient toolbox window.

Click on the gradient to bring up a list of the available gradients. Click on a gradient that you like to make it the current gradient. Checking the Reverse checkbox will flip the gradient left-to-right. Changing the shape from linear to radial or conical by clicking the Shape drop-down arrow can give some interesting effects, but for our background gradient we’ll leave the shape at linear.

In your new image click-n-drag the cursor from the top to the bottom of the image. When you release the pointer the gradient will appear and fill the whole image.

Considering download times we’ll trim the gradient background image instead of using this giant image as the background. Click on the rectangle selection tool so you can cut out a slice of the huge gradient image.

rectangular selection tool

The rectangle selection tool is used to select or cut out portions of an image.

In your gradient image select a rectangular portion that is 1-2 pixels wide and 1000 (or more) pixels tall, then copy your selection to the clipboard with Ctrl-c.

Open a new file using the menu, File/New. Notice that the new image size matches your selected area of the large gradient image, so click on OK. Type Ctrl-v to paste the skinny gradient into the new image. As you can tell it is difficult to see the colors in such a skinny image. That is why we use 300-400 pixel wide image to start with – it gives you an idea of what the gradient on your Web page will look like.

Save the new skinny gradient image as a jpg file and export it from The GIMP.

export image from the gimp dialog box

An export jpg window may come up as you save the jpg file. Click “Export” to save it.

To place the gradient in your Web page add a couple lines to both the header and body tags in the CSS stylesheet:

background-image: url(skinny-gradient.jpg);

background-repeat: repeat-x;

This tells the browser to repeat the skinny gradient across the page, but not down the page. Save the gradient jpg in the WordPress theme folder and now it becomes part of your new theme.

Images Not Seen When FTP’d to New Directory in WordPress

WordPress is designed to look for images in an uploads folder inside the wordpress install. If called-for images are not there, they don’t show up on your WP pages. Simple as that.

Right below the section in WP where you make your post entries, there is a section called Upload. You can browse to a file on your computer, select it, enter a title and description and by clicking Upload, said file will be transferred to the uploads folder.

Caution: The upload function merely uploads the file, with its given title and description, but it does not put said file into any post until you use the img tag to specify its placement.

What if you’d like to use FTP to upload images directly from an image editor program? I prefer to use a separate file transfer program so that I can bulk transfer several images at one time. Once my images and files are optimized for the Web I’ll use an FTP program to transfer them all at once.

How to assure you’re transferring files to the right directory so they’ll be seen on your Web pages? Check your absolute and relative path names.

Posts that use relative urls may or may not work fine, but the same relative url on a category page or archive page probably won’t work at all. I came across this discrepancy where images in my posts were visible, but the same images (which I knew were definitely there) did not show up on the same posts when viewed via category pages or archived pages. The relative path could not find the images one level up.

Using an absolute file path to the image will definitely work on posts, pages, archive pages and so on. For a local WP install on my Windows Vista, I use absolute filenames like so, http://localhost/wordpress/img/image-filename.jpg, and for WP installed at the root of a Web domain like so, http://domain.com/img/image-filename.jpg .

Using FTP to upload images to an images directory is pretty easy. FTP is a feature of many design programs and several free or shareware standalone FTP programs are available on the Internet. Features are similar across the board. Basically, you drag files or images from the local side of your screen (left) over to the server-side of your screen (right), or highlight the files to upload and click a right-pointing-arrow to move the files from your local machine to your server.

Much faster than using a browser to upload files, FTP is a handy tool that no webmaster can do without. What FTP program do you like to use and why?

Wrapper Div Not A Full Page with Firefox But Looks Right in IE7

Errors inevitably find their way into your files while you’re developing new themes or basically while doing anything with CSS.

Once an error is fixed jot down a note as to how you got the look you were going for and that in itself should help you remember what you did correctly. So, here’s a CSS tip for myself and maybe a few other developers interested in creating WordPress themes.

I was checking out how a border would look around the whole page and this error became obvious. Maybe not an error per se, but the output was not the same between Firefox 2.0 (Fx) and Internet Explorer 7.0 (IE7) so something needed to be fixed.

Problem was that the wrapper div, which should hold everything between the opening and closing body tags, did not extend all the way down the page to envelope the footer in Fx, but it looked as expected in IE7. I could tell there was a difference in output between the two browsers because I used <border: 2px solid #f00;> in the css stylesheet for #wrapper. That should have put a bright red rectangle around the wrapper, and in essence the entire WP page.

firefox-needs-clear

Firefox 2.0 didn’t let the #wrapper div enclose the entire page. Notice the red line at the top of the image and the dark grey background for the post.

firefox-needs-clear-ie7-doesnt

IE 7 filled the page as expected without the use of a clearing div. Notice the red box around everything and the lighter color to the post.

Divs were properly closed as the XHTML code grabbed from View Source validated ok.

The solution I found was to insert a spacer clearing div just after the end of the footer div. Somehow that forced the #wrapper to go all the way to the bottom of the page in Firefox.

New CSS entry:

.spacer { clear: both !important; }

New XHTML entry added at end of footer.php:

<div class="spacer"> </div>

Now, for the time being everything looks identical between Firefox and Internet Explorer 7.