This document appears to be notes from a presentation or tutorial about customizing WordPress themes. It includes information on the anatomy of WordPress themes, how to edit template files like header.php and style.css, and examples of tweaking a theme by adding images, changing styling with CSS, and inserting publishing dates. Screenshots and code samples are provided to demonstrate these theme customization techniques.

1. HI, MY NAME IS
JORDAN
Thursday, 25 April 13

2. A LITTLE BIT
ABOUT ME
Thursday, 25 April 13

3. Thursday, 25 April 13

4. Thursday, 25 April 13

5. Thursday, 25 April 13

6. Thursday, 25 April 13

7. COLDFUSION
PHP ASP
JAVA
RUBY JAVASCRIPT
image: http://reactiongifs.com/?p=996
Thursday, 25 April 13

8. DANGEROUS
TO BE
KNOW ENOUGH
Thursday, 25 April 13

9. DANGEROUS
TO BE
KNOW ENOUGH
TWEAKING YOUR WORDPRESS THEME
Thursday, 25 April 13

10. HOW WORDPRESS WORKS
image: http://harriespotters.tumblr.com/
Thursday, 25 April 13

11. HOW WORDPRESS WORKS
DATABASE THEME
YOUR CONTENT HOW THINGS LOOK
Thursday, 25 April 13

12. YOUR THEME
image: http://tom-raider.tumblr.com/
Thursday, 25 April 13

13. ANATOMY OF A THEME
image: http://thelissomelightofevening.tumblr.com/
Thursday, 25 April 13

14. ANATOMY OF A THEME
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js
Thursday, 25 April 13

15. SCARED YET?
image: http://www.bukk.it/cat-dramatic.gif
Thursday, 25 April 13

16. ANATOMY OF A THEME
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js
Thursday, 25 April 13

17. PHP / HTML
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js
Thursday, 25 April 13

18. PHP / HTML
Thursday, 25 April 13

19. PHP / HTML
Thursday, 25 April 13

20. COPING?
image: speakinginternet.tumblr.com
Thursday, 25 April 13

21. HTML
AN AWESOME TITLE
A FANTASTIC BYLINE
In hac habitasse platea dictumst. Nam pulvinar, odio
sed rhoncus suscipit, sem diam ultrices mauris, eu
consequat purus metus eu velit.
Thursday, 25 April 13

22. HTML
AN AWESOME TITLE
A FANTASTIC BYLINE
In hac habitasse platea dictumst. Nam pulvinar, odio
sed rhoncus suscipit, sem diam ultrices mauris, eu
consequat purus metus eu velit.
<h1> </h1>
<h2> </h2>
<p>
</p>
<div>
</div>
Adding Structure and Meaning
Thursday, 25 April 13

23. HTML
<img src = “whereTheImageIs.jpg” alt = “description”>
<a href = “thePageLink.pdf”> Link Text </a>
<ul>
<li>List Item Text</li>
<li>List Item Text</li>
<ul>
Some More Elements
Thursday, 25 April 13

24. CLASSES & IDs
<div id=”aSingleID”> ... </div>
<div class=”oneOfManyClasses”> ... </div>
<div class=”oneOfManyClasses”> ... </div>
Something to grab onto
Thursday, 25 April 13

25. PHP
<?php ... ?>
Doing all the Hard Work
Thursday, 25 April 13

26. PHP & The Loop
<?php if ( have_posts() ) while (have_posts()) : the_post(); ?>
.... magic! ...
<?php endwhile; endif; ?>
You’ll see this a lot.
Thursday, 25 April 13

27. PHP & Template Tags
You’ll see these a lot.
<?php the_title(); ?>
<?php the_permalink(); ?>
<?php the_content(); ?>
<?php the_excerpt(); ?>
Thursday, 25 April 13

28. image: http://bukk.it/applause.gif
Thursday, 25 April 13

29. JAVASCRIPT
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js
Thursday, 25 April 13

30. JAVASCRIPT
image: http://bukk.it/productivity.gif
Thursday, 25 April 13

31. Cascading Style Sheets
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js
Thursday, 25 April 13

32. Cascading Style Sheets
from this...
Thursday, 25 April 13

33. Cascading Style Sheets
to this!
Thursday, 25 April 13

34. Cascading Style Sheets
Thursday, 25 April 13

35. Cascading Style Sheets
image: http://bukk.it/blinkhomer.gif
Thursday, 25 April 13

36. Cascading Style Sheets
Remember those classes and IDs?
<div id=”aSingleID”> ... </div>
<div class=”oneOfManyClasses”> ... </div>
<div class=”oneOfManyClasses”> ... </div>
Thursday, 25 April 13

37. Cascading Style Sheets
Hooking In! (selectors)
#aSingle ID { .... }
.oneOfManyClasses { ... }
Thursday, 25 April 13

38. Cascading Style Sheets
Adding style (property and value)
color: #ff0000;
text-align: left;
Thursday, 25 April 13

39. Cascading Style Sheets
Putting it Together
#aSingle ID {
color: #ff0000;
text-align: left;
background-color: #0000ff;
border: 1px solid #111111
padding: 10px 10px 5px 8px;
}
Thursday, 25 April 13

40. Cascading Style Sheets
image: http://bukk.it/clap-nj.gifit
Thursday, 25 April 13

41. Editing Your Theme
Thursday, 25 April 13

42. Editing Your Theme
image: http://ano.lolcathost.org/thumbs//code-25.gif
Thursday, 25 April 13

43. Tools You’ll Need
FTP Editor
CyberDuck (MAC)
FileZilla (PC)
Thursday, 25 April 13

44. Tools You’ll Need
Text Editor
Text Wrangler (MAC)
NotePad ++ (PC)
Thursday, 25 April 13

45. Tools You’ll Need
Browser Inspectors
Chrome Developer Tools
Firebug (for Firefox)
Safari Developer Tools
Thursday, 25 April 13

46. Let’s Get Started
Thursday, 25 April 13

47. Let’s Get Started
Thursday, 25 April 13

48. Let’s Get Started
Add Picture
Add Dates
Less Gap
Bigger Type
Thursday, 25 April 13

49. Connect to the Server
Using your FTP Client
Thursday, 25 April 13

50. Connect to the Server
wp-content > themes > your_theme
Thursday, 25 April 13

51. Connect to the Server
Thursday, 25 April 13

52. WARNING: Cowboy Coding
image: http://gif-central.blogspot.com.au/2012/09/cowboy-shaking-head.html
Thursday, 25 April 13

53. WARNING: Cowboy Coding
Duplicate/Backup the Theme Folder!!
Duplicate/Backup File You’re Editing!!
Thursday, 25 April 13

54. Adding The Picture
Add Picture
Thursday, 25 April 13

55. Adding The Picture
<img src = “jordan.jpg” alt = “A picture of Jordan”
id= “sidebarPhoto”>
sidebar.php
Thursday, 25 April 13

56. Adding The Picture
Thursday, 25 April 13

57. Adding The Picture
#sidebarPhoto {
float:left;
width:100px;
margin-right:10px;
}
styles.css
Thursday, 25 April 13

58. Adding The Picture
Thursday, 25 April 13

59. Adding The Picture
image: http://bukk.it/struttin.gif
Thursday, 25 April 13

60. Tweaking the Excerpt
Less Gap
Bigger Type
Thursday, 25 April 13

61. Tweaking the Excerpt
Using Developer Tools
Thursday, 25 April 13

62. Tweaking the Excerpt
Using Developer Tools
Thursday, 25 April 13

63. Tweaking the Excerpt
#blog .meta {
font-size: 13px;
line-height: 14px;
margin-bottom: 14px;
color: #b8ada0;
}
styles.css
Thursday, 25 April 13

64. Tweaking the Excerpt
#blog .meta {
font-size: 18px;
line-height: 14px;
margin-bottom: 5px;
color: #b8ada0;
}
styles.css
Thursday, 25 April 13

65. Tweaking the Excerpt
#blog .meta {
font-size: 18px;
line-height: 14px;
margin-bottom: 5px;
color: #b8ada0;
}
styles.css
Thursday, 25 April 13

66. Tweaking the Excerpt
Thursday, 25 April 13

67. Tweaking the Excerpt
image: http://bukk.it/blues.gif
Thursday, 25 April 13

68. Adding Published Date to List
Add Date
Thursday, 25 April 13

69. Adding Published Date to List
Thursday, 25 April 13

70. Adding Published Date to List
Thursday, 25 April 13

71. Adding Published Date to List
<li>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</li>
Thursday, 25 April 13

72. Adding Published Date to List
<li>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
<p class="meta"><?php the_date(); ?></p>
</li>
Thursday, 25 April 13

73. Adding Published Date to List
<li>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
<p class="meta"><?php the_date(); ?></p>
</li>
Thursday, 25 April 13

74. Adding Published Date to List
Thursday, 25 April 13

75. Adding Published Date to List
image: http://bukk.it/celebration.gif
Thursday, 25 April 13

76. Resources:
http://www.jordesign.com/be-dangerous
http://codex.wordpress.org/
Thursday, 25 April 13

77. Thanks!
Questions?
Thursday, 25 April 13