The Anatomy of a WordPress File
Download as PPTX, PDF0 likes735 views
The document outlines a presentation from WordCamp 2014 on the anatomy and editing of WordPress CSS files, covering topics such as styling options, primary CSS files, and methods to inspect and edit code. It emphasizes the structure of CSS, different types of styles (tag, class, id), and best practices for editing theme styles. Additionally, it provides practical examples and steps to customize appearance through CSS in WordPress themes.
The Anatomy of a WordPress File
- 1. The Anatomy of a WordPress CSS File WordCamp 2014 April 14 – 15, 2014 Atlanta, Georgia
- 2. What We Will Discuss • Cascading Style Sheets • Theme Styling Options • Primary Edit Files • Identifying Edit Requirements • Inspecting the Element • Locating Edit Files • Editing the Code • Viewing the Results 2
- 3. CSS Styling Options • Theme Options • Built In Custom Fields (ex: Widgets) • Editor Files 3
- 5. Theme Styling Options Example 5
- 7. Footer Text Color Edit – Before and After 7
- 8. Primary WordPress Style Sheets • Three primary WordPress Style Sheets – style.css – header.php – footer.php 8
- 9. Accessing WordPress Style Sheets • Follow this path – Dashboard > Appearance > Editor • Back Up Prior to Editing 9
- 10. Locating Primary Style Sheets 10
- 11. header.php 11
- 12. footer.php 12
- 13. Types of Styles • Tag Style – Create style rules that change HTML code automatically; applies rule every time element appears – h1 { color: #efefef } • Class Style – You name it; you manually select it – i.e. a div – .infoform{ color: #0076bf } • ID Style – You can only apply once; use for single unique elements – #box { color: #ffffff} 13
- 14. Things You Should Know • Basic Code Structure – selector { attribute: value } – h1 {color: #0076bf } • !important Declarations – !important declarations carry more weight – !important declarations by author carry more weight then !important declarations by the user – Override with caution – Could affect responsive designs (ex: size of elements) 14
- 15. What Is Contained in the CSS File • Comment block from the author • A set of style rules for the major elements of the theme: – h tags – Colors and fonts – Margins and padding – Basic layout of primary elements • (header, body, sidebars, footers) • Basic design and layout rules for the theme 15
- 16. Inspecting the Element This Example Uses Google Chrome Using Chrome browser; right mouse click; select Inspect element 16
- 18. Locate CSS Code Chrome Console shows file name and code line number 18
- 19. Practice with Twenty Eleven Theme Change Background Color – Inspect the Element 19
- 20. Practice with Twenty Eleven Theme Change Background Color – Identify Source Line 20
- 21. Practice with Twenty Eleven Theme Change Background Color – Locate Code Note: Installed WordPress Advanced Code Editor Plugin. WordPress code does not have line numbers. 21
- 22. Practice with Twenty Eleven Theme Change Background Color – Enter Color Hex 22
- 23. Practice with Twenty Eleven Theme Change Background Color – Update File 23
- 24. Practice with Twenty Eleven Theme Change Background Color – View Change 24
- 25. Practice with Twenty Eleven Theme Reduce Site Title Size – Inspect the Element 25
- 26. Practice with Twenty Eleven Theme Reduce Site Title Size – Edit Code 26
- 27. Practice with Twenty Eleven Theme Reduce Site Title Size – Reduce Size 27
- 28. Practice with Twenty Eleven Theme Reduce Site Title Size – View Change 28
- 29. Some of the Elements You Can Edit There Are So Many Possibilities 29
- 30. Before and After Example 30
- 31. The Anatomy of the CSS File • Decide what you want to edit • Inspect the element in browser • Find the code in the CSS file • Customize the code • Enjoy the enhancements 31
- 32. Thank You 32