Download to read offline
![BitnamiWordpress StackBy default, the Wordpress files are in:C:\Program Files\BitNamiWordPressStack\apps\wordpress\htdocsOrC:\Program Files (x86) \BitNamiWordPressStack\apps\wordpress\htdocshttp://localhost/phpmyadmin for database administrationUser: administratorPassword: [your administration password selected during installation]](https://image.slidesharecdn.com/wordpressworkshop-110412044214-phpapp01/75/Theming-Wordpress-for-Your-Showcases-15-2048.jpg)
![BrowserApache PHP MySQLHello World!<html><body><?phpmysql_connect (localhost, bitnami, ‘d26d69602c’);mysql_select_db (bitnami_wordpress); $result = mysql_query (" SELECT * FROM wp_posts WHERE post_title LIKE 'Hello World!' "); if ($row = mysql_fetch_array($result)) { print $row["post_content"]; print (" "); } else { print "Sorry, no records were found!"; }?></body></html>](https://image.slidesharecdn.com/wordpressworkshop-110412044214-phpapp01/75/Theming-Wordpress-for-Your-Showcases-19-2048.jpg)
Uploaded byJun Hu
Theming Wordpress for Your Showcases
This document discusses theming WordPress for a showcase portfolio. It begins with an introduction to content management systems and WordPress. It then covers installing WordPress locally, important tools like text editors, and interacting with the database. The document outlines HTML/CSS for content and styling. It discusses building a simple theme with templates, widgets, and customization. Hands-on exercises guide customizing an existing theme. The document concludes with tips for moving a site live and maintaining WordPress.
More Related Content
Similar to Theming Wordpress for Your Showcases
Theming Wordpress for Your Showcases
- 1. Theming Wordpressfor yourshowcaseMathias FunkJun Hu
- 2. SummaryWhat is aCMS?Wordpress and some important toolsHands-onContent and styling - HTML and CSSHands-onA simple themeHands-onBuilding your showcaseHands-onTake away
- 3. Web server vs.browser + What is a CMS?How to manage content on the web?
- 4. Dynamic contentInternet ExplorerSafariFirefoxOpera…ApacheMicrosoft IIS…PHPColdFusionASPJSP…MySQLPostgreSQLMS SQL ServerOracleDB2…
- 5.
- 6.
- 7. Wordpress and EditorsInstallationguide and tools you will need
- 8. Installing Wordpresshttp://codex.wordpress.org/Installing_WordPressOr Google“installing wordpress”
- 9. Local Installation (Mac)http://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMPOrGoogle “Wordpress MAMP”Alternative:http://bitnami.org/stack/wordpressOr google “bitnamiwordpress”Install the native stack for Mac
- 10. Local Installation (Windows)Insteadof Microsoft Web Platform Installer (Web PI), We will be using Bitnami ApplianceExperience with PhpMyAdmin and MySQL for later migrating to a real web server.
- 11. BitnamiWordpress Stackhttp://bitnami.org/stack/wordpressOr google“bitnamiwordpress”Download the native stack for WindowsDo select “PhpMyAdmin”When asked, use “localhost” as the hostname.
- 12. BitnamiWordpress StackDo selectPhpMyAdmin
- 13. BitnamiWordpress StackWhen asked,use “localhost” as the hostname.
- 14. BitnamiWordpress StackTry http://localhost,If you have got it right:
- 15. BitnamiWordpress StackBy default,the Wordpress files are in:C:\Program Files\BitNamiWordPressStack\apps\wordpress\htdocsOrC:\Program Files (x86) \BitNamiWordPressStack\apps\wordpress\htdocshttp://localhost/phpmyadmin for database administrationUser: administratorPassword: [your administration password selected during installation]
- 16. Install a propertext editorDreamweaver is overkilling.NotePad++http://notepad-plus-plus.orgNotePad2http://www.flos-freeware.ch/notepad2.html…“Run as Administrator” might be needed for editing the PHP scripts in Installed Wordpress.
- 17. Install a propertext editorDreamweaver is overkilling.NotePad++http://notepad-plus-plus.orgNotePad2http://www.flos-freeware.ch/notepad2.html…“Run as Administrator” might be needed for editing the PHP scripts in Installed Wordpress.
- 18. Start/Stop Apache/Mysql servicesStart> All programs > BitnamiWordpress Stack >BitnamiWordpress Stack ServiceStart/Stop BitnamiWordpress Stack Servicehttp://dl.dropbox.com/u/2022550/wordpress_workshop.pptxhttp://dl.dropbox.com/u/286741/WPWorkshop/helloworld.php
- 19. BrowserApache PHP MySQLHelloWorld!<html><body><?phpmysql_connect (localhost, bitnami, ‘d26d69602c’);mysql_select_db (bitnami_wordpress); $result = mysql_query (" SELECT * FROM wp_posts WHERE post_title LIKE 'Hello World!' "); if ($row = mysql_fetch_array($result)) { print $row["post_content"]; print (" "); } else { print "Sorry, no records were found!"; }?></body></html>
- 20.
- 21. Content StructureVisionPastCompetenciesFeedback /resultsPresentCompetenciesProjectsAssignmentsFutureNext semesterBachelor / MasterOne page: Text + Picture
- 22. Separation of contentand styleWebMS WordLaTeXCMS…CSSBiu Biu Style…HTMLTextTextContent…
- 23.
- 32. HTMLTags<h1> headline </h1><p>paragraph </p><a> link (anchor) </a><img>Attributes<a href=“http://www.tue.nl”>TU/e</a><imgsrc=“tue_logo.png”>
- 33. HTMLClasses<h1 class=“main-title”><p class=“content-text”><pclass=“content-text”><p class=“content-text”>Identifier<p id=“teaser” class=“content-text”>
- 34. CSSCascading Style SheetsStyleHTML filesCSSHTMLHTML
- 35. CSSStylingTagsh1 { background-color: red;}Classes.content-text{ font-style: italic; }Identifier#teaser { letter-spacing: 1px;}Style hierarchy#teaser a { text-decoration: none;}Pseudo styles#teaser a:hover { text-decoration: underline;}
- 36. UnitsPixels (px)p { width:300px;}Points (pt)p { font-size: 10pt;}Em unit (em)p { line-height: 1.5em;}depending on font size of parent element, em is a multiplier: Parent font size: 16px, then 1em is exactly 16px, 1.5em is 24px etc.
- 37.
- 38. Hands-onDownload HTML andCSS file from:http://dl.dropbox.com/u/286741/WPWorkshop/example1.zipGoogle: “CSS reference”Make this:
- 40.
- 41. Box model examplesborder:1px solid red; padding: 5px; margin: 0px 10px 10px 30px; margin: 0px 10px 10px; margin: 10px 0;
- 42. PositioningDefault (static)Show andhide elementsdisplay: none;display: block | inline;Layout in order of appearanceFloatingfloat: left | right;clear: left | right | both;AbsoluteAbsolute positioningposition: absolute;top | left | right | bottom: 100px;RelativeSimilar to static, but with top, left, right, bottomposition: relative;left : -10px;(Fixed)
- 43. Hands-onDownload HTML andCSS file from:http://dl.dropbox.com/u/286741/WPWorkshop/example2.zipMake this:
- 45.
- 46. Where are thethemes?
- 47. Get a themehttp://wordpress.org/extend/themes/simplesthttp://wordpress.org/extend/themes/coralineThereare many more themes on the web…Do not download and install a theme without checking it!
- 48.
- 49.
- 50.
- 51. Inside a themeheader.phpstyles.csssidebar.phppage.phpfor pagesindex.php for newest postssingle.php for a single postContent areasearch.php for search results404.php for error pagefooter.php
- 52. Make vision pagethe first page
- 53.
- 54. Hands-onChoose a themeInstallit, activate it, choose widgetsCustomize it with additional stylingContentCreate page structure as pages: Vision, Past, …Write simple clear textLink outHave pictures and even embedded videosMake Vision page first pageSpread the word!
- 55.
- 56. Using Wordpress forrealCheck your layout with different browsers(at least Firefox, Safari, IE 8 + 9)Move from local to a real web serverExport local database, then import it on new serverCopy templates and settings (usually just wp-content)Check wp_config.phpfor changes (Database account)Dashboard/Settings: Wordpress/site address (URL)ActivateCaching (WP Super Cache)Search engine accessKeep WP updatedWork on the content, a LOT!
- 57.