Another one of the sage lessons Sean taught me was once you start digging into the code, specifically he was talking about HTML, you will start to see patterns. It doesn’t take an HTML expert to recognize these patterns and be able to start to make some edits. Before we go any further, a disclaimer:
One of these days I’m going to write about my journey away from “cowboy coding”. For now just know that messing with HTML, PHP, CSS, etc. can have dire consequences for your website. If you decide to jump into the code via your favorite FTP client, do yourself a favor and download a clean copy of the file you are editing BEFORE you make any changes. At least then, if you find yourself too far down the rabbit hole of code edits, you can always re-upload that bad-boy and get yourself back to square 1. If you’re not going to take a backup copy (read: safety net), you’re on your own.
As an example, I’m going to reference a chunk of code from my website. I’ll add it below as an image and you are free to download that for reference through the next part.
One of the great things about Sublime Text is the row numbers. You’ll notice that it only counts the rows that have actual breaks. So row 1 appears to have 5 lines, but it is simply that that line of code had no need for a line break. Computers (browsers) don’t care about our limitations on screen size. They just want the data. The empty lines (2, 4, 6) were just put in there so the code would be easier to read. Again, we’re looking for patterns so if you are editing or otherwise reviewing your code in a code editor, don’t be afraid to create spaces between lines to maintain your own sanity.
Our objective today is to look for, and learn from, the patterns on a web page. This example happens to be a PHP page, but I pulled it from my browser so it has already been converted to HTML. (Let me explain). In a very broad sense, WordPress is made up of a bunch of PHP files. Those files, combined with the “machine” of WordPress, work together to generate HTML which your browser can read. Today, I’m not concerned with you understanding the guts of WordPress, only the patterns in the code. Moving on…
If you look at rows 9 – 12, this is a super easy way to become familiar with the sort of “patterns” to which I’m referring. You’ll notice, if you were to look at the front of the site, that each of these are links to their respective business websites. You can look at the code and assume that “a-ref=” is some sort of code telling the browser that the next item between the quotation marks is a URL to some other website. After the actual URL, you see a “>” followed by the string of text that is displayed on the front of the site. This string also is colored differently and us normally underlined. It is the actual “hyper link” (from the old days!) that brings the visitor to a new web page or website. The string of text is then followed by a “</a>” which tells us this is the end of the link code.
As with lots of items in HTML, there are opening and closing tags for the actual content. You can start a paragraph with “<p>” and end that paragraph with “</p>” The same goes for most items in HTML such as div, ul, li, ol, span, H1, H2, etc. HTML likes to be tidy and likes to have most of its tags opened and closed. This also allows for nested tags, such as putting a div inside of another div. Notice on line 7 the paragraph tags are opened and closed. The same thing happens on line 1, but it is just a reallllly long string before the closing paragraph tag.
One of the items in HTML that does not need to be “opened” is the break tag. Notice at the end of lines 9 – 11 there is a <br /> code, but there is no opening break code (note that the closing p, div, etc. all “close” with the “/”. This break tag is used to simply manufacture a line break wherever the developer desires.
On just about any website in any browser you should be able to right click in an empty part of the page and choose “View Source”. While most of this stuff is going to be foreign to all of use, you should still start to see patterns. The beauty of this learned lesson is it immediately provides you with a little boost of confidence that you can actually edit a page using the text editor (read: code) instead of being tied to using the visual WYSIWYG editor.
If you are using WordPress to build your own site, make note of the page and post editor. At the top are those 2 tabs (visual / text). While the visual editor is handy and can get you 75% of the way there, don’t be afraid of the text side of things and you’ll start to focus on those patterns. You’ll be amazed at how quickly you pick it up. In no time at all, you’ll be spending more of your time in the text editor like me. I really appreciate the ability to place my cursor exactly where I want in the code and not have to rely on the mouse movements over on the visual side.
As always, I’d love to hear from you with any questions or comments. If something didn’t make sense, please do let me know.
