Part 5 E: Getting Our Hands Dirty
Wordpress has plenty of settings for changing different things. However, there’s a limit to what you can tweak with checkboxes and dropdowns. The real power of Wordpress lies in the fact that it’s all built in PHP, which you can completely rewrite if you wanted to. Oh, stop sweating - we aren’t going to rewrite anything, but we will be doing some serious haxxxx.
Part 5 E A: The ABC’s of PHP’s
I just want to go over some basic stuff about how PHP works, just so you have a bit of an understanding of what we’re going to do. If you went through that PHP primer tutorial I linked a few parts back, good for you. This will be review for you. Otherwise, this will be wild and crazy. WOOAAAHHHH!
Part 5 E A A: Where the Compiled things are
So PHP files are just text files, except they end with a .php instead of a .txt. For all intents and purposes, a PHP file is the same thing as an HTML file, so they can (and usually do) have a lot of HTML tags and whatnot in them as well as PHP code.
PHP code goes inside of its own special tags, which are: <?php and ?>. If you’re looking for some PHP code, look for those thingies, because anything in between them (spanning multiple lines, even) will be PHP. Also, if you want to add any code or whatever, you better make sure it’s inside those guys, or you will not get what you’re wanting to get.
Part 5 E A B: No Comment
When you make computer code, you’re just working with text files. Then a computer takes that text and turns it into beeps and boops that it can do stuff with. You can include parts in your code that the computer will ignore, in case you want to leave little messages to future programmers (or yourself). Those are called “comments.” You can use them to make sections of code no longer work, which can be pretty handy.
Comments in PHP take one of two forms. A double slash (“//”) in front of a line means that anything on that line after the slashes will be ignored. A slash and an asterisk (“/* . . . */”) can surround comments as well, and everything in between the asterisks - even multiple lines - will be ignored.
One of the main things we will be doing will be commenting out sections of the PHP code in our Theme files, so that certain things will be removed. It’s a way of removing code without actually removing code, so you can easily undo your changes just be removing the comment thingies.
Note that comments will not “get rid” of the special PHP tags (<?php or ?>), so don’t worry about having to “unhide” them.
Part 5 E A C: Good Luck, and Don’t Fuck it Up
PHP is pretty complicated, especially within Wordpress. Unless you know about classes and objects and PHP, don’t mess around too much, because you will break something. If you want to change something in a theme file, make a copy of the line you’re changing, and comment out the original. That way you can revert your change easily enough if it causes problems. If all else fails, you can just delete your theme folder (inside wp-content in your web site directory), and start over again. All of the settings you made within Wordpress will still be there (your pages and whatnot), just your theme will be reset.
Part 5 E B: Pressing Dr. Pageword
Let’s dive in, shall we?
By default most themes treat pages the same as blog posts. This may be okay for some people, but I don’t like it. We’re going to change it. I’ll remove the comments as well as the entire left column from every page. Sure, some themes will let you change page layouts on individual pages, but most don’t. This is how you deal with those.
Head to your Dashboard, and find the “Editor” page of the “Appearance” section. This is where you can dig into your theme’s underpants, as it were. You’ll see a big text box where some code is, and a list of all the files in the theme along the right side. You can also edit themes that aren’t the active theme, if you want, by using the little dropdown there at the top.
I want to edit the Page Template, so I found “Page Template” (page.php) from the list and selected it. This brings up the theme’s page.php file (almost every theme will have the page.php template) into the text box. This is the code that specifies how pages are made in your theme.
Most of the components of Wordpress are called with functions. For example, the “get_header()” function (usually) at the top of every file brings in the Theme’s header, including the menu and whatever else. I want to find the function called “comments_template()” somewhere in this file, because that’s the function that brings in the comments. It has a couple parameters, which you can find out more about by selecting it in that little “Documentation” dropdown and hitting “lookup.”
All I have to do is comment out that function, and it will be ignored when somebody tries to view a page. Adding two little slashes (“/”) before the function is all it takes.
So I hit “update file” and refreshed the tab with the site in it. Check it out, no more comments! Depending on how much PHP (and CSS) you know, making any edits to Wordpress is that easy. That’s why Wordpress is so great.
Back in the Dashboard, I want to now find the function called “get_sidebar()” which is the function that creates the sidebar on the page. This will be a bit more complicated, because since the function is surrounded by that HTML Div tag, I can’t just comment out the function.
This is why. The content within the sidebar is gone, but the sidebar itself (that HTML Div tag) and all of the associated styling are still there. My page content is still pushed over, but now it’s even stupider looking because there’s just a big empty space.
So to get rid of the HTML tag, I have to use an HTML comment. They work just like the other type of PHP comment (/*...*/), but they use “<!--” and “-->” instead. If I throw a “<!--” before the tag and a “-->” after it, it will be like that tag never existed. I’ll also leave that PHP function commented out, because those PHP tags will not be ignored even though they’re still inside the comment. There’s no reason to make the server do extra work for something we don’t even want to see.
So there we . . . ah, crap. Okay, so we got rid of the other column, but this one is still hanging out wherever it wants. Looks like we’ll have to dig into the CSS a bit, too.
How can I figure out what to look for in the CSS file? It’s a bit tricky to wrap your head around all those HTML tags and CSS properties, but there are handy tools to help you do that. In Chrome (or Safari or Firefox), you can hit “Control + Shift + i” to open the developer tools for the current page. Now you can get a little view of the structure of the page (you’ll have to hit the little HTML button in Firefox), and you can click on the different elements in that list to highlight them in the actual page. It’s an easy way to relate the HTML code to what you actually see on the page, and then you can pretty easily figure out that (in the case of my theme) this “<div class="column-content">...</div>” is the main content area.
Here it is in Firefox. Where it says class=”column-content” is how the CSS styles are applied to it. That “column-content” class is set to be less than the entire width of the window, which is great if you have another column, but we don’t, so we need to make it be the full width.
I went to the Stylesheet in the Theme Editor (my theme only has one, but yours might have more - you’ll just have to look through them to find the one you need) and searched for “column-content” (Control+F will let you search the page for something). We can’t just edit that style, because it will screw up the Blog page, which uses the same styles. We’ll just have to create a new one.
Select the style (including everything between the curly brackets - and throw in the curly brackets too) and copy it. Then paste that code right after the original. You can then rename the new style something else, like “.column-solo” (the period in front of the name is really important, make sure you keep it). Get rid of the margin, change the float to “left” and add width: 100% to the end of this new style. Make sure every line ends with a semicolon. It’s also a good idea to search the page for the name of your new class. Hit “Control+F” and type your class name into the search box. You just want to make sure the new class doesn’t already exist - it could cause huge problems if it does. Class names have to be unique. When you’re ready, press “Update File.”
Now I’ll head back to the Page Template and find that Div tag. I just have to change its class name to that new class I just made, and then update this file.
Check it out, the column is gone, and so is the blank space it left. Sure, it would look a lot better with a bit more content there, but that’s an easy thing to do now. Now I’m not a huge fan of that search box up there in the header. Most themes have something like that, and I don’t really see a reason for it. We should be able to remove it pretty easily, now that we know all about commenting out a bit of PHP, right? Let’s try it.
Part 5 E C: What Else?
The header is built by the header.php file in your theme, if you can believe it. We can scroll down a bit to find something talking about search. Sure enough, here’s a couple HTML tags with a PHP function called “get_search_form()” inside it. Since these things are off to the right side of the page, we should be able to remove them much more easily than the sidebar was.
Throw a few comments in there, and we should be good to go.
Oh yeah! Nothing is safe from our commenting hammer, now! Oh, but what about those menu colors, what if I wanted them to be red instead of green? It just so happens that changing colors is pretty easy in CSS . . .
First we’ll have to use the developer tools to find the HTML behind that button. Then we can see the CSS that’s applied to it. We want to find the CSS style which looks like “#topmenu ul li.current_page_item a” and our color is in there.
I’ll head over to the style.css file and search for that. There we can see that the color style is set to “#8FC73E” which might look like some crazy gibberish, but it’s actually a color, represented in Hexadecimal format.
You can work with colors in Hex format in Photoshop, or you can try to find colors in Hex format online. I like this service called COLOURlovers, which can find you an entire color pallette based on one color. It’s a good place to find colors, and get their Hexadecimal format for use on Internets.
Anyway, once you get a color you like, you can just find every instance of the color you want to replace and then replace it. Usually a theme will use the same few colors over and over in a lot of places, so you can just replace every instance of the color with another one and you’ll be able to get all the colors switched. There were quite a few instances of that green color in my theme, but I made them all a sort of pinkish purple, which is more to Alyson’s liking.
Take great precaution when dealing with CSS stuff. There’s a lot to consider about colors in a website, so be careful when you’re changing them around all a-willy and a-nilly. You have to deal with mouseover states, active states, inactive states, borders, backgrounds, and lots of other stuff. I’m not saying you shouldn’t give it a shot, I’m just saying it’s a can of worms. You can use comments in CSS, just like PHP, using the /* . . . */ method, so put those around old properties when you change them, so you can more easily changes things back.
With just a bit of CSS and PHP tweaking, you can really whip that website into shape. Sure, it can be intimidating and complicated, but it can also be really fun and rewarding.
So with just a little bit of technical knowhow, we can remove or change some things on our site. But what if we want to add more features that aren’t there at all? For that, we’ll need some plugins.
Part 5 F: Check out those Sweet Plugs
Themes are great, but plugins are even greater. Head to the Plugins section of the dashboard to see your plugins. My Wordpress came with two, neither of which are activated. You can check those out if you want, but I’m going to show you how to install a new one.
If you want Wordpress to do something that it doesn’t do, you can google “Wordpress plugin” and whatever you want to do, and chances are you’ll find something useful. Alyson wants an image gallery on her site, so I want to find a good image gallery plugin.
That led me directly to this official Wordpress Plugin Directory page for a decent looking Gallery plugin. You could also just search the Plugin Directory for a plugin, but whatever. Here you can see installation instructions, screenshots, and other information about plugins. You can also press that “Download Version Whatever” button to download it, so I’ll go ahead and do that.
Installing a plugin is just like installing a theme. You’ll download a zip file with a folder inside it. Just open that zip file and copy the folder to yourwebsite/wp-content/plugins
Refresh that Plugins page and you should see your new plugin in the list. That way works really well when the site is located right there on your computer, but there’s another easy way to install plugins which you can use even when your site is published to a web host out there in the Internet somewhere.
Go to that Plugins page, click “add new” and then select “Upload.”
Point it directly to the zip file you downloaded with the plugin inside it. Yes, just hand it the zip file, and it will do everything on its own. You can install plugins either way, it really makes no difference, but keep in mind that when the site is live you’ll have to do it this way.
Okay, so the plugin is installed. Now you just have to activate it (click “Activate”) and it will be listed in the “Active” section of the plugins page. In my case, for this image gallery plugin, I also got another section in the Dashboard menu - “Gallery.” That’s where I can create image galleries with this plugin.
Inside this new Gallery section, I can control just about every aspect of an image gallery.
The plugin also added a new button to the page / blog post editing window. I can use this button to insert a gallery into a page or blog post. Your plugin might have added a button here as well.
Plugins do all kinds of things, so your experience may be totally different. I won’t go into detail about how to use this particular gallery plugin, as it’s outside the scope of “How to Make a Website.” There is one plugin that I would like to show you, though, and I recommend that you install it. It will help prevent spam robots and jerk-wads from wreaking havoc with your website.
When you activate it, you’ll see this error telling you that you don’t have any API keys. Go ahead and click “Fix this.”
Now you will have to go to
https://www.google.com/recaptcha/admin/create and log in with your Google account. If you don’t have a Google account, you might as well crawl out from under that rock and create one. Enter “localhost” into the box and hit “Create Key.” Note that you’ll have to get new keys for your actual domain name when you publish your website to your host.
Now you can go back to your reCAPTCHA options and enter the Public and Private keys into those text boxes. You can also change some options if you want, but the defaults are all fine. The only thing you might want to change is the Theme, which can be changed to whatever color you prefer.
Now you can go to your website and look at a blog post. You’ll have to either log out or check it out from a different browser. You should see the ReCAPTCHA box just above your “Post Comment” button. Now users will have to fill that out in order to post a comment. It will help keep out robots and stuff.
Now you can go to your discussion settings page and make things a bit less complicated for your users. I like to turn off “Comment author must have a previously approved comment” and “Comment Author must fill out name and e-mail.” The former option makes it so you have to manually approve every comment on your site (which takes time and is annoying to both you and your commenters) and the latter makes it so users can’t post comments anonymously. Sure, I wish people would be more open about who they are on the Internet, but you can’t force people to do anything they don’t want to do.
So now you (probably) have a super cool, totally customized website.
There is nothing beyond your grasp now, so long as it’s within the - admittedly vast - purview of Wordpress. I invite you to spend a bit of time now really polishing the bits here and there. Go over all your text, check all your pictures, and make sure there aren’t any typos or bugs. Play around with a few plugins and see what sorts of cool features you can wrangle out of your new site.
We have one step left in this whole process, and it’s the big one. Next time we’ll publish your whole site to the Wild World of Web, and after that it will be out there for the whole world to see. After that, you can still make changes and whatnot, but it won’t be quite as easy as when it’s right there on your computer. If there’s anything else you want to do, do it now.
I understand, of course, that there are some things you might have trouble with. Some of that PHP and CSS stuff can get really troublesome. I would be happy to answer any questions that I can. Feel free to hit me up at smcgill@denyconformity.com and tell me what your site is all about, and what you’re having trouble with - or what questions you have about PHP, HTML, CSS, or just life in general. I want the Internet to be a better place, and I’m willing to do that one website at a time.
I’ll see you tomorrow, for the exciting conclusion!
