Download - Structure style-story
![Page 1: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/1.jpg)
Structure, style, story: what goes where?
![Page 2: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/2.jpg)
![Page 3: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/3.jpg)
Why do we care?
![Page 4: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/4.jpg)
When we put the right things in the right places, we make a site
Faster.
Better for SEO.
More secure.
Easier to maintain.
Easier to update.
Easier to redo when the time comes.
And just maybe, less likely to bite us in the butt!
![Page 5: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/5.jpg)
Anatomy of a WordPress site.
StyleStructure Story
![Page 6: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/6.jpg)
Anatomy of a WordPress site.
StyleStructure Story
![Page 7: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/7.jpg)
Structure.
![Page 8: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/8.jpg)
Structure.
PHP files.
Site architecture.
![Page 9: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/9.jpg)
Code.
PHP:
Runs the Loop.
Processes the database.
Controls the markup.
Does app stuff.
![Page 10: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/10.jpg)
Site architecture.My rules:
Every piece of material is a post.
Organizing the site == organizing posts into:
Pages.
Widgets.
![Page 11: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/11.jpg)
For example.
![Page 12: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/12.jpg)
![Page 13: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/13.jpg)
![Page 14: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/14.jpg)
![Page 15: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/15.jpg)
Two roads to the same bar.
![Page 16: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/16.jpg)
See?
![Page 17: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/17.jpg)
![Page 18: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/18.jpg)
Style.
![Page 19: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/19.jpg)
Style.
CSS.
jQuery.
Presentational markup.
![Page 20: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/20.jpg)
CSS.
![Page 21: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/21.jpg)
jQuery.
![Page 22: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/22.jpg)
Presentational PHP.Lays out HTML
in a page template.
![Page 23: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/23.jpg)
page-pros.php
![Page 24: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/24.jpg)
To php or not to php?
![Page 25: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/25.jpg)
What if you want to get rid of something?
![Page 26: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/26.jpg)
To php or not to php?
![Page 27: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/27.jpg)
shame.cssdisplay: none;
visibility: hidden;
!important;
ID selectors
And … ?
![Page 28: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/28.jpg)
Story.
![Page 29: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/29.jpg)
Story.
Content?
To us, maybe – an afterthought.
To site owner, the whole point of the site.
![Page 30: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/30.jpg)
Story.Every piece, a post.
HTML in the WP Editor.
Embed media files.
![Page 31: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/31.jpg)
About home pages.What’s wrong with this picture?
Copy blocks hard-coded into home.php
New stuff on the site never shows up here.
SEO implications.
![Page 32: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/32.jpg)
![Page 33: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/33.jpg)
About home pages.What should happen instead?
Widgets.
Featured posts, products.
front-page.php
![Page 34: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/34.jpg)
StyleStructure Story
CSSPHP HTML
![Page 35: Structure style-story](https://reader030.vdocuments.us/reader030/viewer/2022032513/55d20a45bb61ebdb1a8b4801/html5/thumbnails/35.jpg)
Mary Baum @marybaum