{"id":1438,"date":"2008-12-15T11:34:30","date_gmt":"2008-12-15T18:34:30","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=1438"},"modified":"2015-02-25T19:37:53","modified_gmt":"2015-02-26T02:37:53","slug":"26-designing-for-wordpress-part-two","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/26-designing-for-wordpress-part-two\/","title":{"rendered":"#26: Designing for WordPress: Part Two"},"content":{"rendered":"
We have WordPress installed, now let’s really get our hands dirty and start getting WordPress to do what we want it to do. We start by poking around the backend activating some plugins, changing some settings and creating posts\/pages. Then we take a look at the Photoshop design and note some of the important aspects. Layout, color palette and font choices are all important things to consider as well as the overall feel. WordPress sites don’t need to scream “Blog!” unless you want them to. Then we take a look at the modular nature of a WordPress theme and start altering the markup of the files and writing CSS. In part three, we will continue touching up the design, adding details and content. We may get to the finishing touches of adding the “extra-content” stuff like the Twitter feed, or that might be a part four.<\/p>\n
Links from video:<\/strong><\/p>\n We have WordPress installed, now let’s really get our hands dirty and start getting WordPress to do what we want it to do. We start by poking around the backend activating some plugins, changing some settings and creating posts\/pages. Then we take a look at the Photoshop design and note some of the important aspects. […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"open","ping_status":"open","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":18688,"url":"https:\/\/css-tricks.com\/lodge\/v10\/129-photoshopping-more-homepage-modules\/","url_meta":{"origin":1438,"position":0},"title":"#129: Photoshopping More Homepage Modules","date":"October 2, 2012","format":false,"excerpt":"In this screencast we dig into adding some more modules to the homepage of the site. Fairly important stuff! At the moment, we only have a handful of them over there. We have a few hot links, a couple of ads, and a poll. Below that, a bunch of gray\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18108,"url":"https:\/\/css-tricks.com\/lodge\/v10\/012-cssing-the-header-logo\/","url_meta":{"origin":1438,"position":1},"title":"#012: CSSing the Header \/ Logo","date":"September 8, 2012","format":false,"excerpt":"So far the actual web site doesn't look much at all like our Photoshop design. In this screencast we dig into doing just that, starting at the top with our header and logo area. It feels good to have a bit of a \"real\" start on building the site visually.\u2026","rel":"","context":"With 31 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191791,"url":"https:\/\/css-tricks.com\/snippets\/sass\/correctly-adding-unit-number\/","url_meta":{"origin":1438,"position":2},"title":"Correctly Adding Unit to Number","date":"December 29, 2014","format":false,"excerpt":"When converting a unitless number to a length, duration, angle or whatever, people tend to simply append the unit as a string, like this: $value: 42; $length: $value + px; \/\/ 42px While this method works, it is far from ideal because it results in implicitly casting the initial value\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148892,"url":"https:\/\/css-tricks.com\/snippets\/wordpress\/output-excerpt-manually\/","url_meta":{"origin":1438,"position":3},"title":"Output Excerpt Manually","date":"September 3, 2013","format":false,"excerpt":"There is always the_excerpt(), but that does some pretty specific stuff (e.g. adding paragraph tags, adding [...], not respect the more comment, use the saved excerpt...). Advanced Excerpt is pretty good at customizing that. If you want to get real simple though:","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":186545,"url":"https:\/\/css-tricks.com\/lodge\/svg\/26-forcing-shapes-paths\/","url_meta":{"origin":1438,"position":4},"title":"26: Forcing Shapes to be Paths","date":"October 19, 2014","format":false,"excerpt":"This is a little esoteric of a thing, I just needed to do it myself one time and found it confusing so I thought I'd do a whole video on it. The thing is, not everything is a in SVG. is fantastic because it can be anything. But the syntax\u2026","rel":"","context":"With 4 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":20333,"url":"https:\/\/css-tricks.com\/lodge\/artists-website\/016-home-navigation-part-2\/","url_meta":{"origin":1438,"position":5},"title":"#016 – Home Navigation, Part 2","date":"March 3, 2013","format":false,"excerpt":"We have a good start on the homepage navigation, but there is some styling stuff that still needs to get done. We start by completing the content itself, adding a few more nav links for a total of five. Then we alter the fonts and colors of the elements we\u2026","rel":"","context":"With 2 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1438"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=1438"}],"version-history":[{"count":12,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1438\/revisions"}],"predecessor-version":[{"id":156102,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1438\/revisions\/156102"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=1438"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=1438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n