Download presentation
Presentation is loading. Please wait.
1
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
2
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…
3
The Internet Stack Application Layer TCP Layer IP Layer Physical Layer
4
Application Layer specifies the shared protocols and interface methods used by hosts in a communications network Hypertext Transfer Protocol (HTTP)
5
WORPRESS is one application that formats things according to HTTP
6
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.
7
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 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
9
Cheap abundant server space User-generated content
Community support Standardization vs. Customization
12
Sociotechnical System
PHP server CSS Content HTML Systems approach define the boxes, define the arrowst Driverless car cellphone Network MySQL Browser
13
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
14
What happens when you navigate to a WordPress webpage?
15
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
16
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>
17
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
18
HTML elements have “attributes”
<!DOCTYPE html> <html lang="en-US”> </html> <a href=" 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”
20
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
21
Stylin’ Inline - using a style attribute in HTML elements
<h1 style="color:blue;">This is a Blue Heading</h1> This is a Blue Heading
22
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>
23
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>
24
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
25
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
26
CSS “rule-sets”
27
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.
28
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.
29
<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>
30
<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>
31
<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>
32
<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
33
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
34
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”
35
Simple Table
36
WordPress database Let’s take a closer look at wp_posts
37
wp_posts “fields” What kind of information can be stored in the wp_posts table
38
wp_posts table Here is where the actual data is
39
A single post A
40
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
41
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
42
See:: http://html.net/tutorials/php/
We used to just write HTML by hand See::
43
<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?
44
<html> <head> <title>My first PHP page</title> </head> <body> <?php echo date("r"); ?> </body> </html>
45
https://yoast.com/wordpress-theme-anatomy/
Wordpress sites are constructed on the fly from a collection of php files
46
<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
48
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
49
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>
Similar presentations
