Troubleshooting and Modifying your (WordPress) website

Trying to troubleshoot your theme? change the header on your website? maybe you want to add a fancy plugins or widget that doesn't provide a nice interface through your dashboard in WordPress and you aren't sure how to add it to your theme.

This might be a good place to start your adventures into web development and graphic design. I don't actually teach you how or where to put any code into your WordPress theme. I'll show you that in another post, but this is a post intended to empower you. I'm giving you the tools you need to do what you need to your website. If you have time to learn and the desire to do so, these tools should put you in the right direction. Please let me know if I missed any tools you think should be included, or if you have any questions.

Use Firefox.

Even if it is not your favorite browser, there are excellent reasons to use it for web development. Firefox tries to stick to web standards put forth by the W3C, and it allows for third-party addons that simplify debugging, troubleshooting and rapid development. You can always go back and test your work on other web browsers.

Get these addons installed in FireFox.

WebDeveloper, Firebug, Colorzilla and Measure it. Many other plugins can help and you might want to explore and expand this list, but I think of these four as quintessential to web development. WebDeveloper and Firebug both deserve their own blog post so I won't go into much detail about them. Color Picker does just that, tells you the color of any object on a website, in various formats so you can easily copy and paste the right codes. Measure it also does one thing and does it well, it measure distances on your screen so you have a better idea when tweaking your CSS and images.

Setup a clone of your website

You can play around with your code without affecting visitors. Most hosts nowadays allow you to setup sub domains easily. You could setup a clone of your site under something like:

http://development.example.com

so you can test out your changes without affecting your website at

http://example.com

I have a script that automatically does this periodically or on demand to make sure I have the latest database and files from the real site is available on the test site.

Master the tool you think its best for your needs.

I do most of my editing on the command line with Vim. This comes from my background as a Systems Administrator, Vim provides me with nice colors, easy file manipulation, search and replace facilities, bookmarks, and tons of other stuff. It's taken me 6+ years to learn it and I still feel like a noob at it but I stick with it. Besides having the power of Vim at my fingertips, staying in the command line enables me to quickly perform file system operations without even touching my mouse. I think this is extremely efficient. I also use Dreamweaver a lot so I've worked hard at learning its quirks. For graphics I use Photoshop and other Adobe products. I know there's Gimp and Inkscape and other free and OpenSource tools but they're just not up to par with some commercial offerings; even if they were as good, I need to spend my time creating content and making it look better, not learning new tools that do something I already know how to do elsewhere. Besides the wide acceptance of Photoshop and Dreamweaver, there is Photoshop TV in iTunes (or directly on their site) where they teach you almost all you need to know about Photoshop. Where is "Gimp TV"?... exactly.

Great tools to start with:

Notepad++ The basic Notepad program on steroids. It does highlighting, side by side views, tabs, powerful search and replace, supports many programming languages, and its easily extensible with plugins. I use this daily as well. Free. Available for Windows only.
Smultron. The best free OS X text editor I've found. Unfortunately the author seems to have called it quits and won't be developing it anymore. I'm now looking for an alternative. Any suggestions?
Dreamweaver (wiki link). Arguably the most popular Code/WYSIWYG web development tool. Used to be part of Macromedia, now you can find it under Adobe's brand and it comes bundled with some of their Creative Suite products. Not free. OS X and Windows.

Bluefish. A very promising open source alternative to commercial html editors. I like this a lot, wish I used it more. Free and available for Linux and OS X, a port for Windows is also being worked on. Bluefish Windows port.

Photoshop (wiki link). De facto standard when it comes to professional graphics work. Definitely not free or even cheap. OS X and Windows.

GIMP. One of the most successful Open Source consumer projects, it strives to provide an alternative to Photoshop. I have not tried it for a couple years. Some people swear it is as good if not better than Photoshop. I don't believe them, but to each its own. Free and cross platform.

FileZilla. Great FTP server and client. Supports most methods of transferring files back and forth from your server or hosting provider. I actually use the command line directly but I always have FileZilla installed just in case. I use it regularly for simple ftp operations. Free.

Past Beginners:

Cygwin. A bit advanced for beginners, but this is my home when away from Mac or a Linux/Unix box. Its part emulator, part shell that runs in Windows.

Putty. SSH/telnet client for windows. Awesome, I don't know what I'd do without it... maybe fall back to a cygwin only environment?. Free, Windows.

Vim. A command line editor, this isn't for beginners unless you're a masochist.

Additional reading

Convert your Photoshop design to a WordPress theme. Tutorial.
What are web standards and why should I use them? (Document)
Who's behind the W3C? Besides Tim Berners Lee, there is over 400 organizations and companies that are members of the W3C. List is here.
Does following webstandards make my website rank better? (Yes) and (Maybe)

Additional Suggested searches:

Plug these into your preferred Search Engine to find more.

Web Development beginner tools
• Photoshop vs Gimp
• Bluefish vs Dreamweaver
• Convert my Photoshop design to a theme.

If you have any questions, corrections or want more information, please leave a comment below. No, don't be silly you don't need to register just to leave a comment! If you're on Twitter or Facebook you can also reach out to me there.