week 5 open session
DESCRIPTION
PHP and WordPress demonstrationsTRANSCRIPT
Week 5 Open SessionWeek 5 Open Session
Welcome. We will start promptly at 9.
PHP stepping stonesPHP stepping stones
• Create a valid form (HTML 5 core)Create a valid form (HTML 5 core)– Two form fieldsSubmit button– Submit button
• Get the form data to display on a second page ( l PHP N b)(a‐la PHP Noob)– Using $_POST[ ]
Simple Form exampleSimple Form example
PHP Sprout – Data SetupPHP Sprout Data Setup
• PHP MyAdminPHP MyAdmin– Create a databaseCreate a user account– Create a user account
– Create a table with two fieldsC t SQL t i t d t– Create SQL to insert data
– Create SQL to read the contents of the table
PHP Sprout – Reading the DataPHP Sprout Reading the Data
• START with a basic HTML template fileSTART with a basic HTML template file• In PHP connect to the databaseC h bl• Connect to the table
• Read data from the table
Example – connect to databaseExample connect to database
PHP Sprout – Insert form dataPHP Sprout Insert form data
• Start with your PHP Noob – style fileStart with your PHP Noob style file• Create a variable to hold the $_POST data
i di l h i bl d• Test to insure you can display the variable data• Run the static SQL insert statement – verify that the data is inserted
• Replace the static portions with the variablep p• Verify the data insert
Example – insert form data
PHP Sprout – final stepsPHP Sprout final steps
• Sanitize the input ‐Sanitize the input mysql_real_escape_string()
• Add input validation a good place for• Add input validation – a good place for jQuery!Add h fi ld h f• Add other fields or other extra features
• Use PHP includes for the header and footer sections.include()
Example ‐ extrasExample extrasSanitize user input
h kto prevent hacks
Use PHP include function to pull in boiler plate d tcode common to
all pages.
Anatomy of a WordPress Theme
http://yoast.com/wordpress‐theme‐anatomy/
WordPress TemplatingWordPress Templating
• ON YOUR WordPress SiteON YOUR WordPress Site• Start with a template you like
ll i d i d i• Install it on your WordPress site and activate • Browse the main page and save as an HTML file to your local computer
WordPress – with the local HTML copyWordPress with the local HTML copy
• Identify the folder with the style css pageIdentify the folder with the style.css page. • Create images folder in there to hold any CSS image referencesimage references
• Edit that CSS file to re‐skin the site to your ifi i d h ispecifications – update the comment section
at the head of the file! (see next slide)• Make a screen shot of the final version and save it as a PNG file – screenshot.png
Style.cssEdit thiEdit this section at the top of the file. The Theme Name must match the folder name used on yourused on your web server to hold the files.
WordPress Templates ‐ 2WordPress Templates 2
• Make a copy of the selected template folder inMake a copy of the selected template folder in wp_content
• Rename the folder to match what you listed inRename the folder to match what you listed in the comments head of your new style.css
• Upload the new style.css and linked imagesUpload the new style.css and linked images folder to overwrite the existing one in the copied template
• Copy screenshot.png into that same folder, overwriting the existing copy
Wordpress foldersWordpress folders
Copy your chosen th ‘t l t ’theme ‘template’ folder. Rename the folder something like ‘test‐theme’. Use that same name in the style.css header file used
Copied twentyelevenand saved as test‐theme
header file used for the theme.
WordPress – structure changeWordPress structure change
• Activate your test themeActivate your test theme• Finally you must make a structure change
k i di i h i i• Look into edits in the content appearing in head.php, sidebar.php or footer.php .