V413HAVV413HAVV413HAVV413HAVV413HAVTips 1Tricks 1Fixes .............._'ress .. screen Hate it when you f1 ndWP theme you love, but then real 1se it looks awful on smartphone? We fix that here toolslWordPress Limbo HeiJo worldl !!tot111t. l1da 1r t. &iit or The site stilllooks exactly like Twenty Ten, despite the chi ld theme having activated 200 WebDesign Tips. Tricks. & Fi xes obll e devices are eating away at the visitor logs for websites all over the internet . Sure. most si tes will look your but it's tohaveto zoomto actuallyread right? This of websites are more ever.obviously this isyou don't tomiss out There are ways to make your website lf we look at WordPress, you' ll see there are several of your site. Not everybody to use thOLJgh. thistutorial we usemedia queries to make the themeThat isto say, if the visitor is via small we'l l make the t heme adapt. we to the template itself wit h our edits. we'l l createchild theme to keepseparate. Let'sget started! 01 Makechild theme First of all we to create childtheme. As implied. childthemes rely themes which that that appear the child will loaded fromt he child t heme sits its folder is activated jLJSt like other theme. First. create folder called fi le cal led style.css. thecode: 001f* 002ThemeName:TwentyTenResponsive 003ThemeURI:http://tdh. me/wordpress/twenty-ten-responsive/ 004Description: childthemethatmakes TwentyTenresponsive. 005Author :ThordDanielHedengren 006AuthorURI :http: //tdh.me/ 00 7 emplate:twentyten 008*f 009 010@importurl(' .. /twentyten/style.css'); 011 02 Activate the child theme Use of WordPressthat has the Twenty Tentheme. whichisshippedwith WordPress default but also from wordpress.org/extend/themes/twentytenUploadthe folder to activate the Twenty TenResponsive theme from withi n WordPress. You'llnotice that the site looks just like at thiswe but import stylesheet. .....-- ...Hdowoctol --- .... 1 ......... ' - This iseasier to read on screen, but it's not exactly very pretty yet... lt's amazing whatlittle padding can do, but don't overdo it; make sure the amount works with the screen width 03 We need header.php too Before we do any fun stuff withmedia queries in style.css we first needto add t iny of code toheader.php. TouchingTwentyTenitsel f is no-no. so the header.php fi le from the wp-content/ themes/twentyten/ folder andplace it inthe twentyten-responsivefolder. ln the meta section of our own header.php, around line 14. addthe followingline which wi ll let us play wit h t he viewport: 001 002 04 Decide the media queries lnthis t utorial we're not going for fullyfiLJid version of Twenty Tenbut rat her adaptingthe layout for var ious set widths. The default si te widthis whichmostmoderndisplays will to handle. We'l l have media queryfor width andup. and then we' ll addsome addit ionalrules for and up. -'...., worid! .. _ The next step is andthen we' ll go over the widthrules aswel l Ciethe defaul t width). 05 Set up the media queries Wi th our plan decided. let's startto writethe media queries. This is done inthe child t heme we set up in step 1 since all edits should kept free fromthe parent theme. Open style.css fromthe twentyten-responsivefolder andaddthefollowingquer iesDo readthe comment ingwi thinthe code for quick insight astowhat each media queryismeant to do. 001f*=============== 002MEDIAQUERIES*f 003 004f*320 andup*f 005@mediaonlyscreenand(min-width: { 006 007f*Thisgoesforeverything320pixels Tips 1Tricks 1Fixes 017 018f*From481 andupwards*f 019@mediaonlyscreenand(min-width: { 020 021f*Forscreens481pixelsandwider*f 022 023} 024 025f*From640 *f 026@mediaonlyscreenand(min-width: { 027 028f*Specialstylingfrom640pixelsand up*f 029 030} 031 032f*980 andup*f 033@mediaonlyscreenand(min-width: { 034 035f*Whereweseteverythingstraightagain *f 036 037} 06 Decide what to hide The keytogettingthe versions for smaller screens to bothlook good and work well is to make sure yoLJhide LJnnecessary elements. andfi ndnew places for essent ial ones. lnthis example we'll hide t he header ontop upuntil the desktop version. and we' ll float the right-hand column tot he bottom of the page. Somet imes you'll better off with ot her priorit ies. but decidingwhich elements are crucial iskey so make sure youthink things through before touchingany code. 001f*320 andup*f 002@mediaonlyscreenand(min-width: { andup*f003 008004 009}005 010006 011f*Upto480 *f007 012@mediaonlyscreenand(max-width: {008 013009 014f*Upto480pixels*f 015 016} 010 011 012 #wrapper{ margin:0; padding:0;} #site-title{ width:100%; margin- bottom:0; text-align:center;} Web Design Tips, Tricks. & Fi xes 201 Tips 1Tricks 1Fixes Helo 'I"'Otdt 013#site-description{ 014width:100%; 015float:left; 016margin-top: 017text-align:center;} ...._._ .. ;:;:;::.,_. .. ,... _...,. .. _. ---- . ---1 -_.,.... 77 -- Our template shown reformatted for shown here in landscape aspect Our template shown in default desktop format, how you'd expect to encount er it fullscreen Our template adapted for t he slimmer widt h of smartphone screen such as iPhone, conventionally shown in portrait aspect 039margin-bottom:0;} 040 041#site-info,#site-generator{ 042width:100%; 04 3float:left; -- .. ...". ' worldl 018#access,#access.menu-header,div.menu,044text-align:center;} #colophon,#branding,#main,#wrapper{045 019@mediaonlyscreenand(min-width: {046} 020width:100%;} 021 022 023 024 025 026 027 028 029 030 031 032 033 034 #brandingimg{ display: } div#content{ width:100%; margin:0;} div#primary{ width:100%; margin-top: padding-top: border-top: #000;} 035#main.widget-areaul{ 036padding-right:0;} 037 038#footer{ 08 Make it pretty for small screens While t his simple piece of code will make the site more viewed mobile devices. itisinneed of gooddeal of us. Let's add some the media query. The we'reit here top is that we'l l have of space later ..001f*Upto480 *f 002@mediaonlyscreenand(max-width: { 003 004 005 006 007} .post,div.page,li.widget-container{ padding:0 } 09 Make it pretty for slightly larger screens Galleries needbit of loving to look good on smaller screens too 202WebDesign Tips, Tricks, & Fixes that are larger t han but smaller t han might from little more 001f*From481 andupwards*f 002@mediaonlyscreenand(min-width: { 003 004.post,div.page,li.widget-container, #comments{ 005padding:0 } 006 007} 10 Reposition the sidebar Youmight why we have media queryfrom up? The reasonis t hat fromthis sizeit works wit h the sidebar t he side. Our is. we it toscale appropriately, so the width will listed the formof 001f*From640 *f 002@mediaonlyscreenand(min-width: { 003 004#container{ 005width:62. 5%; 006margin:0;} 007 008.post,div.page,li.widget-container{ 009padding:0 } 010 011div#primary{ 012width:32.5%; 013 014 015 016 017} margin- top:0; padding-top:0; border:0;} Back to normal Right now, the desktop of t he si te looks bad. much like the shown across the pageThis is - we havelot of styles after alll ln our final mediawe'l l set thi ngs straight again. basically revert ingtothe Twenty Ten. 0011*980 andup*1 002@mediaonlyscreenand(min-width: { 003 004#access. menu-header,div.menu, #colophon,#branding,#main,#wrapper{ 005width: } 011#site-title{ 012width: 013margin- bottom: 014float :left; 015text-align:left;} 016 017 018 019 #site- description{ width : float :right; 020text-align:right;} 021 022#brandingimg{ 023display : } 024 025#footer{ 026margin-bottom: } 027 028#si te-info{ 029width: 030float :left; 0 31text-al ign:left;} 032 033#si te- generator{ 034width : 035 036 037 float :right; text-align:right;} Tips 1Tricks 1Fixes 003 004.post,div.page,li.widget-container, #comments,. navigation{ 005padding:0 } 006 007} 15 Dealing with embedded video content Embeds something that you' ll almost have tohandle. After all, when t hey are embedded intoyour width t hey'll in set widt h andmost likely t hat's wee more than the width of for example. For embeddedvideo this is simple enough; just addingthecode to our first media query YouTube videos etcwill opt imally001embed,iframe,object{ 002width:100%;} 16 Scale your imagery 006038} default the Twenty Tentheme already scales images so that t hey t he That t hat we have tofiddle with t hem. but other cases you'dto add max-width to .aligncenter and.alignnone most likely. WhatTen won't take of is images floati ng tot he leftright . which will have to scaled to make small er00 7#wrapper{ 008 009 010 margin: auto; padding:0 } Limbo Here'svideofor your enjoyment Watch embedded videos screens ranging f rom t o thanks to our now responsive theme 13 Single posts and pages QLJick look at si ngle post tellsus t hat the comments need styling; at the moment. they hit the outer of the window. Luckily this is easy enough to take of. si nce the commentssection sits in div#comments. Remember the padding code Firstthe up-to-480px we'll scale the images to 35%: 001img. alignleft,img. alignright{ 002width:35%; 003height:auto;} introduced step 7? Add #comments to it you'l l Then upvvards The code from step 7 wouldlook likethis: 001img.alignleft,img.alignright{ 0011*Upto480 *1002width:40%; 002@mediaonlyscreenand(max-width: {003height:auto;} 003 004.post,div.page,li.widget- container, #comments{ 005padding:0 } 006 007} 14 Getting the navigation links right lt's not just t he comments code that needs to positioned. as elements will show up whenyou're making t heme responsive aswell. such element is the navigational Next. andup: 001img. alignleft,img. alignright{ 002width :45%; 003height:auto;} Finally. let's reset the whole t hinginthe upwards media001img.alignleft,img.alignright{ 002width:auto; 003height:auto;} to the pagein aswel l asto the 17 Tighten up the menu post on si ngle posts.We needto worry object t hat wil l need some attention is about t hese when #wrapper is set to padding. sojustt he menu. asit fit too t hings row addthe class tothe same mediaas you didin step 13.likethis: 0011*Upto480 *1 002@mediaonlyscreenand(max-width: { smartphone. Since this is mostly issue really small screens. let 'sjust reduce the size andthe spacingbit . as well as the line height. lf you have an extensive youmight have to create completely altogether. Web Design Tips, Tricks, & Fixes203 Tips 1Tricks 1Fixes r1 on ress Soarceliles Al l required theme f iles are supplied Full step code Sometimes you JUSt don't want that pesky sidebar on your single posts in WordPress.Learn how to remove it, giving you the option to decide on its inclusion on per-post basis toolslWordPress ----- --------- Sometimessidebar is an part of your post, ot her times itjust takes upspace. Giving yourself speedy option to removesidebar makes sense ome themes have sidebar their single post views, and ot hers don' t . But why make that decision on global basis? Why not jLJSt decide per post ? That way you make aninformed decision on whether or not the sidebar should displayed. depending on the content insteadof what the t heme designer thought was right . ln t histutorial we'l l first learnhow to remove t he sidebar from the template file. andt hen LJse custom fieldto decide whetherit shOLJ id shown not. Finally, we'll create our own little checkbox insteadof relying on the customfield whichmight bit scary for some users. The principle for how to do this is the same for most themes, soyou should toapply t he solution to whatever theme you are currentlyusing. Make an informed decision on whether or not the sidebar shoulddisplayed, depending on the content 204Web Design Ti ps, Tricks. & Fixes 01 Grab the theme files For our testing purposes we wil l using special version of t he Notes theme, which usually resides onhttp://t dh.me/wordpress/notes. The theme isfree andGPL licensedso you canbuildwhatever you want onit. All the fi les that youneed can foundon the resource 02 Get familiar with single.php Since we're adding the sidebar option tosingle posts you need to familiarise yourself with single.php. Basicall y it includes the header (header.php). then looks for loopsi ngle.php and. fai ling that. fetches loop.php. After that we'll get the sidebar (sidebarphp), which is of course the mainpart we're interestedin. Finally, the footer (footer.php) rounds up the set. 001 002 003 007 008 009 03 Remove the sidebar Lets start removingthe sidebar andsee what happens. lnsi ngle.php, comment out the get_sidebar() tag, using this expression: 001 Beta-TDH -Contcnt tt (IO'it =--"_ __ - ........ ......_-....,.. ..._.......... -..,_... ,.........,... ..............4........ _fa __,....__---,__................................. ..... The sidebar on the righthand side is gone on si ngle posts There willno\N no sidebar on si ngle posts. since we have commented that element out. 04 Finding your way in style.css Nowthat we've got ridof t he sidebar we needto make t hings look bi t better:for instance, right now there's huge white space where t he sidebar usedto which clearly cant remain. remedy this,litt le CSSstyling is needed. so openup style.css. Let'sassume we just want to centre the content column: that means you'llneedto locate thefollowingline Beta-TDH Content test post --001div.post,div.page,div.attachment,div. hentry{margin: clear:both; }/* pixels*1 05 Centring the post div that we' llbreak the rest of t he site. let's just doproof of concept posit ioning the tothe centre on single.php. The full width we play withis and t he content columnis wide. That means t hat we need to pushit from the left (towhich it soit ends up inthe middle. So we needto change the001div.post,div. page,div.attachment,div. hentry{ma rgin: clear: both; }/* pixels*1 tothis: 001div.post,div. page,div. attachment,div. hentry{width : margin : clear:both;}/* pixels*1 06 Make the column full width This quite do it though, as we need t he wrapping#content column to full width. Findthis line instyle.css Caroundline 114): 001div#content{float:left;}. Next add width: 100%; using: 001div#content{float:left;width: Now we'vegot full-width which means t hat our post div should centred. 07 Haverethink This format works to point. but it won't real ly sufficeasit willbreak the rest of the site with those edits to t he CSS.Besides. someti mes we do want to show the sidebar our single posts. so we'llneed more solution. lt customfields. -------- - As you can see. the content is now cent red Just type the name and value and click Add Custom Field to applycustom field with said name and value This post hascustom field names sidebar wit h the value set t o nosidebar 08 The solution We'l l using custom fields in the theme to do two thi ngs. Weneedtocheck for whether the user has chosen tohide the sidebar or lf the sidebar is hidden. we need to use different styles sothat the rest of the site as as itis Creating the custom field is easy. You do it right away t he Edit Post but youmight have to the CustomField using the Screen Options menu int hetop-right. 09 The custom field check We' ll use get_post_metaO tofetch react to the val ue ofcustomfield. andcontrol whether to output t he sidebar or notinsingle.php. Replace t he get_sidebarO tag wi th t his check: 001 www.imaginebookshop.co.uk