De-Blackboxing WordPress Communication, Culture and Technology (CCT) Georgetown University Spring 2017 De-Blackboxing WordPress ** Change image to something better Evan Barba J.R. Osborn 1
What is the internet? a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies…
The Internet Stack Application Layer TCP Layer IP Layer Physical Layer
Application Layer specifies the shared protocols and interface methods used by hosts in a communications network Hypertext Transfer Protocol (HTTP)
WORPRESS is one application that formats things according to HTTP
What is WordPress? WordPress is an online, open source website creation tool written in PHP. But in non-geek speak, it's probably the easiest and most powerful blogging and website content management system (or CMS) in existence today. https://ithemes.com/tutorials/what-is-wordpress/
What is WordPress? "WordPress was born out of a desire for an elegant, well-architectured personal publishing system built on PHP and MySQL and licensed under the GPL. It is the official successor of b2/cafelog. WordPress is fresh software, but its roots and development go back to 2001. It is a mature and stable product. We hope by focusing on web standards and user experience we can create a tool different from anything else out there." WordPress About Page
Cheap abundant server space User-generated content Community support Standardization vs. Customization
Sociotechnical System PHP server CSS Content HTML Systems approach define the boxes, define the arrowst Driverless car cellphone Network MySQL Browser
Sociotechnical System PHP Runs server Accesses CSS Runs Generates Connects Formats Content HTML Systems approach define the boxes, define the arrowst Driverless car cellphone Network Stores/ Organizes Displays Connects MySQL Browser
What happens when you navigate to a WordPress webpage?
What happens when you navigate to a WordPress webpage? WordPress reads all the necessary PHP files starting with index.php WordPress executes the PHP code and retrieves the requested content from the database WordPress combines all this data and formats it (using CSS) into an HTML document WordPress serves the formatted document to the client
Your Browser Displays HTML <head> <!--some header stuff--> </head> <body> <h1> Header Text here </h1> <div> <p> Paragraph text here</p> <h2> Subheader text here </h2> </div> <p>Another Paragraph here</p> </body> </html>
Document Object Model (DOM) Nodes TREE This is the same page depicted as a tree, this tree is the DOM, each box is called a node, and each nodetype is called an “element” Elements
HTML elements have “attributes” <!DOCTYPE html> <html lang="en-US”> </html> <a href="http://www.website.com">This is a link</a> <img src=”image.jpg" width="104" height="142"> Attributes provide additional information (including formatting information) and come in “name/value pairs”
http://www.w3schools.com/css/
Stylin’ Styling can be added to HTML elements in 3 ways: Inline - using a style attribute in HTML elements Internal - using a <style> element in the HTML <head> section External - using one or more external CSS files
Stylin’ Inline - using a style attribute in HTML elements <h1 style="color:blue;">This is a Blue Heading</h1> This is a Blue Heading
Internal - using a <style> element in the HTML <head> section <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
External - using one or more external CSS files <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
What happens when you navigate to a WordPress webpage? WordPress reads all the necessary PHP files starting with index.php WordPress executes the PHP code and retrieves the requested content from the database WordPress combines all this data and formats it into an HTML and CSS document WordPress serves the formatted document to the client
Cascading Style Sheets (CSS) CSS is a stylesheet language that describes the presentation of an HTML document. CSS describes how elements must be rendered on screen, on paper, or in other media. CSS can control the layout of multiple web pages all at once External stylesheets are stored in CSS files
CSS “rule-sets”
Document Object Model (DOM) The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
CSS selectors The element selector selects elements based on the element name. You can select all <p> elements on a page The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.
<html> <head> <style> p { text-align: center; color: red; } </style> </head> <body> <p>Every paragraph will be affected by the style.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html>
<html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>
<html> <head> <style> p.center { text-align: center; color: red; } </style> </head> <body> <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be red and center-aligned.</p> </body> </html>
<h1 class="center">This heading will not be affected</h1> <html> <head> <style> .center { text-align: center; color: red; } </style> </head> <body> //now it is affected <h1 class="center">This heading will not be affected</h1> <p class="center">This paragraph will be red and center-aligned.</p> </body> </html> Now the heading is affected
What happens when you navigate to a WordPress webpage? WordPress reads all the necessary PHP files starting with index.php WordPress executes the PHP code and retrieves the requested content from the database WordPress combines all this data and formats it into an HTML and CSS document WordPress serves the formatted document to the client
MySQL What is a database? A computer application that stores data and has methods for accessing, managing, searching, and replicating that data Data is stored in “tables” that have rows and columns like a spreadsheet (2D array or matrix) data from one table is related to other tables through “keys” which are columns that appear in multiple tables this is why databases are referred to as “relational”
Simple Table
WordPress database Let’s take a closer look at wp_posts
wp_posts “fields” What kind of information can be stored in the wp_posts table
wp_posts table Here is where the actual data is
A single post A
What happens when you navigate to a WordPress webpage? WordPress reads all the necessary PHP files starting with index.php WordPress executes the PHP code and retrieves the requested content from the database WordPress combines all this data and formats it into an HTML and CSS document WordPress serves the formatted document to the client
PHP Scripting language that runs on the server When your browser asks for a .php page the server locates the page, reads the html and executes the php commands inside the html
See:: http://html.net/tutorials/php/ We used to just write HTML by hand See:: http://html.net/tutorials/php/
<title>My first PHP page</title> </head> <html> <head> <title>My first PHP page</title> </head> <body> <?php echo "<h1>Hello World!</h1>”; ?> </body> </html> THIS IS WHAT IT LOOKS LIKE ON the server, you see the php in there?
<html> <head> <title>My first PHP page</title> </head> <body> <?php echo date("r"); ?> </body> </html>
https://yoast.com/wordpress-theme-anatomy/ Wordpress sites are constructed on the fly from a collection of php files
<div id="primary" class="content-area"> <?php get_header(); ?> #go find and read the header.php page and insert it here <div id="primary" class="content-area"> <?php if ( have_posts() ) : ?> #execute the “have_posts() function (TRUE/FALSE) <?php if ( is_home() && ! is_front_page() ) : ?> # is this the landing page? T/F <h1 class="page-title screen-reader-text"> <?php single_post_title(); ?> #execute the function and insert results </h1> <?php endif; ?> // Start the loop. #the main wordpress loop #While there are posts insert the post and go back to the top of the loop. <?php while ( have_posts() ) : the_post(); // End the loop. endwhile; endif; ?> </div><!-- .content-area --> <?php get_sidebar(); ?> #go find and read the sidebar.php page and insert it here <?php get_footer(); ?> #go find and read the footer.php page and insert it here Twentysixteen index.php
What happens when you navigate to a WordPress webpage? WordPress reads all the necessary PHP files starting with index.php WordPress executes the PHP code and retrieves the requested content from the database WordPress combines all this data and formats it into an HTML and CSS document WordPress serves the formatted document to the client
Missing Piece? JavaScript Most popular programming language in the world! placed in the <body> and the <head> sections of an HTML page (just like php) to create dynamic and interactive content <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script>