Initial commit: HPR Knowledge Base MCP Server
- MCP server with stdio transport for local use - Search episodes, transcripts, hosts, and series - 4,511 episodes with metadata and transcripts - Data loader with in-memory JSON storage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
308
hpr_transcripts/hpr0993.txt
Normal file
308
hpr_transcripts/hpr0993.txt
Normal file
@@ -0,0 +1,308 @@
|
||||
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.
|
||||
Reference in New Issue
Block a user