Mrs. Mecomber’s Scrapbook

A big problem for me is using Wordpress templates with the sidebars on the left side. Oftentimes, the left sidebar loads before the main content of my blogs. This is extremely annoying. If, for some reason, my buttons, badges, or blogrolls in my sidebar are taking too long (which usually happens), the main content will never load!

Here’s a little tweak I have learned to force the main content of the blog to load before the sidebar. Please be aware that NOT all themes are alike, so your experience may vary. ALWAYS BACK UP YOUR BLOG before changing the coding. You should always back up your blog, anyway! But if you are going to attempt to do my fix, please back it up. Rest assured, this fix is simple and quick and painless. But you should always back up your existing information, just in case.

Notice in your Wordpress php files that you have varying files, like footer.php, index.php, single.php, and etc. My own theme had the basic php files without any extras. Some more complex themes may have additional php files to do the jobs that your theme requires. You may have to play everything by ear, here. The nice thing is that my fix does not delete anything or alter anything major: all it does is tell the computer what part of the theme to load first.

OK, enough of all the preliminaries. In my theme, these are the php files that we’re going to alter. We’ll go over them individually.

index.php
page.php
single.php

The index.php is the information for the “face” (or homepage) of your blog. It tells the blog how to operate and when. Open the file now. You’ll see a lot of coding. What concerns us is the “get header,” “get sidebar,” and “get footer” stuff at the very top and the very bottom. So at the top, you’ll see this:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id=”content”>

then you’ll see a lot of coding after that, and then at the bottom of the file, you’ll see this:

<?php endif; ?>
</div>
<?php get_footer();?>

These two sections are telling the computer to load the main homepage of your blog in this order:

1. Header
2. Sidebar
3. Content
4. Footer

We want to change that. We want to switch the “Sidebar” and “Content.” And that is what you do. Copy this section in that file, that says:

<?php get_sidebar(); ?>

and then delete it. Now, scroll down to the bottom of the file. See where the file says:

</div>
<?php get_footer();?>

Place your copied “get sidebar” code right before the “get footer” code. You may have to make a new line (by pressing ENTER on your keyboard) if there is no space. I did have to.

So now, the very top of this index.php file says:

<?php get_header(); ?>

<div id=”content”>

And the very bottom of it now says:

</div>
<?php get_sidebar(); ?>
<?php get_footer();?>

Save the document and upload it to your FTP or, if you are working within Wordpress in your browser, press SAVE.

You have to go back and do this same thing for each of the other php files I listed: the single.php, page.php. Some themes have archives.php, and different templates for different Pages on their blogs. If so, just go through those and do the same thing. This will make the loading of your blog consistent, whether people visit your homepage, a single post, an archived post, or a page post.

When you are done and everything is saved, your blog should now load in this order:

1. Header
2. Content
3. Sidebar
4. Footer

Remember, if you find that you don’t like the fix, or something goes screwy, you can always revert back to what you have as your back up. You DID back up your blog, right?

Blogger, the most popular free blogging platform, has really been making leaps and bounds lately. I’m glad to see the newer developments with the software (better functionality, more user-friendly, etc). (I’m still waiting for some better templates… I guess I shouldn’t hold my breath about that, it’s been– what? 10 years with the same templates? Blogger dudes: lay off the excessive promotional products and get some new templates, eh?)

The main beef with Blogger, still, is their laborious and outdated comment form system. I just hate the popup comment boxes, and what’s worse is the “page” comment form that takes you away from the blog post. Oftentimes, I completely forget what I am going to say in my comment because the comments are so distanced from the post. WordPress has a much better comment system.

With that said, there’s a little tweak I’ve recently learned about, to give your Blogger blog an “inline comment form.” That is, at the bottom of your post is a little box where you can type in your comment text. Add name email, and URL, and you’re done! It’s a fine tutorial done by Blogger Buster, and you can see it here. I highly recommend it. Inline comment forms are far, far superior to Bloggers dumb old popup windows. Try it out and see if you suddenly have more comments to your posts!

Here’s a terrific tutorial I found for using drop caps for your blog posts. I have been wanting to do this on one of my blogs for quite a while! It’s for Blogger blogs, but saavy bloggers could figure out how to do this with Wordpress. I am going to tinker with it! Drop Caps look so classy.

I’ve been using Notepad Pro+ for a few weeks now. I have been hesitant to give it my thumbs up here, because I was unsure about the program, whether it would self-destruct after a day like some other open source Notepad replacements do. But I think I really, really like Notepad Pro+! It’s a free download here.

Notepad Pro+ is far superior to that boring old Windows notepad. Notepad Pro+ has the typical word wrap and font style options, but it also has a tabbed interface! It also has a word count! And it counts “lines” for html coding! I think I love it!

If you are dissatisfied with Windows Notepad, and are looking for something better but not too overblown or buggy, maybe you want to check out Notepad Pro+. It’s working well for me. It gets 5 stars from Cnet, too.

I have a Wordpress-based travel blog, New York Traveler.net, and I utilize Google Maps as an interactive method of mapping my travels and for easy reference. Google Maps are great because you can do so much with them, and you can customize the size you want to put the map on your blog. So I put my New York Travel map on a separate page on the blog. Yet I was only able to put a small portion of my map on the page, because all my blog’s pages have the basic blog’s template header, footer, and sidebars. I wanted to keep the header and footer, but I didn’t want the sidebars and I wanted the map to expand the entire width of the page.

I only wanted to have this style for just that one map page– all my other pages I still wanted the sidebars. There was nothing in the Wordpress options that enabled me to change the page’s style for only this one page.

I am pleased to say that I figured it out! It wasn’t terribly difficult (trial and error). It helped immensely to do a little research. I’m hoping that this technique can help you somewhat. Obviously, unless you have the same Wordpress theme that I have, your results may differ. But the basics are very similar. If you are comfortable with doing a little coding, this will come easy.

I’m going to direct you first to this Wordpress tutorial about Pages, from their documentation site. Read it and understand it.

Second, read this tutorial I did on how to add text to a category page. You might not be doing this exact thing, but the concept is pretty much the same. Because what you are going to do with Pages here is you are going to create a new .php file with code in it, and upload it to your server. It’s the same general idea, and I think my tutorial will give you that added edge of know-how that may help you avoid a slip-up later. It’s brief and concise, so check that out.

I am assuming that you have some knowledge of working with coding and that you are familiar with making pages in Wordpress. Let’s get down to business.

When you write a page, you have the option of choosing a different template to display it. Look for yourself. Go to your Wordpress dashboard and choose “Write” and then “Write Page.” Look in the sidebar on the right. Do you see a choice that says “Page Template”? There’s a dropdown menu there. I had some things in there, but they didn’t do anything. Once we create and upload our special page template, it will appear in this dropdown menu; so remember this.

I’m going to give you instructions on building a new page template leaving the header and footer intact, just as I did with mine. Because there are so many, many ways to design a page, I’ll leave all those design decisions up to you! I wanted to retain my blog header and footer, and just remove the sidebars and widen the post box. There are certainly ways to remove or add whatever you want. But that’s a whole ‘nother ball game! For this tutorial, I’ll just show you how I made my own page template the way I wanted it, and you can take the information from there and explore your other options. The Wordpress forum is a great place to start for more information.

OK, so… open up Notepad (or your favorite code editor– I like Notepad Pro+). Copy the following code:

<?php
/*
Template Name: Travel Map
*/
?>

…and paste it into the Notepad document.

You are going to change the Template Name to something you yourself choose, but before you do, go to your Wordpress Dashboard, to your Theme Editor page (”Presentation” and “Theme Editor”). Here’s hoping your Wordpress theme has something called a “Page Template.” It might be titled something different, but it should have the “official” name “page.php.” This is pretty universal for Wordpress. Click to view the page.php file. This is what mine looks like.

Copy all that information and paste it into your new Notepad document underneath the code I had you put in it already. Save the document and name it something you’ll remember– just be sure to name it as a .php file. For example, I named my page Travel Map.php. This is the special template I am using for my Travel Map. Whatever you name it, make sure it is unique. DO NOT name it with a name that may be another Wordpress file! Even if you have to name it something weird like Snarfer.php or Special page template.php, that’s fine. It will easier to locate later, too. Be careful and be sure you don’t name it after another Wordpress file! It could mess up your files.

Now, go back to your Notepad document and get rid of the “Travel Map”– unless you really want to name your new Page template that, lol. Give it that name that you have chosen

This here:

<?php
/*
Template Name: Travel Map
*/
?>

should now be something like this:

<?php
/*
Template Name: WHATEVER-YOU-ARE-NAMING-YOUR-PAGE-TEMPLATE
*/
?>

So you should have your Notepad document saved as a unique .php file, with the information you copied and pasted from the regular page.php file. If you were to upload this file and use it, there would be no difference between this and all your other pages. Let’s change things a little. First, here’s an example of the file I had:

With my own Travel Map page template, I wanted to keep the header and the footer, and just remove those sidebars. This would enable me to fit in a huge Google map. All I did was change the code. Look at the image below.

You can see that all I changed was

<div id=”primary-content”>

to

<div id=”content” class=”widecolumn”>

You are almost done! Save this Notepad document and upload it into your Wordpress files. This file needs to go into your Theme folder, whichever theme you use. For example, I used my FTP program and put this file in public_html/wp-content/themes/unamed-one021-b. The folder “Unnamed-One 021-b” is the name of my theme; funny, huh? I love the theme despite it’s weird name.

OK, once your file is uploaded, you can go back to your Wordpress Dashboard area. Go to your “Presentation” and “Theme Editor” page and make sure your new .php file is listed there. If it is, all systems are go and you can start using your new special page template! Go to “Write” and “Write Page” and check the dropdown menu on the right. You should see it there. Choose that, and your new page will have that new design!

This coding that we did removed the sidebars and widened the post area. You can see the live demo at work– go to my blog’s home page here and you’ll see the sidebars. Go to the special Travel Map here and you’ll see no sidebars.

For additional coding and design help, refer to the Wordpress document about pages that I mentioned earlier. I found it helpful and no doubt you will also.

I have a few blogrolls, and some are extraneously long. One way to harness long blogrolls is to insert the code into a “scrolling box.” The scrolling box is merely some html code that tells the computer how to show the text.

The code for this is actually looks like this:

<center><div style=”border: 1px dotted blue; overflow: auto; height: 100px; width: 270px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

You can change anything you want to customize the scroll box. Here, I tinkered with a little of the code:

Which is the code here:

<center><div style=”border: 5px solid black; overflow: auto; height: 150px; width: 350px; color: blue; background-color: gray;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

Let me break down the html code in a language you can understand. It’s very easy, and I’m sure you’ll get the hang of it very quickly. Let’s take the tags one by one.

The first tag you see is <center>. This is the opening tag that determines text align. Think of an opening tag as the beginning of a story. You need to have an ending, too. If you look at the last tag, you’ll see </center>. There it is. This is telling the computer to show everything placed between those two tags to be centered within the space it’s placed. If you don’t want your scroll box to be centered, just remove those opening and closing tags. The scroll box will move to your default text align position.

The next tag you see is <div style=”. This is another opening tag. Look for the closing tag that matches it. </div>. The brain of the scroll box goes between these two tags. If you are missing the opening or closing “div” tags, as we call them, then your scroll box will not work. It’s kind of like the “skin” that holds the “guts” inside. Well, that’s how I think of it, lol.

Also, see those quotation marks– the ones that start after div style=” and end with white;” ? You must keep all your information within the realm of those quotation marks, as you do with the div tags. This is the way your computer reads the code. If your scroll box isn’t working properly, always check your code to make sure the quotation marks, semi-colons, and div tags are complete. More often than not, when code doesn’t work, the cause is usually a missing tag feature.

OK, now let’s tackle the fun stuff inside.

In my scroll boxes, I have borders of varying width and color. You can easily change these, or eliminate the border.

border: 1px dotted blue;

can be changed to border: 3px solid black; or to border: 1px dashed yellow;

You can be creative, but remember to keep it basic. Your choices for the border width are measured by pixels (px). Your color choices are simple (no magenta or chartreuse here), and your choices of style are solid, dashed, or dotted. Or, you can enter “none” and have nothing there. For example, change this:

<center><div style=”border: 1px dotted blue; overflow: auto; height: 100px; width: 100px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

to this:

<center><div style=”border: none; overflow: auto; height: 100px; width: 100px; color: red; background-color: white;”>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE</div></center>

to get this:

Next in the html code you’ll see height: 100px; width: 100px;. These determine, obviously, the box’s height and width. You can change this to be anything you’d like, within the bounds of the code you’re putting your box in (for example, of your sidebar is only 200px wide, your scroll box won’t work properly if you make it 300px wide).

Next you see: color: red; background-color: white;. The first color determines your text color. The “background-color” determines the interior box color. Again, basic colors work best here.

Finally, your TEXT! Where do you put your text? Easy to see, right?

>ALL YOUR WONDERFUL BLOGROLL INFORMATION WILL GO RIGHT HERE

You can make a list of links using code (manually), or some blogroll networks give you a javascript text to insert. Just put your text or javascript code between the > and the </div>. It should all work!

P.S. Unless your text is really large or long, a scroll for the scroll box may or may not appear. Depends partially on your blog coding and partially on other’s browsers. All the text that you insert should appear, though.