Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Theming Wordpress for Your Showcases


Published on

  • Be the first to comment

  • Be the first to like this

Theming Wordpress for Your Showcases

  1. 1. Theming Wordpressfor your showcase<br />Mathias Funk<br />Jun Hu<br />
  2. 2. Summary<br />What is a CMS?<br />Wordpress and some important tools<br />Hands-on<br />Content and styling - HTML and CSS<br />Hands-on<br />A simple theme<br />Hands-on<br />Building your showcase<br />Hands-on<br />Take away<br />
  3. 3. Web server vs. browser + What is a CMS?<br />How to manage content on the web?<br />
  4. 4. Dynamic content<br />Internet Explorer<br />Safari<br />Firefox<br />Opera<br />…<br />Apache <br />Microsoft IIS<br />…<br />PHP<br />ColdFusion<br />ASP<br />JSP<br />…<br />MySQL<br />PostgreSQL<br />MS SQL Server<br />Oracle<br />DB2<br />…<br />
  5. 5. Content Management Systems<br />
  6. 6. Content Management Systems<br />
  7. 7. Wordpress and Editors<br />Installation guide and tools you will need<br />
  8. 8. Installing Wordpress<br /><br />Or Google “installing wordpress”<br />
  9. 9. Local Installation (Mac)<br /><br />Or Google “Wordpress MAMP”<br />Alternative:<br /><br />Or google “bitnamiwordpress”<br />Install the native stack for Mac<br />
  10. 10. Local Installation (Windows)<br />Instead of Microsoft Web Platform Installer (Web PI), We will be using Bitnami Appliance<br />Experience with PhpMyAdmin and MySQL for later migrating to a real web server.<br />
  11. 11. BitnamiWordpress Stack<br /><br />Or google “bitnamiwordpress”<br />Download the native stack for Windows<br />Do select “PhpMyAdmin”<br />When asked, use “localhost” as the hostname.<br />
  12. 12. BitnamiWordpress Stack<br />Do select PhpMyAdmin<br />
  13. 13. BitnamiWordpress Stack<br />When asked, use “localhost” as the hostname.<br />
  14. 14. BitnamiWordpress Stack<br />Try http://localhost, If you have got it right:<br />
  15. 15. BitnamiWordpress Stack<br />By default, the Wordpress files are in:<br />C:Program FilesBitNamiWordPressStackappswordpresshtdocs<br />Or<br />C:Program Files (x86) BitNamiWordPressStackappswordpresshtdocs<br />http://localhost/phpmyadmin for database administration<br />User: administrator<br />Password: [your administration password selected during installation]<br />
  16. 16. Install a proper text editor<br />Dreamweaver is overkilling.<br />NotePad++<br /><br />NotePad2<br /><br />…<br />“Run as Administrator” might be needed for editing the PHP scripts in Installed Wordpress.<br />
  17. 17. Install a proper text editor<br />Dreamweaver is overkilling.<br />NotePad++<br /><br />NotePad2<br /><br />…<br />“Run as Administrator” might be needed for editing the PHP scripts in Installed Wordpress.<br />
  18. 18. Start/Stop Apache/Mysql services<br />Start > <br />All programs > <br />BitnamiWordpress Stack ><br />BitnamiWordpress Stack Service<br />Start/Stop BitnamiWordpress Stack Service<br /><br /><br />
  19. 19. BrowserApache PHP MySQL<br />Hello World!<br /><html><br /><body><br /><?php<br />mysql_connect (localhost, bitnami, ‘d26d69602c’);<br />mysql_select_db (bitnami_wordpress);<br /> $result = mysql_query ("<br /> SELECT * FROM wp_posts<br /> WHERE post_title LIKE 'Hello World!'<br /> ");<br /> if ($row = mysql_fetch_array($result)) {<br /> print $row["post_content"];<br /> print (" ");<br /> } else {<br /> print "Sorry, no records were found!";<br /> }<br />?><br /></body><br /></html><br />
  20. 20. HTML / CSS<br />
  21. 21. Content Structure<br />Vision<br />Past<br />Competencies<br />Feedback / results<br />Present<br />Competencies<br />Projects<br />Assignments<br />Future<br />Next semester<br />Bachelor / Master<br />One page: Text + Picture<br />
  22. 22. Separation of content and style<br />Web<br />MS Word<br />LaTeX<br />CMS<br />…<br />CSS<br />Biu <br />Biu <br />Style<br />…<br />HTML<br />Text<br />Text<br />Content<br />…<br />
  23. 23. Examples<br />from:<br />
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29.
  30. 30.
  31. 31.
  32. 32. HTML<br />Tags<br /><h1> headline </h1><br /><p> paragraph </p><br /><a> link (anchor) </a><br /><img><br />Attributes<br /><a href=“”>TU/e</a><br /><imgsrc=“tue_logo.png”><br />
  33. 33. HTML<br />Classes<br /><h1 class=“main-title”><br /><p class=“content-text”><br /><p class=“content-text”><br /><p class=“content-text”><br />Identifier<br /><p id=“teaser” class=“content-text”><br />
  34. 34. CSS<br />Cascading Style Sheets<br />Style HTML files<br />CSS<br />HTML<br />HTML<br />
  35. 35. CSS<br />Styling<br />Tags<br />h1 {<br /> background-color: red;<br />}<br />Classes<br />.content-text {<br /> font-style: italic;<br /> }<br />Identifier<br />#teaser {<br /> letter-spacing: 1px;<br />}<br />Style hierarchy<br />#teaser a {<br /> text-decoration: none;<br />}<br />Pseudo styles<br />#teaser a:hover {<br /> text-decoration: underline;<br />}<br />
  36. 36. Units<br />Pixels (px)<br />p {<br /> width: 300px;<br />}<br />Points (pt)<br />p {<br /> font-size: 10pt;<br />}<br />Em unit (em)<br />p {<br /> line-height: 1.5em;<br />}<br />depending on font size of parent element, em is a multiplier: <br />Parent font size: 16px, then 1em is exactly 16px, 1.5em is 24px etc.<br />
  37. 37. Colors<br />Yellow?<br />Hex shorthand:<br />#aabbcc #abc<br />#0033ff #03f<br />
  38. 38. Hands-on<br />Download HTML and CSS file from:<br /><br />Google: “CSS reference”<br />Make this:<br />
  39. 39.
  40. 40. Box model<br />
  41. 41. Box model examples<br />border: 1px solid red;<br /> padding: 5px;<br /> margin: 0px 10px 10px 30px;<br /> margin: 0px 10px 10px;<br /> margin: 10px 0;<br />
  42. 42. Positioning<br />Default (static)<br />Show and hide elements<br />display: none;<br />display: block | inline;<br />Layout in order of appearance<br />Floating<br />float: left | right;<br />clear: left | right | both;<br />Absolute<br />Absolute positioning<br />position: absolute;<br />top | left | right | bottom: 100px;<br />Relative<br />Similar to static, but with top, left, right, bottom<br />position: relative;<br />left : -10px;<br />(Fixed)<br />
  43. 43. Hands-on<br />Download HTML and CSS file from:<br /><br />Make this:<br />
  44. 44.
  45. 45. Themes<br />
  46. 46. Where are the themes?<br />
  47. 47. Get a theme<br /><br /><br />There are many more themes on the web…<br />Do not download and install a theme without checking it!<br />
  48. 48. Install theme<br />
  49. 49. Activating themes<br />
  50. 50. Widgets<br />
  51. 51. Inside a theme<br />header.php<br />styles.css<br />sidebar.php<br />page.php for pages<br />index.php for newest posts<br />single.php for a single post<br />Content area<br />search.php for search results<br />404.php for error page<br />footer.php<br />
  52. 52. Make vision page the first page<br />
  53. 53. Building your showcase<br />
  54. 54. Hands-on<br />Choose a theme<br />Install it, activate it, choose widgets<br />Customize it with additional styling<br />Content<br />Create page structure as pages: Vision, Past, …<br />Write simple clear text<br />Link out<br />Have pictures and even embedded videos<br />Make Vision page first page<br />Spread the word!<br />
  55. 55. Take away<br />
  56. 56. Using Wordpress for real<br />Check your layout with different browsers<br />(at least Firefox, Safari, IE 8 + 9)<br />Move from local to a real web server<br />Export local database, then import it on new server<br />Copy templates and settings (usually just wp-content)<br />Check wp_config.phpfor changes (Database account)<br />Dashboard/Settings: Wordpress/site address (URL)<br />Activate<br />Caching (WP Super Cache)<br />Search engine access<br />Keep WP updated<br />Work on the content, a LOT!<br />
  57. 57.<br /><br />