How to edit a WordPress theme
Sooner or later, how much you love the WordPress theme you've chosen, you're going to want to change something about it. Maybe you'll want your post titles to be a little larger, or to change fonts or link colours, or to make your sidebar wider. If you already know HTML, CSS and PHP, then head on over to the Theme Editor and start playing. But for everyone else, this post will be a brief introduction to editing themes. By virtue of being a blog post and not a twenty volume encyclopædia, it can't be exhaustive, so if there's something specific you can't figure out how to change, leave me a comment and I'll try to help.
Firstly, let's take a look at exactly what a theme is and how it works. A WordPress theme is actually a collection of files to control the appearance of the blog. WordPress separates these from "core" files which control how the blog works so that you can change one, without having to change the other.
Go to WP Admin > Appearance > Editor, and you'll see the list of files which make up the theme you're using. WordPress uses different files or combinations of files to present the information according to what sort of a blog page is being looked at. WordPress has some naming conventions that regulate which files do what. Most themes will have the following:
| style.css | The main stylesheet for your theme. Edit this to change font sizes and colours, and some layout changes. Also contains (as comments) information about the theme: name, author, tags etc. which you see on the WP Admin Themes page. |
| index.php | *the* main page: often used for blog's home page; also the default if archive files are not included in the theme. |
| header.php | Contains the <head> section of your blog, and frequently the unchanging top bit of the visible page - e.g. logo or header graphic. |
| footer.php | The bottom bit for inclusion on every page: e.g. copyright statement, courtesy links back to WordPress and your theme designer, closing </body> and </html> tags. |
| sidebar.php | for the sidebar (duh) - probably calls the widgets you've selected, and tells your blog what to display if you're not using any widgets. |
| single.php | for individual posts |
| comments.php | controls the display of comments and pingbacks already left, and the form to comment; also what to do if comments are closed. Usually called from single.php. |
| page.php | template for WordPress pages. |
| archives.php | The template for date-based, category and author archives (unless these have separate templates individually - most themes don't do this). |
| search.php | The template for search results. If archives.php and search.php aren't included in the theme, then index.php will be used. |
| searchform.php | the form to search your blog: often included in the sidebar and 404 templates. |
| 404.php | The 404 "not found" page. |
| functions.php | contains PHP functions for use with your theme. |
Individual themes do vary: they can be as simple as a stylesheet plus index.php, or as complicated as theme designers want to make them (and that can be *very* complicated!).
Editing your theme
The great thing about WordPress is that it comes with a built-in theme editor: there's no need to upload files via FTP if you want to change something. However (and I cannot stress this enough) back up a working copy of your theme before you start to edit. WP has no go-back and no undo: once you've deleted something, it's gone. So make sure that if you accidently remove half a file and your blog is full of PHP error messages, you have a way to easily fix it. At the very least, save a copy of the file you're editing in Notepad before you start.
Take some time to look at the file before you start editing. You'll see two types of code: HTML (which you should probably know before you start editing themes) and PHP: the latter lives in brackets like this <?php .... ?> PHP is the scripting language that gets your blog content out of the database and onto the screen; if you already know it, you'll recognise that WordPress has some built-in functions of its own. The most important is "the loop": this is the section of code that says "go and get the posts I've asked for", and it looks something like this:<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
...
<?php endwhile; else: ??>
<p><?php _e('Sorry, no posts matched your criteria.'); ??></p?>
<?php endif; ??>
Basically this means:
- if there's some content to get, go get the content
- [then do stuff with the content]
- or if there's no content to get, tell me that no posts matched my criteria
Don't touch these lines. If you delete them, your blog will not work!
Within the loop, template tags allow you to specify which bits of post information you want to display. For example, if you wanted to put the author's name underneath the post title on the single post page, you'd go to edit single.php, look for a line like:
<h2><?php the_title(); ?></h2>
and add perhaps:
<h3>by <?php the_author(); ?></h3>
We'll be looking at both PHP and template tags in more detail in future posts.
In summary: back up your theme and then jump in and play. If it all goes horribly wrong, you can put the saved version back. But the best way to learn HTML, PHP and WordPress is by doing it.
Need a hand?
This post by its very nature is very generalised. If there's something you're stuck on, leave me a comment and I'll do my best to help. I may also be able to fix it for you.
I strongly recommend that you turn the No Follow off in your comment section. I'll watch Google Webmaster Tools, and if the links don't show up after a couple of weeks --- I won't go back to that blog again. Another suggestion: you should have a Top Commentator widget installed. Do Follow and Top Commentator will ensure that you have a successful blog with lots of readers!
Well, that's an interesting point of view. I'd say this:
1) I comment primarily because I'm interested in the post. Not for the link. In fact, a lot of the time, I don't care about the link (I comment on a lot of political and religious/atheist blogs, and at least some of the time, I don't care about having people who disagree with me turn up on my professional sites).
2) I comment a lot. I mean, A LOT. And I certainly don't have time to watch Google Webmaster Tools for blogs I've commented on: in fact, a lot of the time, I can't even keep track of the blogs I've commented on. The only time I would in fact keep track, is if my blog commenting policy were part of some blog comment marketing plan... or spam, as it's sometimes called.
3) Clare Balding is my top commentator.
4) I loathe "top commenter" type plugins. Because - guess what - they encourage spammy behaviour. If they're based on flat number of comments, they encourage comments like "yeah, me too" which add nothing to the conversation. If they're more subtle and Digg-like and have voting up and down, they encourage people to build a bunch of fake IDs to vote up comments they like.
5) "language learning software", eh. My top-tip for comment-leavers is always be a person. Unless your parents were very, very drunk at your Christening, I doubt that language learning software is your real name. So I start to wonder, have you only left a comment on my blog for the back link? Could *that* be why you're so anxious to have do-follow and more linky to you? Surely, I must be too cynical here.... right?
For everyone else, I strongly recommend the WP Ajax Edit Comments plugin, which amongst other useful things, allows you to remove the link from a comment at the click of a button. What a great way to get rid of spammers, eh.
Hey, im trying to figure out how to make my "archive" page show up on my blog. I want there to at least be a link for it on the main page or something. Can you help?
Thanks!!
to clarify, the archive.php file that came with the theme. i see the file but i have no idea how to get it to show up online. I just read your post on making and archive page and that would be cool too but then, again, i dont know how to make the archive-page.php file show up online.
any help is very appreciated, thanks!!
Glad you sorted it, Christy - for anyone else, just to clarify: if archive.php came with your theme, then to "activate" it, create a new page, using the archive page template rather than the default page template. Publish that page, and it'll show up as part of any normal list of pages that you have in your sidebar or wherever else.
Sorry to be annoying on your comments here, but after a few hours of messing around and reading, i figured out the answers to my previous questions.
I want to add text to my header and I'm clueless. Can you help me?
Hi Paul,
Looking at your blog, there are a couple of sections you probably want to edit. Logo name and logo text are both there, they just don't have any content.
You can *probably* just add the text to header.php: look for divs called logo-name and logo-text, and add what you want inside the div tags.
But to be honest, I would have expected most themes just to pick up the name and the description from your blog's own settings. So first, i'd make sure that Settings > General Settings has both a blog name and a tagline filled in - you might just find the text then shows up in your header.
Give me a shout if you need more help.
How do I insert a non-wordpress widget into a wordpress page?
Cut and paste the code you've been given into your theme in the place you want it.
Sorry that's a vague answer, but it was a vague question
If you want it in the sidebar, you probably want to edit sidebar.php.
I am wanting to update my blog, and yes change the theme. I have narrowed it down to 9 themes I like. Now it's setting up the inside of the them. Stuff isn't working quite right. Any help would be greatly appreciated.
It needs to be maximized. Also any resource recommendations, would also be greatly appreciated.
Sandra, YGM.
Rather than looking at a theme and what it has and whether you want it, start from the other end of the argument as it were: what does your blog need? What must you have and can't live without; what would you like; what are your preferences in terms of layout (e.g. I know a couple of people who have pathalogical hatreds of sidebars and so need "fat footer"-type themes).
I'll say in advance though - you need to narrow 9 themes down some more
Then go through the nine themes and list what you like about each one.
You might find that one theme ticks all or almost all the boxes and could be adapted to fit the rest. Or you might find that "your perfect theme" doesn't exist, and so choose to write your own or ask me to write it for you. But first, figure out exactly what you want.
HTH.
I am relatively new to wordpress, but have experience with html/css (although not an expert).
My question is, how do I edit the links (the main navigation links, home, uncategorized) on my wordpress theme? Where would I find these options, as I feel I have looked everywhere and am having no luck. It might just be because I am a bit rusty... any help would be appreciated!
Hi
how do I change th name in my blog from admin to my name? Everytime I comment on my own blog it says admin for my name.
Also, how do I change where the 2 sidebar are. I have a 3 column wordpress theme and would like the content column to be in the middle of the other 2 rather than on the left
Looking forward to your response!
Ahmed eid
Hi Ahmed,
For the name, you should just need to edit your nickname in admin > users.
For the sidebars, edit style.css in appearance (you'll obviously have to know some CSS for that to work).
Thanks!
I mean, I know a little css, but not that much.
It is in the styles.css file...ok. That's one thing down.
But I only see code in there to determine the look of the side, not the actual positioning of the bars.
Any idea what to look for?
Dig a bit deeper: lots of it is "appearance" (colours, fonts etc.) but some of it will mostly likely be positioning. There's likely to be something like "float" somewhere which is probably positioning the sidebars. Alternatively pick through some of the PHP files which make up the rest of the theme: sidebar.php might be a good one to look at.
Unfortunately I can't really diagnose accurately without looking at the back end of your theme, so if you wish to hire me to make the changes you want, please do get in touch.
Good Article, I am still a bit of a wordpress noobie...
I am very happy with my current blog theme, and do not want to go hunting for another theme... but i do want to get my logo in the upper left next to my blog title and tagline... the picture i want to get there is located at:
http://www.frugalfrancis.com/frugalfrancis.jpg
How do I simply edit my header?!? (i think) to add this logo to the upper left?
thanks,
Frugal Francis
Go to Admin > Appearance > Edit.
Click the appropriate file (it's probably header.php but depending on your theme, it may not be)
Edit the HTML to add the image.
Save it.
If you don't know HTML, then tbh you're going to need to learn a little, or find someone else who will make these changes for you.
Also you might want to make that picture a teensy bit smaller before you add it to your blog
Hello Sue,
Thank you for the quick response and the tip on shrinking the logo.
I hope I'm not overstaying my welcome by asking 2 more questions here.
#1, so now that i got the logo up I have a question in terms of how to move the title and tagline to go above the navigation bar. Will that be in the same place (header.php)? If so, do you know what I will be looking for?
#2, sometimes when I update wordpress with a change to a theme or plugin, and then check back in my browser, the change is not reflected for like 10 minutes or unless I refresh like 20 times. Is it normal for the server to take a few minutes to reflect recent changes? Or, should i be clearing my temporary internet files?
Thanks,
Frugal Francis
ps. if you would allow it, i would email you the php files for you to look at in terms of how to move the title and tagline... Previously, I tried to post some of the code in this comment window and it did not show up correctly.
Hi again Francis,
No, you can't just post HTML into the comments - you'd need to edit it so it would show up on a web page.
Re. your questions:
#1 The code for the logo will most likely have to go before the code for the navigation bar, or you'll need to edit the CSS to control the wrapping or whatever. Impossible to say without editing your theme.
#2 Have you got a caching plugin working? If so, you probably want to disable it while you work on the theme. Or trying hitting f5 rather than refresh. Or clean out your temp files as you say.
#3 Much as I'd like to offer to edit people themes for them and offer as much free advice as was needed, I could do that all day every day but my poor cats would go hungry.
Hello!
Can you help me edit my wordpress theme.
I just want to move my search box on the right above the latest post bar and moving the First post up.
I want to remove the bookmarks bar on the right. I've tried disabling them on the widget editor but nothing happens.
I am just a newbie here so I will very much appreciate any help.
Here's a link to our site: http://uppanxenia.net
Regards,
DJ
Did you look if the bookmarks bar was hard-coded into your sidebar? Did you save the changes to the widget properly.
As for the search box, just move the code. If you want to make changes to your theme, you'll need to learn a bit of HTML/PHP/CSS.
Hi Sue, I'm a totally newbie to wordpress and php, but not html and css though. Is it possible to edit the theme using dreamweaver? If so, how do I do that?
No, it isn't possible. You'd have to create the whole theme outside WP in Dreamweaver and then import it into WP.
I recently installed a new theme Belis...but i cannot put the content on my website as it looks in the theme preview...especially the upper slideshow..?
Probably best to contact the person who made the theme then, I guess. Also check if "the upper slideshow" requires another plugin or something.
Hi Sue,
Please, please help me!!! I just fired my web designer and I'm about to pull my hair out. I have two issues with my blog's customized them:
1. I still can't adjust the settings so that it only shows 3 lines of the post and not the entire posts(with the option of "read more"). I went to the "Reading settings"and adjusted it to "Summary" instead of "Full text" but as you can see on the site it remains the same with like 6 lines posted?
2. How can I edit the theme so that all the post are in the same font, I honestly don't see how this was not a default setting. But on the site I see that the posts look different?
I realize these may be detailed questions to answer, but if you could at least point in the right direction I'd really appreciate it.
Cheers!
S.
1. change the template file from the_content() to the_excerpt()
Reading settings is for your RSS feed, not your posts.
2. On a quick look, some of your posts have a div tag for class "main" and some don't. Fix that. Or change your CSS so that the font is specified at a higher level. Otherwise, have you used some font tags/CSS within posts?
Thanks so much Sue. I don't see any tags within the posts, and I'm not sure how to change it at the "higher level" you mentioned. And now I've edited something that I shouldn't have and the posts some has malfunctioned. I'll be contacting you soon to inquire about your services to edit/fix the blog, as I do not know PHP myself.
Thanks again,
S.
I added my own header image to the kubkrick theme by changing the name of the header image to kubrickheader.jpg. My problem is that I can't get rid of the blue blob showing behind my header image. You'll see what I'm talking about. I have examined the header.php file closely, but I can't figure out how to make the blue disappear. Any advice would be greatly appreciated.
http://gridirongazette.com/
Remove the line
background-color:#73A0C5;
from #header in style.css
Thanks for the quick reply, Sue. It didn't work to delete the background color code, but I changed it to #ffffff, and that at least made it white.
Another wordpress and php newbe. When I try to edit my template and click on "update file" all of the changes I made revert back to the origional code. What am I missing here. Do I need to change some setting? Help Please.
Thanks
Hi somebody help me to change my theme in wordpress.
pls give me the steps how to edit my wordpress theme? tnx