Episode: 993
Title: HPR0993: Setting up a Wordpress blog: part 3 - tweaking appearance
Source: https://hub.hackerpublicradio.org/ccdn.php?filename=/eps/hpr0993/hpr0993.mp3
Transcribed: 2025-10-17 17:04:53

---

This is Frank Bell again on setting up a WordPress log.
The first episode was about installing WordPress, the second about navigating the interface,
this one will be about tweaking the appearance, and the fourth one will be about maintenance.
I want to emphasize at the outset that I am by no means a web design guru.
I know HTML3 fairly well.
I know HTML4, okay, from the standpoint of a personal user.
I understand CSS, but I'm not expert at creating a CSS style sheet.
However, I have become very good at editing them.
If you want to learn more about HTML and CSS, the best source is probably W3 Schools.
The website is www.w3schools.org.
If you want to look up the meaning of a tag or the syntax of a particular expression,
that is probably the best place to go.
If you do a web search for HTML tutorials, you will find no end of links.
A few of them might actually be worth visiting.
The most useful tutorial I found was the one at about.com.
The URL is webdesign.about.com.
Things are clearly explained, and there is available there a step-by-step self-study tutorial
delivered by email.
If you're just starting out to learn HTML4 and CSS, I would suggest that as one of the
best free online sites to look, and believe me, I have looked at a lot of them.
The overall appearance of a WordPress blog is managed by the theme.
WordPress comes with two default themes, one called the WordPress default, which has
been the default since version 1.5, and a repackaging of the original WordPress default
theme now referred to as WordPress Classic.
The theme determines the placement and appearance of the standard features found in a blog,
a header where you commonly find the title, perhaps contact information, a motto, possibly
a picture, or other image.
The columns right below the header, typically there is a wide column which contains the
content, the scrolling display of posts with the newest appearing at the top, and one
or more sidebars, typically much narrower than the main column, commonly 250 pixels wide
to 300 pixels wide, which contain links if the blog has advertisers.
That's where the advertisement will appear.
There might be RSS feeds from other sites, any number of items to try to provide a little
more liveliness to the presentation of the blog, and at the bottom there is commonly a footer,
which often contains little more than the link to the creators of the theme.
They may sometimes however contain licensing information, contact information, and other
stuff.
This is the common design of a personal blog.
I'm not going to address corporate websites and corporate styles and themes that might
be used by a company, an organization, a club, or an association.
The first step to deciding what tweaks you want to make to the appearance of your blog
is to decide what you want it to look like.
When I started searching out themes, I knew what I wanted my blog to look like because
I knew what kind of design I found most comfortable for reading purposes.
I wanted the header of course, I did want a header that was capable of displaying a picture.
I wanted the main column on the left and the sidebar to be on the right.
I wanted only one sidebar.
It's not at all uncommon to see two sidebars, sometimes both of them on the same side, sometimes
one on the left and one on the right.
Occasionally you will see as many as three sidebars, something which I personally find much
too busy and difficult to follow.
After deciding the basic sketchy design that you want for a theme, the next best step in
my experience is to look at the themes that are available.
Unless you are a web design guru and choose to write up your own theme, you will probably
find a theme from someone else and adapt it.
Also if you are a web design guru, you probably have no interest in listening to this podcast
beyond this point because if nothing I can say that you don't already know, in fact
know much more thoroughly than I do.
The best site I found for WordPress themes is the WordPress Extend website.
There are approximately 1,500 themes there and they are searchable.
You can search by features and by design.
There are also third party and commercial themes available.
Most of those are oriented towards the business market.
The small businesses are even large businesses that want to use WordPress to present content
to the world and there are even some which are available at a charge.
If using a theme from some other site, well if using anything you find on the internet
you should be careful because it can be a wild and woolly place.
But in the particular case of WordPress themes, from time to time there are reports of WordPress
themes from third party sites loaded with malware.
Generally this malware has not been destructive.
It tends to be more oriented to doing things behind the scene to promote the people who
created the malware that does to do anything nasty to your site but you should exercise
care and verify that anything you are using is legit and is not hiding anything from
you.
In the show notes, I'll include a link to a blog post from Todd Cochran of deep news
central where he pointed to a story of one such situation of WordPress themes loaded
with malware.
Once you decide what theme you want to try or perhaps as I did the last time I changed
the theme of my site, you might want to try several before you settle on the one you
plan to use.
You download the zip archive, decompress the archive and then copy the resulting directory
and all the files it contains to the subdirectory under your WordPress directory called WP hyphen
content forward slash themes.
Then logging in, if you are not already logged in and navigating to the WordPress administrative
interface or dashboard, go to appearances and then themes, if the theme is installed properly,
it should be showing there.
Illustrated with a thumbnail underneath it, you can click the word activate and that makes
that selected theme the active theme.
Then you can jump to the front page of your WordPress site as I described in my previous
podcast on navigation and decide what you like about it and what you want to change or
whether you want to try yet another theme.
I strongly suggest that if you were doing this for the first time or if you are planning
a major overhaul of your WordPress site that you do your theme design locally on your home
computer.
If you have a LAMP server already installed on the computer, some distribution such as
Slackware which is my favorite, install the elements of a LAMP server by default although
they do not set the server to start by default.
If you are using a distribution such as Ubuntu or Debian or Fedora, you may need to download
the LAMP server from the repositories.
If you don't want to have a regular LAMP server or if you are using Windows, I recommend
highly for this purpose the ZAMP package which I mentioned in my first podcast in this
series where you can create a self-contained LAMP server simply by installing the ZAMP package.
I'll provide a link to the ZAMP website in the show notes.
If you are editing the files locally, you can use any text editor you wish.
If your blog exists on a hosting service and you are editing the remotely, you can use
WordPress's built-in theme editor.
The alternative to using the built-in theme editor is to make the edits locally then FTP
the files into place on your hosting service.
Some hosting services allow you to install themes directly from the WordPress extend
website to your blog.
I prefer not to do that because I want to make sure I've got them right before I take
them public.
But that is always an alternative.
You can find the WordPress internal editor by going to the administrative interface,
the dashboard, going to appearance and then clicking on editor.
In the top right corner of the editing window, there is a theme selection dialog.
Body fault, that points to the active theme.
If you want to edit a different theme, or if you want to see how one of the other themes
accomplishes something, you can select another theme in that selection dialog.
Keep buying the middle of the page in the editing window, body fault is the CSS file, commonly
named style.css for the active theme.
You can select other files by selecting them from the file list in a column down the right
side of the screen underneath the theme selection dialog.
Once the file appears in the big window in the middle, you're ready to edit.
I'm not going to go into what edits to make.
Instead, I'm going to discuss some of the things I've learned about how to edit through my
own personal experience, too often through making mistakes, but mistakes are how we learn
and I'm real good at learning that way.
If you intend to make big changes, you should have a local copy of the file you were changing,
so you can refer it back to the original if you manage somehow to break the file.
If you don't have a local copy, you can position the mouse inside the editing window, hit
control array for select all, and then control C, or right click and select copy.
Copy the contents of the editing window and paste that copy into any local text editor
and save a local copy of that file so you're protected in case you make a big mistake.
I also suggest that you don't delete text.
Even if you have a backup copy, if you're making little changes, I find it very helpful
to copy the snippet of text that I'm planning to change, paste that somewhere else in a
text editor window.
Take my little change and then test it out.
The reason for this is that that way I know exactly what I want to put back at that location
in the window.
I don't have to go hunting through some big huge file to find what it used to look like
in order to restore the original text.
This leads me to the other point.
I find it best in doing this sort of thing to make one change and test it.
Generally I'll make one change and test that change that has two advantages.
One is it gives me a chance to see exactly what the effect of that individual change was.
The second one is if I don't like the result of that change, it's much easier to undo.
If I make several changes and then test what it looks like and decide I don't like it,
I may have to do some digging to find out which one of my several changes is the culprit.
Doing troubleshooting, I found that 98% of the effort is finding the trouble.
Shooting it is the easy part.
Anything I can do to make finding the trouble easier is something I will happily do, even
though it may seem slow and tedious.
The benefits of not having to go on are long safari to find the source of the trouble
outweigh the disadvantages of taking some extra time at the front end.
Common PHP files found for a theme include header, index, page, sidebar, single, theme functions,
and archives.
Those are all PHP files.
When you go to a blog the first time and you see the header, the footer, the scrolling
list, the post, and the sidebar that's controlled by the index PHP which calls the header PHP,
the footer, the sidebar, and the post.
If someone clicks on a single post to view it all by its ransom, that will be controlled
by the single post PHP file and so on and so forth.
Some themes have more PHP files than others depending on the capabilities of that theme.
So don't be surprised if you see them having different numbers of files in the theme directory.
Most of the editing I've done for my appearance, I've done in the CSS, where I get towards
the end, I'll talk about some edits I have made in headers and sidebar files and various
themes I've used.
WordPress CSS files tend to be pretty big.
The one for the theme I'm currently using which is called GG Simple White.
I'll have a link to that theme in the show notes is 500 Lines Law.
The CSS files tend to be divided by CSS comments in the sections.
There'll be a global section and there'll be a section for the overall wrapper, a section
for posts, a section for the headers, a section for comments, and so on.
The nomenclature for these sections may be different from one theme file to another.
They will correspond to the divs or divisions that are established in the various PHP files.
Consequently, if you want to edit the font size for a URL or the color that a URL appears
in, you may have to hunt.
They may not necessarily be in the same place or have the same title from one theme file
to another.
Things that you can edit in the CSS include items such as the width of columns, the weight
and style of fonts and font size, whether, for example, the size of a post is going to
be in 14 or 16 points, whether or not the title is going to be in red, blue, or green,
or black.
The margins and padding surrounding an image, if you embed an image in the post, and I mentioned
earlier what color the links are, the size of headers is your h2 for header 2, going to
be 16 points or 18 points, and those were commonly the sorts of things that I've edited
most frequently in my CSS file to get what I consider an attractive balance of appearance.
One thing to keep in mind as you make these changes is that different browsers on different
systems may render the pages differently.
I commonly use the Opera Browser, and my go to computer is a laptop running Slackware
current.
My web page will have slight differences on that computer from my Davien computer.
It may look different between Firefox and Opera.
I also happen to have a Windows computer and it may look different in Internet Explorer.
I would suggest strongly that if you're making changes to your appearance, you test them
in Firefox, Internet Explorer, because the great majority of your visitors are likely
to arrive using Windows.
They may or may not be regular Windows users, but someone who is a Linux user at home may
have to be a Windows user at work and may be using IE.
This also has the benefit of letting you know if a particular issue that you're having
may be browser related.
I like to use Opera as my primary browser because Opera tends to be a little stricter
and its own compliance to standards than most of the other browsers.
So if I've got a standards related problem, I'm more likely to see it first and Opera.
The other thing I want to be sure to mention is that if editing CSS, it's a good idea
not just to change something.
Rather, say, for example, you want to change the color of a link from blue to green.
Rather than just changing the color from blue to green in the CSS, remark out the line
that establishes blue as the color, the way you remark out a line in CSS is to put a slash
asterisk at the beginning of the line or section and then follow that by an asterisk slash
at the end of the line or the section that you want to render invisible.
You want to be certain to have not just the slash and the asterisk at the beginning,
but to have the asterisk and the slash at the end.
Otherwise, you basically remark out the remainder of the file.
If I'm making a change of that nature, I'll remark out the line I want to change
and I'll type the new line underneath it.
This makes it very easy to undo any damage I have done.
If I've changed, for example, the wrong entry or I find I don't like the way it looks
after I make the change.
I thought it would look good, but in actuality, it doesn't.
This makes undoing the change very easy.
With contemporary WordPress releases, you'll probably find very little reason ever to edit
your sidebar directly.
Prior to version two, sidebar edits were common.
If you wanted to implement a plugin in the sidebar or you wanted to place your links in
the sidebar or call RSSP's in the sidebar, you had to enter the appropriate PHP in the
place that you wanted on the sidebar, then save the sidebar file, test it out and see
if it was where you wanted it and whether it did what you wanted to.
With the introduction of widgets, you can manipulate the contents of the sidebar by creating
a widget, include whether it includes links and RSSP's or anything of that nature and publishing
the widget on the sidebar.
The one thing I find that does not seem to work inside a widget is PHP.
If you need to put PHP on the sidebar, say you want to use a plugin that's not available
in a widget, you need to edit that manually into the sidebar and you need to make sure
it's outside of the widget area.
When you look at the sidebar.php file, it very clearly states where the widget area begins
and where it ends.
The possibility that these days should be editing the sidebar are very small but it might
be necessary and if it is, the thing to remember is any edits you make should be outside
of the widget area.
If they're inside the widget area, they're not going to work properly and they could very
easily break your widgets.
I've also, from time to time, edited, putter.php files.
To give you an example, the first theme I used was one called Connections.
It is no longer supported but in the show notes, I will point to a newer spin on it called
Connections Reloaded so you can get a sense of what it looked like.
I wanted to have links to the other parts of my website, links to the mail to form that
I was using at the time and links to on about the webmaster page that I had at the time
in the header above the picture and I wanted to change the picture and I did that by going
into the actual PHP, finding out where to place the edits I wanted to make and saving
the edits.
So, in this particular theme, back in the WordPress 1.5 days, the picture that appeared
at the top of the blog was actually hard-linked in their header.php file.
In the theme I'm using now, gg-simple-write, you have the ability to upload a picture and
select it from the upload list and the theme will place the picture in the banner for the
website.
I do, however, want to change that picture.
I haven't gotten a good picture to put in there now but I don't particularly like the
one I have.
I want to change the picture not just to be a different picture but to be a narrower picture.
Right now it's I think 620 pixels by 288 pixels and I'd like to change it to be something
like 620 by say 125 are no more than 150.
So I was looking around to find out where I would make that change.
Looking in the header PHP, I found two functions.
One said get image width and the other one said get image height.
Here I says to myself where did they hide the image width and the image height and I found
that in the theme functions PHP where it sets the image width and the image height.
So when I get around to trying out a new picture, the first thing I'm going to do is go
into theme functions PHP, change the height and see whether it affects the live display
on the front page of the website and then proceed from there.
But that also illustrates how these files interplay with each other.
The settings in the theme function PHP affects the behavior of the header PHP file which
in turn control the behavior of the website to the visitor.
So that's a short primer on how to tweak the appearance.
To sum it up, I would say find the theme you want, put it in place and then dig into
it, make all the changes you want.
Just make sure you keep the undo information because if you break something, you can always
revert back to the previous version and start over.
So have fun.
The next and last of this series will be an episode on basic maintenance to keep your
blog happy and healthy and keep your SQL database well groomed.
Thank you very much.
If you want to email me, you can email me at frank at pineviewfarm.net, pineviewfarm is
all one word, no spaces, no punctuation.
And my website is www.pineviewfarm.net.
Thank you very much.
You have been listening to Hacker Public Radio at Hacker Public Radio.
We are a community podcast network that releases shows every weekday Monday through Friday.
Today's show, like all our shows, was contributed by a HBR listener by yourself.
If you ever consider recording a podcast, then visit our website to find out how easy
it really is.
Hacker Public Radio was founded by the Digital Dark Pound and the Infonomicom Computer
Club.
HBR is funded by the Binary Revolution at binref.com, all binref projects are crowd-sponsored
by linear pages.
From shared hosting to custom private clouds, go to lunarpages.com for all your hosting
needs.
Unless otherwise stasis, today's show is released under a creative comments, attribution,
share and like.