Unlocking The Mysteries Behind WordPress Code

A Short Primer On The Code That Powers All WordPress Sites

You’re at a meeting and you’ve just been tasked with taking over the management and development of your WordPress web site.

You feel a little panicky. You don’t know what makes WordPress work and the alphabet soup of letters that spell out programming languages. You’re wondering how you’re going to get a handle on the fundamentals so you can look like a hero when talking shop with your IT and marketing people – to say nothing of your company’s owner.

Relax. It’s not that bad.

As it turns out, EVERY WordPress site runs on a few core technologies. Even if you never learn a line of code, you can understand what each of them do.

Here they are:

HTML – HyperText Markup Language
CSS – Cascading Style Sheets
JS – Javascript

PHP – PHP:Hypertext Preprocessor. (It has had a few names but this is the one now in general acceptance.)

MySQL – My Structured Query Language

Want More Of This?

Be eligible for service discounts and keep up-to-date with WordPress news, resources and advice delivered to you just about every Sunday.
  • Don’t you worry about a thing. Your email address is kept safe with those crazy monkeys at MailChimp.

Why Subscribe?

The first three of these – HTML, CSS and Javascript – are the only thing your browser ever uses. That means, if you’re not connected to the Internet, these 3 are going to work just fine. Along with images and other media, HTML, CSS, and JS are what get downloaded to a web browser.

Now for a little more detail:

HTML – HyperText Markup Language

HTML is the lingua franca of the web. Every web page has it. It sets the structure of your page.

It is the way we give meaning to content through the use of a system of pre-set tags. If some copy is a paragraph, that copy will start with a

tag. If we’ve got a subhead such as “HTML – HyperText Markup Language,” that copy will start with a heading tag such as

and end with a

tag.

If we’re dealing with a list you’re likely to be using an

  • tag for a given list item.Fortunately mastering the most common 40 tags is quite easy. You’ll see that HTML is a lot like grammar. It has nothing to do with the style of a page. That’s strictly the domain of CSS.

    CSS – Cascading Style Sheets

    This is a companion language to HTML. Without HTML, CSS doesn’t mean much. But with it, CSS is the web design instructions for how a page is to look. Typography, color, and layout for the entire site is set with CSS.

    I call CSS “the language of web design style.”

    CSS plays a major role in every WordPress theme and can be found in your theme’s folder. It is always in a file named “style.css.”

    CSS syntax is a tad harder than HTML but it also follows a well-known pattern. For example, if you wanted all list items on your site not to display their markers (bullet points), you’d see this:

    li
    {list-style-type:none;}

    If you wanted paragraphs to have a certain font size and color, you could do this:

    p
    {color:#f00;
    font-size:20px;}

    The key is the pattern which is always:

    selector
    {name of the style property:value;}

    Selectors are what hook the styles to your HMTL code.

    JS – Javascript

    Of the three, Javascript is the most difficult to learn. It is a big time scripting language which is used to set how aspects of a web page function. Put another way, it establishes web page behaviors.

    Commonly, Javascript is used as a library, a file that includes JS code used in millions of sites over and over again. Two well-known JS libraries are jQuery and React.

    When you see most any kind of modal or popup, a drop down menu or an accordion used in an FAQ page, you are interacting with Javascript.

    Don’t get this confused with Java. They are not the same.


    But what about PHP and MySQL? Unlike HTML, CSS, and JS, these require server side processing, i.e. they work only from a web server and not in a web browser.

    PHP – PHP:Hypertext Preprocessor

    While HTML, CSS, JS, and PHP are human readable and writable code (they all can be created with a simple text editor), that is where the similarities end.

    For the PHP code to work, it must run through a PHP application commonly referred to as a PHP parser. The parser lives on the web server. It typically inputs the PHP code and outputs it to HTML which is what is used for the web page.

    While HTML is static (it’s not a real programming language), PHP can generate dynamic content by accessing the database. More on the DB in a sec.

    Here’s a simple example of what it looks like:

     

    This PHP code will make a call to the database to get the title of the blog and the results will be shown as an H2 subhead on the web page.

    PHP has its own syntax which is similar to many programming languages. I like to think of it as the way a web site makes changes and requests to your database which is outputted to a web page.

    WordPress itself is made with PHP. In fact, it uses PHP in a unique way and it’s why many call WordPress a PHP Application. (It’s really true.)

    MySQL – My Structured Query Language

    Each WP site typically has one database which uses MySQL.

    A database is used to store information which can be changed and retrieved using commands that are in the PHP code. Without the ability to store, change, and retrieve data from the database, you could not have a web site. This is why the database of any WP site is mission critical and must be protected and backed up. Each database is unique to any given site.

    A MySQL database is a lot like an Excel spreadsheet. The database is a workbook. The workbook is made up of as many worksheets as is needed. With a database you have data tables that are like spreadsheets in that a database is made up of data tables. A WordPress database has 11 data tables by default. As plugins are added, data tables may be added to the database.

    But MySQL is not a file like Excel. Accessing a database requires a program such as PhpMyAdmin which is installed on virtually every web host.

    What is stored in a database?

    Each time you create a page or post, that content is stored in the database. If links are involved – and they always are – those are also stored. All settings in our WP Admin are kept in the database. So too are usernames and passwords (which are encrypted).

    All text-based information is stored in the database.

    Takeaway

    While WordPress promotes itself as a way of creating awesome web sites without knowing a line of code, it certainly doesn’t hurt to know what the five components for any WordPress site are, what they mean, and how they all fit together.

    Fortunately, as I hope my article proves, this is not as daunting a task as it would seem. Hopefully, you now have the confidence you need to talk with those mysterious coder types!


    Got a question or comment? Leave it in the Reply box below

Leave a Comment

Leave a Comment