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 alpha bet soup of letters that spell out programming languages. You’re wondering how you’re going to get a handle on the fundamental so you can look as smart as you are 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

The first three of these is 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.

Just have a look at the source code of this page. That’s all you can see here. Either you’re looking at HTML, CSS or JS or a references to CSS, JS or media files.

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

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 for without HTML CSS doesn’t mean much. But with it CSS is the web design instructions for a how a page is to look. With CSS typography, color and layout for the entire site is set.

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

CSS plays a major role in every WordPress theme and canoe found in your theme’s folder. It is always in file named “stye.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-sie:20px;}

The key is the pattern which is always:

selector
{name of the style property:value;}

Selectors are what hooks 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 musty be protected and backed up. Each database is unique to any given site.

A MySQL is a lot like an Excel spreadsheet. The database is a workbook. The workbook is made up of as many worksheets is as 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 databased.

But MySQL is not a file unlike Excel. Accessing a database requires 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 is stored in the databased. If links are involved – and they always are – those are stored. All settings in our WP Admin are kept in the databased.

All text based information is stored in the databased.

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 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

The post Unlocking The Mysteries Behind WordPress Code appeared first on Joy of WP.