While the following post is geared more toward beginners, and not the standard fare for this blog, I’m working up a more basic talk for non-developers to give a jumping off point for what we actually do to someone that wants to make sense of a basic WordPress site theme. There is no way that this could be all-encompassing, but it should be enough to help someone get into trouble while looking at a website’s code.

Even advanced web developers will run across acronyms and terminology that baffle them on a regular basis, as well as programming languages that they’ve never even seen before, let alone mastered. It wasn’t so long ago that any developer out there couldn’t differentiate between the types of code that went in to running their sites and with new changes being made constantly, no one will ever know them all.

I’m going to briefly discuss what the differences are between PHP, HTML and CSS, which are the most common types of code that are used to make WordPress websites. I’ll also touch a bit on Javascript, as most websites are running several scripts minimum to help with tasks for each page.

What is HTML?

HTML, which stands for Hypertext Markup Language, is what makes the structure of the website. It is simply a format that allows you to specify certain ways to display information on a page. HTML is written in “tags”, which are types of a structure that are written between opening and closing brackets that look like this: .

Tags can be used to make links, format text, build the page layout and more. For instance this bold link to my homepage is made of HTML code that looks like this:

For instance this bold link to my homepage is made of HTML code

Complete websites can be built out of pure HTML and text, but they wouldn’t be very attractive looking, so we use CSS to style them.

What is CSS?

CSS, which stands for Cascading Style Sheets is another form of code that describes the layout of a site. If HTML is a house, with the structure (walls, roof, etc) and contents, like furniture, CSS is the color of the paint, the size of the rooms and the ornamentation. CSS is used on a website to make the design. The use of “Pure CSS” to fully separate content and styling is the accepted standard. This bold text is made with CSS as opposed to HTML tags and looks like this:

This bold text is made with CSS

The difference is what goes in the quotes after “style” in a tag. Putting CSS in the tag is known as Inline CSS, while there are also Internal Stylesheets and External Stylesheets. Those two terms mean, respectively, CSS code that is placed in style tags in an HTML document, and code placed in a separate CSS file that is linked in the head of an HTML document. Bold text like this in an internal stylesheet will look like the following:

Bold Text

The same structure applies to external stylesheets, minus the style tags that won’t be present in a pure CSS file. This is where the “cascading” part of CSS comes into play. The code moves from least to most specific, utilizing the code that most accurately represents what is being styled. External stylesheets are used, then internal, followed by inline style which is the most important. This means that if my stylesheet says all span tags have bold text but the inline style says that it is not bold, then the text will display as not bold. Additionally, better defining an element (like span.heavy-text for the above example as opposed to just .heavy-text) will make that code more important in styling. If CSS that you write doesn’t change something like it should, it is possible that it is simply not being told to be more important than CSS in place elsewhere.

Ok, so with HTML we make our webpage and CSS allows us to style it, but what if we want to do something that can update automatically, like displaying a new post without having to go in and change the code each time we update our blog or website? For WordPress, the answer is a mix of PHP and MySQL.

What is PHP and MySQL?

MySQL is a database management system, which allows information to be stored in tables to access later. For WordPress this includes all custom settings on your site, user information, posts and pages and more. PHP is the code that is used to interface with the database. The power of having all of the content stored in a database means that you can switch out themes and code to radically change the design of a website while maintaining the same content.

PHP is a bit more complicated than HTML, but not by much after you learn the basic syntax of it. Code is kept in PHP tags that look like this:

This can be placed in its own file, or can even be interspersed with HTML. PHP accesses the database to pull relevant information based on what you tell it to do. WordPress heavily utilizes PHP to write functions, which are sets of instructions, to make things happen on your site. The title of this article is being pulled with code that looks like this:

That calls a WordPress function to display the title of the current post. If implemented into a PHP file in your WordPress site, you only have to write that once, and it will automatically display the proper title based on the current post that it pulls from the database. This means that after you have a properly built theme, you can happily write and update posts without having to concern yourself if they will display on the site when published.

What about other code like Javascript?

While the above is enough to build a WordPress website, there are other things you can do to make them more interactive. Javascript libraries can easily supply extra functionality to your website. On this website, for instance, I have Javascript that controls spam management, comments, a lightbox for images, the share bar, the display of code samples, Google Analytics and more. While a great deal could be said on all of these scripts and more, the majority of them can simply be loaded with a page to give it the features desired.

It can be daunting to start working on customizing a theme or building your own if you’ve never done any web design before. My advice is to take a bit of time out of each day to look at a simple project and see if you can tell how it’s made and how it works by looking at the code. Starting small will help you to progress and get into working on more complicated websites.

Do you have any questions on how all of these languages work together? Any tips for new website designers looking to get started? Share in the comments!

Republish