WordPressToGoHowToBuildAWordPressWebsiteOnYourOwnDomain,

FromScratch,EvenIfYouAreACompleteBeginner

SarahMcHarry

Copyright©SarahMcHarry2013

AllRightsReserved

NopartofthiseBookmaybereproduced,copied,modifiedoradapted,withoutthepriorwrittenconsentoftheauthor,unlessotherwiseindicated.

Plainlanguagecopyrightnotice:Donotcopy,re-writeorplagiarizethisbookinanyshapeorform.Ifyoudo,youwillbereportedtoAmazon’sCopyrightDepartmentimmediately.

TableofContentsIntroduction

QUICKSTARTGUIDE–YOUROWNWEBSITEIN8EASYLESSONS

Lesson1.RegisterYourDomainAndSignUpForWebHosting

Lesson2.InstallWordpressOnYourDomain

Lesson3.HowToLogInAndOutOfWordpress

Lesson4.TheDesignOfYourWordpressWebsite

Lesson5.FirstStepsToAPerfectWebsite

Lesson6.AddYourFirstWordpressPage

Lesson7.AddYourFirstWordpressPost

Lesson8.AllAboutWidgets

IN-DEPTHGUIDE–DRILLDOWNTOTHEWONDERSOFWORDPRESS

Lesson9.AddImagesToYourWordpressWebsite

Lesson10.AddAVideoToYourWebsite

Lesson11.ThePowerOfTextWidgets

Lesson12.CustomMenusAndWhyYouShouldUseThem

Lesson13.SetTheHomePageOfYourWordpressWebsite

Lesson14.ChooseAndChangeYourWordpressTheme

Lesson15.ThePowerOfPlugins

Lesson16.Comments:StartADialogueWithYourVisitors

Lesson17.UsersAndTheirCapabilities

Lesson18.SearchEngineOptimization(SEO)

Lesson19.BehindTheScenesWithHTML

Lesson20.HowToBeAWinningWordpressWebmaster

Conclusion

AboutTheAuthor

Introduction

Welcome!WelcometothisWordPressbeginner’sguide.

YouareabouttojointhousandsofotherwebmasterswhohaveusedthisbooktobuildtheirownWordPresswebsites,fromscratch,eveniftheywerecompletebeginners!

Beforewestart,let’smakeonethingquiteclear.Thisbookisdeliberatelyshort.That’sbecauseIwanttotakeyouthroughthebasicsofbuildingyourownwebsiteinthequickestmannerpossible.

Iwantyoutolearnspeedilywithoutgettingdistractedbynon-essentialsortrivia.Sure,youcanbuya1,000-pagebumperWordPressguidethatwillturnyouintoaworld-authority(!)butitwon’thelpyougetonlineanyquicker.

WhatIwillpromiseyouisthat,ifyoufollowalongthelessonsinthisbook,doexactlyasItellyou(yes,Ma’am!),stepbystep,thenyou’llendupwithyourveryownwebsitethatyoubuiltyourself,evenifthisisthefirsttimeyouhaveeverventuredintotheonlineworld.

WhyshouldIbuildmyownwebsitewhenIcaneasilygetonlineforfree?Havingyourownwebpresenceisnowprettymuchessentialintoday’sonlineworld.EventeenagershavetheirownpagesonsitessuchasFacebookandthemanyothersocialnetworks.Buttheproblemisthatthesefreesite-buildingservicescancomeandgo,changetheruleswithoutnotice,andimposerestrictions.Somefreeservicescanshutyoursitedowniftheydon’tapproveofyourcontent.

Manywillclutterupyoursitewithtrashyadsandyourfreesitecandisappearovernightiftheservicegoesbustorgetstakenover.Andtheyofferlittleornotechnicalsupportwhenyoureallyneedit.

SowhyshouldIbuildmyownwebsiteonmyowndomain?Theansweristhat,withyourownprivatelyregistereddomainandhostingaccount,YOUownandcontrolthewebsite,notanybodyelse.Youcanputwhateveryoulikeonyoursite(withintheboundsoflegality)andno-onecantellyouotherwise.Youareyourownboss.

And,withyourownwebsite,youcanbuildyourowndistinctive‘brand’,whetheryouareabusinessoracommunitygroup,anindividual,orwhatever…Youcanmakeyoursitelookandbehavehowyoulike,whetherfore-commerce,orforpublicitypurposes,asaninformationresource-orjustapersonalblog.

Yourdomainbecomesyourveryownexclusivewebaddress,yourownpieceofonlinevirtual‘realestate’thatplaysitspartinpublicizingyourmissionormessage.

Thesedays,ifyoudon’thaveyourownonlinewebpresence,youareinvisible.

Youcanprintyourdomainaddressonyourbusinesscards,addittoyouremailsignatureandquoteinallyourofflineliterature.Yourownwebsiteonyourowndomaingivesyouidentity,visibilityand,indeed,status.

Butdon’tIneedaprofessionalwebdesignertomakeagoodjobofbuildingawebsite?No,definitelynot!ThisusedtobethecaseintheearlydaysoftheInternetbecauseonlyafewtech-savvygeeksknewandunderstoodthecomputerlanguage(HTML)thattranslatedyourwordsandpicturesintothecodethatbrowsersunderstand.

Butasthetechnologyhasadvanced,sohavethetoolstobuildwebsitesbecomemoreaccessible.WordPressisoneofthesetoolsandWordPressisthesubjectofthisbook.

WhatifI’mnotatechnicalwizard–willIunderstandallthejargonaboutweb-building?Withthisbookyoudon’tneedtoknowanyjargonorgobbledygook–IexplainitallinplainEnglishaswegoalong.Asyouusethesystemitwillbegintoclickintoplaceandyou’llunderstandwhatyouneedtoknowandwhatyoudon’t.

IfyoucanuseawordprocessoryoucanbuildyourownWordPresswebsite–it’sthatsimple-Ipromise!

Howmuchwillitcosttodoitallmyself?Peanuts.Theonlythingyouabsolutelyhavetospendmoneyoniswebhostingandyoucangetthisforafewdollarsamonth.

Forlessthan$10permonthyoucangetyourwebhostingaccountfromoneofthetophostingcompaniesontheplanet.

Ofcourseyoucanspendmoneyonothertoolsandservicesifyouwant,but,forasimplewebsitethatyoubuildyourselfyoureallydon’tneedtospendanymoremoneythanthat.

WhatIsWordPress?WordPressisapowerful(andfree!)packageofsoftwarethatsitsinthebackgroundonyourwebserver(theremotecomputerwhereyourdomainishosted)andperformsallthetechnicalprocessingthatdeliversyourcontenttoyourvisitorontheirlocalcomputer.OnceWordPressisinstalledonyourdomainyoudon’tneedtodoanythingtomakeitwork.Itjustsitsthereandperformsitsmagicentirelybehindthescenes.

WordPressprovidesaWYSIWYG(‘whatyouseeiswhatyouget’)interfacetoyou,thewebmaster,thatbypassestheneedtoknowanyHTML,PHP,CSS,JavaScript,MySQLoranyothercodinglanguage.

Oncethehangoutofhobbyistsandbloggers,WordPresshasnowevolvedintoapowerfulandsophisticatedwebplatformthatsupportsahostoffeaturesbothforprofessionalanddo-it-yourselfwebmasters.

Theterms‘blog’and‘website’arenoweffectivelysynonymousasfarasourusageofWordPressisconcerned.Punditsusethetwotermsinterchangeablybecausethetechnologyplatformbehindbothisexactlythesame.

WordPressisnowactuallyusedbysomeofthemajorplayersontheInternetasacompleteContentManagementSystem(CMS).ThinkCNN,TheNewYorkTimes,About.com,the

WhiteHouse,USPostOffice,andFordMotors-theyallmakeuseofWordPress.

And,inadditiontotheexperts,millionsofordinarypeopleandsmallbusinessesaroundtheworldalsouseWordPressastheirplatformofchoicetogetapresenceontheweb.

What’ssospecialaboutWordPress?

WordPressisFREEandopen-source

WordPressisstableandmaintainedbyanarmyofexperts

WordPresscontainsnumerousbehind-the-scenesfeaturesthatmakecreatingyourownwebsiteabreeze

WordPressiswonderful,butithasareputationforbeingdifficult.Thisis,inpart,duetothedocumentation.

WordPresswasoriginallywrittenbyprogrammers,forprogrammers,andtheinstructions(‘codex’,asit’stermed)areoftenwrittenintech-speakandseemtoassumethatyouknowwhattheyaretalkingaboutinthefirstplace.Thishasimprovedinrecentversions,butitcanstillbeachallengeifyouarenotafullypaid-uptechie.

Iknowallthis.I’macomputerprogrammermyself.Iactuallyamatechie(andproudofit!)butIcanalsowriteplainEnglish.Inthistutorial,IjustconcentrateonthebasicessentialsofWordPressandignoreallthecomplicationsthatyoudon’tneedtoknowwhenyou’refirststartingout.

HowToUseThisTutorialThebestwaytousethistutorialistositdownatyourPCwiththisbookbesideyouandfolloweachlesson,stepbystep.

BecauseWordPressisnowsosophisticatedandflexible,itcansometimesbedifficultfornewcomerstoseethewoodfromthetrees.SoIhavebrokenthistutorialdownintotwolevels:

QuickStartGuide

In-DepthGuide.

TheQuickStartGuide,coveringLessons1–8,isintendedtogetyouupandrunning,buildingyourownWordPresswebsite,mostlyusingthedefaultsettings,andavoidingasmanyofthetechnicalitiesaspossible.

Whenyouhavecompletedlessons1–8youwillhaveabasic,workingwebsitethatyoucancontinuetobuildandusewithoutanyfurthertweaking.Formanypeople,thisisalltheymayeverneed.

TheIn-DepthGuidetakesyoufurtherthanjustthebasicsandintroducessomeofthemoresophisticatedandfunctionaloptionsthatWordPressprovidestohelpyoumakeyourwebsitemoreefficientandunique.Lessons9–20takethebasicwebsitethatyoubuiltintheQuickStartGuideandhelpyoudevelopitontobecomeafeature-richresource,tailoredforyourpurposes.

FAQs(FrequentlyAskedQuestions)appearattheendofeachlessonandcoverthemainqueriespeopleoftenaskwhenthey’vereadthelesson.TheFAQsmaynotberelevanttoyoubuttheycouldjustaddalittlebitofextraknow-howwhenitisneeded.

Whenyou’vecompletedalltwentylessonsyouwillhavelearnedallthebasicsofbuildingaWordPresswebsite.You’llbewell-equippedtodiscoverforyourselfanyofthemoreadvancedfeaturesthatyoumaywishtoinvestigate.

And,whenyou’vebuiltyourwebsite,youarealwayswelcometovisitmywebsitehttp://www.wordpress2go.comformoreideasandresources.

Right,let’sgetstarted!

QUICKSTARTGUIDE–YOUROWNWEBSITEIN8EASYLESSONS

Lesson1.RegisterYourDomainAndSignUpForWebHostingThisisthefirststeptogettingyourownwebpresence.ButifyoualreadyhaveadomainandhostingaccountyoucanskipthislessonandgoontoLesson2.

AsI’vealreadystated,thisisthefirstandonlyplaceinthistutorialwhereyouwillneedtospendanymoney.Havingareliablecompanytohostyourwebsiteisanessentialinvestmentanditdoesn’tcostmega-bucks.Onceyouhaveyourhostingaccountsetupyoucanforgetallabouttheverycomplexcommunicationstechnologyneededtosupportyourwebsitebecauseyou’repayingsomebodytoprovideitforyou.And,Ipromiseyou,ifyougowiththewebhostingcompanythatIrecommend,youwillgetaverygooddealindeed.

Ifyouhaveneverdoneanyofthisbeforeandyou’reabitintimidatedbyallthejargonandtech-speak,don’tpanic.ThereisamassofincomprehensiblegobbledygookassociatedwithwebhostingandInternettechnologybutthegoodnewsisthatyoudon’tneedtounderstandnorcareaboutmostofit.LetmetakeyoubythehandandIwillexplainjustwhatyoudoneedtoknowaswegoalong.Tocoinacliché,it’snotrocketscience.Trustme.

Whenyou’vecompletedthislessonyouwillhavetakenyourfirstgiantleapintotheonlineworldofweb-building…

ChooseYourDomainOK,tobegin,youneedtodecideonadomain.Yourdomainnameisyouruniquewebaddressandit’swhatpeoplewilltypeintotheirbrowsertoreachyourwebsite.Soit’sagoodideatomakeitanamethat’seasytorememberandeasytospellandthattellspeoplewhatyourwebsiteisallabout.Sowhatsortofdomainnameshouldyouhave?

Itisbettertohaveadomainlike‘keepingchickens.com’ratherthan‘xyz101.com’becauseitspellsouttotheworldpreciselywhatyoursiteisabout.Butyourdomaincouldbeyourownnameornickname,oryourbusinessnameormaybeasloganthatdescribesyourmission.

The.comextensionisthemostuniversallyrecognizedsuffixtoadomainname,butyoucouldalsohave.netor.org,thelatterespeciallyifyouareanon-businessorganization.The.netextensioncanbehandyifthe.comversionofyourdomainisalreadytaken.Andthere’salso.us,.co,.biz,.info(andmore)ifyouwanttolookdifferent.Plus,therearethecountry-specificdomainnameextensionssuchas.uk,.au,.de-it’syourcall.

Youcanregisteryourchosendomainatthesametimeasyousignupforwebhosting.

SignUpForWebHostingThehostingcompanythatIrecommendforWordPresswebsitesisHostgator(www.hostgator4u.com).Theyhaveanawesomereputationforreliabilityandcustomerserviceandtheyalsoofferverycompetitivepricing.Andtheyhavetheaddedadvantage

thattheyprovideahandyscriptforautomaticallyinstallingWordPressonyourdomain.Thisisreallyusefulandwillsaveyoualotoftime.

Hostgatoroffersseveralhostingplansandyoucansignupforperiodsofbetween1monthand3years.Ifyousignupfor1monthyouwillpayyourhostingfeesmonthly.Ifyousignupfor1yearyouwillpayyourhostingfeesannually.Asyoumightexpect,thelongeryousignupfor,thecheaperitbecomes.Andyoucanpayviacredit/debitcardorPayPal.

So,tosetupyourWordPresshostingwithHostgator,gotowww.hostgator4u.com(Figure1.1)andclickon‘ViewWebHostingPlans’

Nowyouhavetochoosewhichhostingplanyouwant.

The’Hatchling’istheverycheapestplan,allowingyoutohostjustonedomainontheservice.

The‘Baby’planisessentiallythesameserviceastheHatchlingbutwiththeBabyyoucanhostanunlimitednumberofdomainsonthesameaccountwithoutpayinganyextra.

Thisisforyoutodecide.IfyoudecidetostartoffwithHatchling,youcanupgradetoBabyifyouwanttoatsometimeinthefuture.

Hostgatorhasahabitofofferingamazingdiscountsontheirservicesandthesemayvaryfromtimetotime.Butifyouquotethecouponcode‘WORDPRESS2GO’Hostgatorwillknowthatyouareareaderofthisbookandtheywillgiveyouthemaximumpossiblediscountavailableatthetime!

So,chooseeitherthe‘Hatchling’or‘Baby’planandclickon‘OrderNow’.Enteryourchosendomainnameanddon’tforgettoenterWORDPRESS2GOasthecouponcode.

Thenfollowthepromptstocompletethepurchaseprocess.Irecommendthatyouselectprivacyprotectionforyourdomainbecausethishidesyouridentityfromspammers.

Youdidit!You’venearlycompletedLesson1.You’vegotyourdomainandahostingaccount.Whenyou’vesignedupwithHostgator,checkyouremail.You’llreceiveanemailfromthemwithyouraccountsign-inandpassword.It’sagoodideatokeepthisemail(orevenprintitout)sothatyouhavearecordofyourhostingdetails.

ForsecurityreasonsHostgatormaywanttotelephoneyouafteryouregistertoverifythatyouarethepersonwhoopenedtheaccount,sopleaseprovidethemwithaneasilyaccessiblephonenumber.(Ortheymightaskyoutocallthem).

Don’tworry;theywon’ttrytosellyouanything:alltheywantistoknowthattheaccountwasopenedbyyou(orwithyourpermission)andthatyouarearealpersonandnotarobot.Thisstepisessentialbeforeyoucanaccessyouraccountandgetstarted.

___

IntheremainderofthistutorialI’mgoingtotakeyouthroughthecreationofaWordPresswebsiteusingmydomain‘1.keepingchickens.net’asanexample.I’llstartrightatthebeginningandyou’llwatchthewebsiteunfold,lessonbylesson.Ifyouworkalongsideme,youcanbuildyourownsiteatthesamepace.

Lesson2assumesthatyouarestartingoutwithaHostgatorhostingaccountandthatyoudon’thavetheWordPresssoftwareinstalledalready.

I’llshowyouhowtoinstallWordPresswithjustafewclicksofthemouseandthenyou’llbeallsettobeginbuildingaWordPresswebsite!

FAQ

IliveintheUKandIwouldratheruseaUK-basedhostingcompany.DoIhavetousetheAmericanHostgator?No,IcanrecommendacompanycalledJustHostwhoarebasedintheUK.Theyoffer.ukdomainnames(aswellasthoseabove)andallbillingisinGBP(poundssterling).

JustHostprovideshigh-quality,low-pricedhostingequivalenttotheHostgatorHatchlingplanandtheiruser-interfaceisverysimilarsoyoushouldbeabletofollowthistutorialwithoutanytrouble.

TouseJustHostgotohttp://www.justhost4u.com/(Figure1.2)andclickthe‘Sign-Up’button.

IalreadyhaveadomainthatIregisteredwithanotherregistrar.CanIstillusethedomainwithHostgator?Yes–youcanstillsetupHostgatorhostingforapre-registereddomainbut,inthesecircumstances,youmustchangeyourdomain’sDomainNameServers(DNS)toindicatethatyourwebsitewillbehostedonHostgator.

Thisisnecessarysothatthedomainnamesystem(whichdrivestheInternet)cantranslateyourdomainnameintoaspecificIP(InternetProtocol)addressthatidentifiesthespecificbitofhardwarethathostsyourwebsite.Iadmitthatthatsoundsabittechnicalbutit’sreallyquitesimple.

Allyou’vegottodoischangetwofieldsonyourdomainregistrar’sscreenandyou’redone.Here’show.

WhenyousignupforaHostgatorhostingaccountyouwillreceiveawelcomeemailwhichwilltellyouwhatnameserverstouse.Thiswillbeapairofcodesthatlooklikens????.hostgator.com(where????arenumbersallocatedbyHostgator).

Youwillneedtologintoyouraccountattheregistraryouusedwhenyouboughtthedomain.Thereshouldbesomewherefairlyobviousontheirscreenlabeled‘SetyourDNS’

(orsomethinglikethat).EnterthetwocodesHostgatorsuppliedandsavethesettings.

Thechangesmaytakeplaceimmediatelyoryoumayhavetowaitseveralhours(ormore)beforeyoucanaccessthedomainatHostgator.ThisisbecausetheinformationhastopropagateouttoallthenetworksontheInternetthatneedtoknowwheretofindyourwebsiteandthisisnotalwaysimmediate.

Ifyoucan’tfindouthowtochangeyourDNSthentryaccessingyourregistrar’sFAQpageorknowledgebase.Ifallelsefails,contacttheirTechSupportandaskthemtohelp.

Lesson2.InstallWordpressOnYourDomainWhatwe’regoingtodonowisinstalltheWordPresssoftwareonyourdomainandhostingaccount.Thegoodnewsisthatyouonlyhavetodothisonce,sojustgetthroughthisstepandyou’reonyourwaytoagreatwebsite!

IhavegiveninstructionshereforHostgator.Ifyouhaveahostingaccountwithanotherprovider,checkwhethertheyhavethecPanel(standsfor‘controlpanel’)interface.Ifso,thissetofinstructionswilllikelyapplytoyourhost,too.

Ifyouarewithadifferenthostandtheydon’thavecPanel,asktheirTechnicalSupportforinstructionsonhowtoinstallWordPress.

InstallWordpressWith‘Quickinstall’Ifyou’restillwithme,logintoHostgatorwiththeusernameandpasswordthattheyemailedtoyou.YouwillbepassedontothecPanelinterface(Figure2.1).ThisiswhereyouaccessalltheresourcesandservicesthatHostgatorprovidesforyou.

Scrolldownthispageuntilyouseethesectionheaded‘Software/Services’(Figure2.2).

Clickon‘QuickInstall’andthenonthe‘WordPress’linkunder‘BlogSoftware’.

Thenclick‘Continue’andyou’llseeascreenliketheoneinFigure2.3.Enterthenameofyourdomainalongside‘http://’andthenenteryouremail,thetitleofyourwebsiteandyourfirstandlastname.ThisistheminimuminformationWordPressneedstocreateawebsite.Youcanchangeanyofthisinformationlater.Thenclick‘InstallNow!’andwaitforthescripttofinish.

Thenit’sdone.WordPressisinstalledonyourdomain-easypeasy!CheckyouremailtogetyourWordPressusernameandpassword.

Ifallthiswentwell,congratulations-youcannowskiptothenextlesson.

InstallWordpressWith‘Fantastico’Ifyoudon’thaveaccesstoQuickInstallyoucanusetheothertoolcalled‘Fantasico’toinstallWordPressautomatically.ThereareseveralversionsofthistoolsowhatyouseemayvaryslightlyfromwhatIamshowingyouhere,butmostofitisself-explanatory.

First,clickontheiconlabeled‘Fantastico’.You’llseethisscreeninFigure2.4:

Clickon‘WordPress’intheleftpanel.Thenonthenextscreenclick‘NewInstallation’.

Clickonyourdomainnameinthedrop-downboxandthenenteryouradministrator-usernameandpassword(canbeanythingbutrememberwhatyoutyped!),nickname,emailaddress,sitenameanddescription.YoucanchangeanyoftheseentrieslaterwhenyoulogintoyourWordPresswebsite.Thenclickonthe‘InstallWordPress’button.Waitforashortwhileandit’sdone!

CheckyouremailforaconfirmationthatWordPresshasbeeninstalledonyourdomainandsavethis(orprintitout)forsecuritypurposes.

___

Congratulations!Whenyou’vecompletedthislessonyouhaveanemptyWordPresswebsiteonyourdomainjustwaitingforyoutomakeityourown!

FAQ

Help!IinstalledWordPressbutI’vemadeacompletemessofeverythingandIwanttostartagain.CanIuninstallWordPressonmydomain?Yes,youcan.LogintoHostgator’scPanelandgobackintoQuickInstall(seeFigure2.3).

Clickonthebuttonatthetopofthescreenthatsays‘ManageInstallations’.Youwillseeasmallredcrosstotherightofyourdomainname.Clickthisandanoptionwillappearlabeled‘Uninstall’.FollowthepromptsandyourWordPressinstallationwilldisappear.Youcanthenstartover.

Lesson3.HowToLogInAndOutOfWordpressNowlet’sdealwithafewofthebasicsandbeginwithloggingintoandoutofWordPress.

LogIntoWordpressWheneveryouwanttoworkonyourwebsiteyouneedtologinintoWordPressbytypingthefollowingintoyourbrowser:

http://yourdomain.com/wp-admin(where‘yourdomain.com’isyouractualdomainname.Inmycasethisiskeepingchickens.net)

You’llseethefamiliarWordPressloginscreenasinFigure3.1:

EntertheusernameandpasswordthatyouweregivenwhenyouinstalledWordPressandclick‘LogIn’.

It’sagoodideatobookmarkthisloginbecauseyou’llbeusingitalot.

Ifyouhaveacomputer-generatedpasswordyoucanchangethistosomethingelseafterwegetstarted.AssoonasyoufeelfamiliarenoughwiththeWordPressdashboard,gotoLesson17andthatwillexplainhowtochangethelog-inpassword.

Whenyoufirstlogin,you’llbepassedtotheDashboard(Figure3.2)whichiswherealltheactionstarts:

Thetopofthescreenisallabout‘Jetpack’whichisoneofWordPress’latestgizmoswhichwearenotgoingtouseinthistutorialandwhichwe’lldeactivatelater.Soignorethatforthetimebeing.

Thewelcomemessagesshownonthisscreenvaryfromtimesodon’tworryifthebodyofyourscreenlooksalittlebitdifferentfromthis.

Ifyousee‘WelcometoWordPress’box,youcanclick‘Dismiss’inthetoprightcorneroftheboxbecausewe’renotgoingtousethat,either.

Whatwearereallyinterestedinatthisstageistheverticalmenudowntheleft-handsideofthescreenheaded‘Dashboard’,whichiswhereallthebehind-the-scenesactiontakesplace.

We’regoingtobeusingthissetofdashboarddrop-downmenustoaccesstheinnerworkingsofWordPresstobuildawebsite.WheneverIsay‘fromthedashboard…’Iwillbedirectingyoutoclickononeoftheseleft-sidemenuitems.Iwillexplaineachonethatyouneedtouseaswegoalong.

UpdatingWordpressJustaquickdigressionhere.TheWordPressdevelopmentteamhasanon-goingmissiontoimproveandexpanditscapabilitiesandtheyreleasenewversionsofthesoftwareatregularintervals.

SowhenyoulogintoyoursiteandseeamessageabovethedashboardsayingthatanewreleaseofWordPressisavailable,it’sOKtoclicktoupdatethesoftware.

Justfollowthepromptsandtheupdatewilloverwritetheversionyoucurrentlyuse.You

usuallydon’tneedtodoanythingelsebutyoushouldcheckoutwhethertherearenewfeaturesthatyoumighttakeadvantageof.Therewilltypicallybesomethingannouncedinthebodyofthedashboardandyoucanalsocheckoutwww.wordpress.orgfornewsonthelatestrelease.

And,ifyouarewithHostgator,theynowrunanautomaticWordPressupdatewheneveranewversionisreleased.Theydon’talwaysdothisimmediatelybutifyoudon’tupdateyourWordPressinstallation,Hostgatorwilldoitbehindthescenesbydefault.

ViewYourWebsiteAsTheWorldSeesItAnytimeyouwanttoseewhatyoursitecurrentlylookslike,fromthedashboard,hoveryourmouseoverthesitetitleupinthetopleftcornerofthescreenandclick‘VisitSite’.Thewholesitewillbedisplayedandyoucanviewitasavisitorwillseeit.Youwillhavetoclickthebackbuttontogetbacktothedashboard.

LogOutOfWordpressTologoutofWordPress,lookatthetoprightcornerofthescreenwhereitsays‘Howdy…’,hoveryourmouseoverthisandclick‘LogOut’onthedrop-downmenu.WordPresslogsyououtofyourwebsitebutleavesthelog-onboxonthescreenincaseyouwanttogobackin.

FAQWhataboutalltheotherincomprehensiblestuffIcanseeinthebodyofthedashboardscreen?

Youcanignoremostofitfornow,butwhenyougetyourwebsiteupandgoingyouwillfindoneortwoofthepanelsquiteuseful.The‘RightNow’panelgivesyouanup-to-datesummaryofthestatusofyourwebsiteandwe’llcometotheQuickPressPanelinLesson7.

Ifyoureallydon’twanttoseethegeeky‘WordPressBlog’or‘OtherWordPressNews’(oranyotherdashboardpanel)thenclickon‘ScreenOptions’onthetoprightofthescreenandunchecktheseitems.Theywillthendisappear.

And,ifyouwant,youcanrearrangethepanelsonthedashboardbyclickinganddraggingthemupanddown.

Lesson4.TheDesignOfYourWordpressWebsiteRightthen–here’swhereitstartstogetinteresting…

ThevisualappearanceofaWordPresswebsiteisgovernedbyadesigntemplatecalleda‘theme’.Thethemedeterminestheoverallappearanceandlayoutofthesite,thecolorscheme,thefonts,andthestyle–infact,thewholeoveralllookandfeelofthesite.Thinkofitasa‘skin’.

OneofthewondersofWordPressisthatyoucanchangethethemeofyoursitewithafewclicksofthemouseandeverythingwill(usually)clickintoplacewithabrand-newvisualstyle.

ThedefaultthemeprovidedbyWordPressonnewinstallationsistheminimalist‘TwentyTwelve’theme,whichiswhatisillustratedbelow.

Figure4.1showswhatmyChickenKeepingwebsitelookslikestraightoutofthebox:

ThisisthedefaultlookandstyleofTwentyTwelveandIadmitthatitdoesn’tlookveryinterestingasyet–butI’mabouttochangeallthat.

I’mgoingtorecommendthatyoustickwiththisthemetostartwithasitwillbeeasiertofollowthelessonsifyoudo.Ifyouwantto,youcanchangeitlaterwhenyouknowwhatyouaredoing.

InthislessonI’llshowyouhowtotweakTwentyTwelvesothatyoucanexploreforyourselftheoptionsthatthisthemeprovides.

SketchOutABlueprintForYourWebsite

Beforegoingmuchfurther,itwouldbeagoodideaforyoutosketchoutonpaperroughlywhatyouwantyourwebsitetolooklikeandhowyouwantittobehavesothat,asweworkthroughthetutorial,youcanbeputtingyourdesignintopractice.

Figure4.2showstheoutlineofatypicalwebsiteandonethatTwentyTwelvefollows:

Whatyouneedtosketchoutiswhatyouwanttogowhereandapproximatelywhatyouwantyoursitetolooklike.

Atthisstage,Isuggestyoudesignthelayoutofyourwebsitetobeassimpleaspossiblebecause,ifyoucanlivewiththesimpleTwentyTwelveWordPresslayoutfornow,youwillfinditquickertobuildyourownsite.

TheTwentyTwelvearchitectureprovidesmanyofthetypicalfeaturesthatarefoundonmostwebsites:

Theheaderisatthetopofthepageandthiscanbeanimage,orablockoftext,orboth.Thetextwouldconsistofthesitetitlewithanoptionalextratagline.Theheadernormallyappearsatthetopofeverypage.

Belowthetitleisthe‘menu’whichisahorizontalbarcontainingtabswhichlinktothevariouspagesinyourwebsite.TwentyTwelveactuallyputsthemenuabovetheheaderbutmanythemesputitbelow.

Themainbodyofeachpagecontainsanarticle(pageorpost)withatitleatthetop.

Thebodyofthearticlecancontaintextorimagesoramixtureofboth.

Thesidebarontherightsideofthepagecontains‘widgets’(seeLesson8)whichtypicallycontainnavigationallinkstoguidetheusertootherpartsofyourwebsite.Widgetscanalsocontaintextorimages.

Thefooterisatthebottomofthepage.Thefooterisoptionalandcanalsocontainwidgets.

Itoftenhelpstostartbydecidingwhatyouwantyourfrontpagetolooklike.Isthisgoingtobeastatic‘splash’pageintroducingyourorganizationorcompany?Ordoyouwantablog-typesitewherethefirstthingyourvisitorswillseeisyourlatestnewsoropinion?

Whatpagelinksdoyouwanttogoacrossthetophorizontalmenubar?Again,thiswillusuallyremainthesameasusersclickfrompagetopage.

Nowthinkabouttheheader.Doyouwantaheaderimage?Doyouwanttouploadyourowngraphicorlogo?

Whatdoyouwanttoseeinthesidebar?Notethatthesidebarisgenerallyusedtoprovidenavigationtootherpartsofyourwebsite(ormaybeotherwebsites).

Doyouwanttousefootersand,ifso,whatdoyouwantinthem?

Asyoucanprobablyappreciate,themoreworkyoucandoatthisstagetoplanthelayoutofyourwebsite,theeasierandquickeritwillbetoactuallybuildit.

AtthisstageyourWordPresswebsiteisemptyexceptforthesamplecontent(‘Helloworld!’)thatWordPressinsertsautomatically.We’llbedeletingthatstuffinthenextlesson.Fornow,we’llfocusonsomeofthethingsyoucandotobeginmakingTwentyTwelvelookandfeelthewayyouwant.

So,logintoyourwebsite’sdashboard(seeLesson3)andfollowalongwithme:

AddASiteTitleFromthedashboard,goto‘Appearance’,‘Themes’and,forTwentyTwelve,you’llsee‘Customize’,‘Header’and‘Background’asoptions.(IgnoreWidgetsandMenusbecausethesewillcomeintofuturelessons).

Clickon‘Customize’andyou’llseesomedrop-downmenusontheleftside.Nowclickon‘SiteTitle&Tagline’.Hereyou’llenterthetitleandtaglineofyourwebsitethatwillbedisplayedatthetopofeverypage.

Enterwhateverisappropriateforyourwebsite(youcanchangeitlaterifnecessary)andclickontheblue‘SaveandPublish’buttonatthetopleftasinFigure4.3.

Youcanseethatthistextwillnowappearintheheaderofeverypageofyoursite.

SelectAColorSchemeNowclickon‘Colors’.Asyoucansee,youcanchangetheHeaderTextcolor-thecolorofthetextyoujusttypedin.Ifyouhaveacolor-schemeinmindforyourwebsiteyoucanbegintomakeittakeshapehere.Playaroundwiththecolorpaletteboxtoselectthecoloryouwant.

Inthesamedialogueboxyoucanalsochangethebackgroundcolor.Thisissetbydefaulttoabluish-graycolorbutyoucanchangeittowhateverfitsinwithyourideas.I’mgoingtochangemybackgroundtoblack(#000000),becauseIthinkitwillhelpmycontenttostandoutontheuser’sscreen.Butyoucanchoosewhatevercolorsuitsyourplan–orwhite(#FFFFFF)ifyouwanttokeepitplainandsimple.Whendone,clickontheblue‘SaveandPublish’buttonatthetopleft.

AddABackgroundImageAsyoucansee,thereisalsoa‘BackgroundImage’dialoguewhereyoucanuploadanimageinsteadofhavingaplainbackgroundcolor.Thebackgroundimagewilldisplayintheemptyareaaroundandoutsidethepageborders.Whatevergraphicyouusewillrepeatitselfacross,aroundandbehindyourwebpages.

Ifyouaregoingtocreateaparticularlyjazzysitewherethedesigngraphicsareanintegralpartoftheimageyouwishtoportraythenyoumightwanttoexplorethisoption.

ItendnottousebackgroundimagesbecauseIthinktheycanmakethescreenlooktooclutteredandcandistracttheuserfromreadingmysparklingprose(!)–butthefacilityisthereifyouwanttouseit.

AddAHeaderImage

Ifyouwantyoursitetohaveaheaderimageyoucanuploadithere.TheTwentyTwelvethemedoesnotprovideanyinbuiltheaderimagesand,bydefault,willnotdisplayone.Butifyouhaveagraphicthatyouwanttodisplayacrossyourwebsiteasaheaderyoucaneitherresizeitto960pixelswidthby250pixelsheightonyourcomputer,oruploadagraphicofanyothersizeandcropitwithinthisscreen.(Ignorethereferencestothe‘MediaLibrary’fornowbecausewewillbecomingontothatinLesson9).

Touploadanimage,clickonthe‘Browse’buttonandnavigatetotheimageonyourcomputer.Thenclickon‘Open’and‘Upload’.Iftheimageisnot960x250pixelsyouwillbegiventheopportunitytocropithere.Thenscrolldownandclickon‘SaveChanges’.YoumightwanttonoteherethatyoucanuploadaseriesofheadergraphicsandtellWordPresstodisplayadifferentheaderoneachpage.Thiscouldbeagreatideaifyouwantaparticularlyvisual-lookingwebsite…

IuploadedaheadergraphictomydemositeandFigure4.4showswhatthesitenowlookslike:

Canyouseehowthesiteisbeginningtotakeshape?Afewsimpletweakswillenableyoutobeginmakingyoursitelookhowyouwant.

Isuggestthatyouexperimentwithalltheoptionsinthislessontoseehowyoucanchangethethemetomakeitlooksuitableforthesortofwebsiteyouwanttobuild.Anythingyouchangeherewillbeeffectiveimmediatelybutyoucanchangethingsasoftenasyoulike,sonothingiscastinstone.

Whenyou’vefinishedcustomizingyoursettings,clickonthe‘Close’buttoninthetopleftandthiswilluncoverthedashboardmenuitemsdowntheleftsideofthescreen.

I’mgoingtoillustratetherestofthetutorialbyusingthisthemeanditwillmakeiteasierforyoutofollowifIkeepitassimpleasthis.AndforthesakeoffurthersimplicityIhaveremovedtheheaderimageabovebecauseitwillmaketheillustrationsinthistutorialeasiertofollow.

Iwillleavemydemowebsitehttp://1.keepingchickens.netupontheInternetsothatyoucangoinandbrowseittoseewhatitlookslikeaftercompletingthistutorial.(PleasenotethatIknowlittletonothingaboutactuallykeepingchickenssoIaskyoutocutmeabitofslackonthecontent…)

FAQIcan’tdecidewhatIwantmywebsitetolooklike!HowcanIgetstarted?

Onewayofgettingsomecreativeideasissimplytolookatotherwebsites.Findawebsitethatyoulikethelookofandhaveagoodbrowsearound.Notethecolorschemeandthefonts.Checkouttheheader.Seehowthesitenavigationworks.Howdoesthesiteusepictures?Doesthesitehaveads?

Notewhatyoulike(anddon’tlike)andseewhetheryoucanorganizeyourideasintoasimplestructureforyourownsite.Warning–donotcopyotherwebsitesoryoucouldbeintrouble.Anddon’tgettoocomplicatedtobeginwith.AsyoursiteevolvesyoucanaddmorebellsandwhistlesbutwhenyouarestartingouttheKISS(‘KeepItSimpleStupid’)principlecertainlyapplies!

Lesson5.FirstStepsToAPerfectWebsiteThere’sonefinaljobtodobeforeyoucanstarttocreateawebsitethatisallyourownandthat’stodoabitofhousekeepingandconfiguration.YouneedtodothisbasicsettingupsothatyouclearoutthesamplecontentandconfigureWordPresstoworkthewayyouwantit.

Atthisstagedon’tworryifthedetailslookunfamiliarandpuzzling,justfollowalonganddoitanditwillallmakesenseeventually,Ipromise.

Thiswon’ttakelongandthenwecangetonwiththeinterestingstuff.

DeleteTheJunk(SampleContent)Foreverynewinstallation,WordPressprovidessomesamplecontentwhichyoudon’treallyneedandwhichwe’regoingtodelete.

Whenyoulookatyoursiteyou’llseethatWordPresshasprovidedthefollowingitemsonthesite:

Recentcomments:MrWordPressonHelloworld!

Recentposts:Helloworld!

SamplePage

We’regoingtodeleteallthatandstartagain.So,fromthedashboard,Clickon‘Comments’.You’llseethecommentdisplayedasinFigure5.1:

Now,hoveryourmouseover‘MrWordPress’andacommandlinewillmagicallyappearunderneaththecomment.Clickon‘Trash’and,heypresto,thecomment’sgone.

Next,fromthedashboard,click‘Posts’.You’llseethe‘Helloworld’boxappear.Again,hoveryourmouseoveritandclick‘Trash’.That’sgone,too.

Finally,fromthedashboard,click‘Pages’.You’llsee‘SamplePage’displayed.Hoverandtrashthat,too.

Finally,we’llgetridofafewpluginsthatwedon’tneed.

Fromthedashboard,clickon‘Plugins’andyou’llseeanitemforJetpack.Click‘Deactivate’andthatwillmakeitdisappear.

Anddothesamewith‘HelloDolly’.Deletethispluginanddeleteallthefiles.(HelloDollyisaleft-overfromtheWordPressbloggingdaysandisofnousetous).

We’lldealmorewithPluginsinLesson15but,fornow,that’sallyouneedtodo.

ConfigureWordpressToBehaveHowYouWantFinally,here’swherewecheckoutafewsettingstobesurethatWordPressisgoingtobehaveaswewant.Again,don’tworryifyoudon’tunderstandallofthis–justdoit…

Fromthedashboard,clickon‘Settings’,‘Permalinks’.Under‘CommonSettings’clicktheradiobutton‘Postname’ifitisnotalreadyclicked.Thenhit‘SaveChanges’.

Nowyouhavetodecidewhetheryouwanttoallowyourvisitorstoleavecommentsonyourwebsite.Thishasbecomeamixedblessingthesedaysbecausethecommentsboxhasbecomeamagnetforspammersandthiscanbeaconsiderablenuisance.So,Iadviseyouthinkcarefullyaboutwhetheryoureallydowanttoallowvisitorstoleavecomments.

Ifyoudoallowvisitorstoaddcommentstoyourpages,bydefault,acommentboxwillautomaticallybedisplayedatthefootofeachpage.Youhavetheoptionofmoderatingthesecommentsbut,ifapproved,thecommentsthenbecomeanintegralpartofyourwebsite.

Toblockcomments,fromthedashboard,goto‘Settings’,‘Discussion’anduncheck‘Allowpeopletopostcommentsonnewarticles’.Thenscrolldownandclickon‘SaveChanges’.That’sallyouhavetodoonthispagebecausenowalltheothersettingswillbeignored.

However,ifyoudowantcommentstoappearonyoursite,checkoutLesson16whereIrecommendhowtodealwiththem.

___

Nowyou’vegotacompletelyemptyWordPresswebsitereadyandwaitingforyoutopopulatewithyourownstuff.Andthegoodnewsisthat,onceyouhavecompletedLessons1–5,youdon’tneedtoanyofthisworkeveragain.

So,withthepreliminariesoutoftheway,let’sgetmoving!

FAQSayIwanttodisplayacommentboxonsomepagesbutnotothers–isthispossible?Yes–IanswerthisquestioninLesson16.

Lesson6.AddYourFirstWordpressPageNow,beforewebeginthislesson,letmejustgiveabriefoutlineofhowyoushoulduse‘Pages’asopposedto‘Posts’,whichwewillgetintoinLesson7.

Pagesareintendedtobethe‘static’elementsofyourwebsite,containingcontentthatyoualwayswanttobeavailabletoyourvisitorsandwhich,typically,areaccessibleviaatabonthehorizontalmenubar.Thinkofthisasthe‘backbone’information.Youwouldtypicallyhavean‘AboutUs’page,possiblya‘Welcome’page,preferablya‘ContactUs’pageand,alongwiththat,a‘Privacy’page.Pagesdonotchangeverymuchandyoumayonlyneedoneortwopages.

Mostseriouswebsiteswillhavean‘About’pageandIrecommendthatyou,too,putupan‘About’page,becauseitwillenhancethecredibilityofyoursite.

AddAn‘About’PageLogintoyourWordPresswebsiteandfromthedashboard,clickon‘Pages’,‘AddNew’.Figure6.1showswhatyou’llsee:

Enter‘AboutUs’(orsomethingequivalent)inthetopblankboxwhereyoucanseethecursorflashing.Then,intheblankboxheadedbythe‘Visual’tab,typesometextthatdescribesyouoryourwebsiteoryourbusiness.Don’tcopyandpastethetextfromsomewhereelsejustyet(I’lltellyouwhylaterinthislesson)–justmanuallytypeinsometextsothatyoucanseehowthisallhangstogether.Asyoutypeyou’llseethatthewordswrapround,justlikeawordprocessor.Ifyouhit‘Enter’,you’llgetanewparagraph.Justkeeptypinguntilyou’vegotenoughtexttoplayaroundwith.Don’tworryabouthowperfectitis,youcaneditthepagelater.

Afteryou’veenteredabitoftextit’sagoodideatoclickon‘SaveDraft’.Thisishandywhenyouaresettingupacomplicatedpagebecauseitenablesyoutosaveyourworkwhenyougetsomethingrightandreturntothelastdraftif(when!)youfoulitupatalaterstage.Iencourageyoutousethisfeature,especiallywhileyouarelearning.Apagesavedonlyindraftisnotyetvisibletoanyoneexceptyou.

Nowlookattheiconsonthetoolbarabovethetext,asshowninFigure6.2.You’llprobablyrecognizethemfromotherregulartext-processingprogramsthatyouuse.

Youcanseebold,italic,strikeout,bullets,etc.Iftworowsoficonsdon’tshow,clickonthefarrighticononthetoprowandthesecondrowwilltoggleintoview.

Thebestwaytofindoutwhatfunctionstheseiconsrepresentistohoveryourmouseovereachofthemandthenexperimentwiththem.Ifyouhoveryourmouseoveraniconyou’llseeanexplanationofwhatitspurposeis.

Thewaythese(mostly)workisthatyouselectsometext,clickonaniconandyou’llseethatchangetakeplace.Inmostcasestheoperationoftheseiconsisself-explanatoryandsoIwon’tincludealotofunnecessarydetailherebutwillletyouplayaroundandexplorethemforyourself.Nochangeswillbemadetoyourwebsiteuntilyouclickon‘SaveDraft’or‘Publish’.

Iencourageyoutotryouttheblockquote,spellcheckerandlinks.

Toaddalinktotextinawebpage,selectafewwordsinyourtextwhereyouwantthelinktoappear.Youwillnoticethatthelittle‘chain’iconbecomesliveand,whenyouclickonthat,asmallpop-updialoguewillappearpromptingyoutoenterthetargetURLofthelink.SeeFigure6.3:

Thetextyouselectedthenbecomesa‘hotlink’which,whentheuserclicksonit,willtakethemtoanotherpage,eitherwithinyourwebsiteortoanothersite.

Toseetheresultsofyourchanges,clickonthe‘Preview’buttonoveronthetoprightofthepage.You’llthenseethewebpagedisplayedexactlyhowitwilllookonyourwebsite.

This‘preview’viewwillusuallyopeninanewtabinyourbrowser.Whenyou’vecheckedthepageoveryoucanclosethetabandreturntothepagewhereyousetitup.

Now,beforeyoupublishyourpage,thereisonemorefeaturethatyouneedtocheckout.TheTwentyTwelvethemeoffersyouthreedifferenttemplatesforyourpagelayout:

Default

FrontPage

Full-widthNoSidebar

Theseareaccessiblefromthe‘PageAttributes’,‘Template’drop-downbox.Trytheseoutonebyoneandchoosethetemplateyouwantforthispage.

Whenthepageisformattedasyouwantit,youcanclick‘Publish’andthepagewillbeaddedtoyoursitefortheworldtosee.YoushouldalsonoticethatWordPresshasmagicallyaddedthepagetabtothemenubaraboveyoursiteheader,whichiswhereitshouldbelong.

Inowencourageyoutothinkaboutandaddasmanypagesasrelevanttoyoursite.Asyouaddeachpageyouaregraduallyfillingoutyoursiteandmakingityourown!

Ifyourwebsitewillconsistofasmall,finitenumberofpagesthenyoumightbetemptedtoleaveitatthatandnotmakeuseofposts.Butthatcouldseverelylimittheeffectiveness

ofyourwebsite,particularlyinrelationtosearchengineoptimization(SEO).PostshaveanumberofveryusefulfeaturesthatPagesdon’thave.

Beforewegoontothenextlesson,here’stheusefultipIpromisedyoutohelpwhencopyingandpastingtext:

HowToCopyAndPasteTextTheRightWayAsyoucanimagine,itisofteneasierandquickertotypeupyourwebsitetextoffline,inaword-processorsuchasMicrosoftWordoratext-processorlikeNotePad.But,beaware,justcopyingandpastingrightintothetextboxontheWordPresspagecanhaveunintendedconsequences.

Thisisbecause,whenyoucopytextfromyourcomputertoyourclipboard,youroperatingsystemwilloftencopynotonlythetextbutalsotheformatting(includingfonts)aswell.MicrosoftWordcontainsalotofcomplicatedformattingbehindthescenesandthiscanconfuseWordPressbecauseitwantstoformatthetextaccordingtothethemeyouhavechosenandcopyingunwantedformattingcanmakeitappearallscrewy.

So,typeupyourtextofflinehoweveryouwantandcopyittoyourclipboardasusual.Then,whenyougetintoyourWordPresspage,clickononeofthetwolittle‘T’or‘W’iconsinthetoolbar(‘PasteasPlainText’or‘PasteFromWord’)andapop-upwindowwillappear:

Pasteyourtextintothisbox,click‘Insert’andthetextwilldropinjustlikeyoutypedit.ThisfeatureappliesbothtobothPagesandPosts.

Andthere’sonemorefeaturethatyoumightliketotakeadvantageof:ParentandChildpages.

MakingUseOfParentPagesAndChildPagesIfyouhavealreadypublishedatleastonepageyouwillseethat,under‘PageAttributes’,

youhavetheoptionofselectingapreviouslypublishedpagetobetheparentoftheoneyouarecurrentlyaddingorediting.Thismeansthatyoucanhaveahierarchyofpagesthatyoucannesttoseverallevels.Ifyouareplanningonbuildingawebsitewithmanypagesrangingoverawiderangeoftopicsthisisafeatureyoumightwanttouse.Parent/childpagesappearassuchindrop-downnavigationmenusandcanbeaneasywayofcreatingahierarchicalstructuretosteerusersaroundyoursite.

___

That’saboutitforPages;let’sfindoutallaboutPostsinthenextlesson.

FAQIwanttostopanyonefromseeingmywebsitewhileI’mstillsettingitup.HowdoIdothat?

Asawebmaster,youneedtobeawarethattheprospectiveaudienceforyourwebsiteisbothhumanandrobot(searchengines).Inpractice,yourwebsitewillgetfew,ifany,visitorsintheearlydaysand,becauseofthat,Iwouldn’tfrettoomuchaboutwhocanseewhat.

Ultimately,youwillwantbothhumansandrobotstoflocktoyourwebsitebut,ifyoureallydowanttoblockbothofthesetypesuntilyouareready,youcancreatean‘UnderConstruction’page.Thispagedisplaystovisitorswhileyougetonwithsettingupthesitebehindthescenes.

CreateAn‘UnderConstruction’PageTheeasiestwaytodothisistouseaplugincalled‘UnderConstruction’.IdealwithhowtoaddpluginsinLesson15,socomebackherewhenyou’vecompletedthatlesson.

Afteryou’veinstalledtheplugin,fromthedashboard,click‘Settings’,‘UnderConstruction’.Set‘ActivateorDeactivate’to‘on’,andleavealltheothersettingsasdefault.Thenclick‘SaveChanges’.ThisnowplacesanUnderConstructionpagebetweenyouandyourvisitors.Youwon’tbeabletoseethispagewhileyouareloggedintoyourwebsiteyourselfsologoutandjustviewthedomainURLifyouwanttoseewhatitlookslike.

Topreventthesearchenginesfromlookingatyoursettingupefforts,fromthedashboard,goto‘Settings’,‘Reading’andchecktheboxlabeled‘Discouragesearchenginesfromindexingthissite’.Thenclick‘SaveChanges’.ThiswilltellGoogle(andtheothersearchengines)thatyoudon’twantthemto‘crawl’yoursitetoputitintheirsearchresults–yet.

Anddon’tforgettoundoallofthiswhenyouarereadytolaunchyourwebsite!

WhatifIwanttochangesomethingonapageafterI’vepublishedit?Simple.Fromthedashboard,goto‘Pages’,‘AllPages’,andyou’llseeallthepagesyou’vealreadypublished,listedoutindateorder.Hoveryourmouseoverthepageyouwanttoeditandclickonthe‘Edit’commandthatpopsup.Thiswilltakeyoubacktotheoriginalpagewhereyoucanmakewhateverchangeswhatyouwant.Thenclick‘Update’.That’sallyouhavetodo.Youcaneditapageasoftenasyoulike.

Lesson7.AddYourFirstWordpressPostYouhavenowaddedoneormorePagestoyourwebsiteandtheseprovidethestatic,backgroundinformationtotelltheworldaboutyouandyourwebsite.Nowit’stimetostartaddingcontentintheformofPosts,whichiswhatwillbecomeamoreon-goingprocessasyoubuildyourwebsiteovertime.

Youwill,Ihope,berelievedtohearthataddingpostsisalmostthesameasaddingpages.SoI’mnotgoingtorepeatallthestuffinLesson6.Toaddapost,justfollowthesameinstructions,substitutingtheword‘post’fortheword‘page’andyou’llgetthere.

TheEssentialDifferenceBetweenPostsAndPagesWhatI’mgoingtodointhislessonispointoutafewofthedifferencesbetweenpostsandpageswhichmighthelpyoumakeupyourmindhowthetwodifferenttypesofentriescancontributetoyourwebsite.

Postsaredesignedtobeamorechronological,dynamicwaytopresentcontenttoyourvisitors.Intheoldendays,whenWordPresswasusedprimarilyforblogging,eachpostwouldbecomethelatestintheblogger’sstreamofnews/comments/events.(…’EmilylaidoneeggtodaybutdearoldJaneseemstobegettingbroodyagain’…)Thelatestpostwouldoccupythetoppositiononthepageandearlierpostswouldscrolldownbeneathit.

Supposeyouwantedtohaveawebsitewhereyoudisplayedtopicalinformation,orsomesortofjournal,ornews,you’dwanttomakeuseofposts.Typically,awebsitethatusespostsalsohassomestaticpages(asabove)butthePostcontentincludesaseriesofentriesthatyouaddtoonaregularbasisandwhichaddsfurther,timelycontenttothewebsite.

ButtherealpowerofPostsisthattheyalsohavehandyfeaturescalled‘categories’and‘tags’whichIwillnowexplain.

HowToMakeUseOfCategoriesAndTagsAsyouwilllearn,postsdon’thavetoappearonthefrontpageofyourwebsite(seeLesson13).Youcouldhaveyour‘Welcome’pageasthefrontpageand,inyoursidebar,

youcouldhaveaseriesofnavigationlinksfilteringyourpostsbycategory.

Categoriesareawaytoclassifyyourcontentintotopicssothatyourvisitorscanaccessallthepostsyouhavewrittenonaparticularsubject.Totakemychickensiteasanexample,Icouldwriteanumberofpostsonbroadcategoriessuchas‘chickenfood’,‘chickenhouses’,‘breedsofchicken’etc.

AsIwriteeachpost,Iwouldchooseoneormoreappropriatecategoriesforthesubjectmatter.Thiswouldthenautomaticallyprovideafilterofallthepostsinthesamecategorysothatmyvisitorscaneasilyfindtheirwaythroughthesitewithouthavingtoreadpostsontopicsthatdon’tinterestthem.

Ifyouknowwhatcategoriesyouaregoingtouseyoucansetthemupinadvance.Fromthedashboard,goto‘Posts’,‘Categories’andaddthemthere.Butyoucanalsoaddcategoriesasyougobyaddinganewcategoryatthetimeyouaddapost,asshowninFigure7.1.

Tagsarealooserwayofcategorizingyourmaterialthatwillhelpthesearchenginesassociatecertainkeywordswithyourposts.Everytimeyouaddapostyoushouldaddtwoorthreetagswhichcontainkeywordsorphrasestohelpthesearchenginesclassifyyoursite.Andonewaytousethetagsyouhavecodedistohavea‘tagcloud’inyoursidebar.I’llshowyouhowtodothatinthenextlesson.

BeforeIleavethesubjectofposts,letmeshareanotherneatfeatureofWordPress:theabilitytopre-andpost-dateentries.

HowToGoBack(OrForward)InTimeIfyousimplywantyourposttobedatedatthedateandtimeyoupublisheditthenjustleaveit.Butifyouwanttobackdateanentry,youcanchangethedateofpublicationtoapriordate.

Justabovethe‘Publish’button,whereitsays‘Publishimmediately’,clickon‘Edit’andyoucanchangethedateandtimetowhateveryouwant.Changethedate/timeasshowninFigure7.2andclickon‘OK’.That’sthedate/timethatwillappearonyourwebsite.

And,hey,youcanevenscheduleWordPresstopublishapostatsomedate/timeinthefuture.Justchangethedate(asinFigure7.2)toadateinthefuture,click‘OK’and‘Schedule’.WordPresswillholdthepostuntilthatdate/timeoccursandthenitwill

automaticallypublishitasifyouhadhitthebuttonyourself.Magic!

UsingQuickpressAswehaveseen,thereisashortcutyoucanusetoaddnewposts.Fromthedashboard,lookattheboxmarked‘QuickPress’,asshowninFigure7.3.

Youcanquicklyaddanewpostwithtitle,text,tagsandevenapictureandpublishthisimmediately.

So,nowyoucanbeginaddingPoststoyourwebsite,completewithcategoriesandtags,continuingtoaddthemuntilyouhavetherangeofcontentyouneedtodisplayafullandrichwebsite.

___

Next,we’regoingintothefinallessonoftheQuickStartGuidewhereI’llshowyouhowtouseWidgetstoenhanceyourWordPresswebsite.

FAQI’veaddedsomepostsandnowIrealizethattheyshouldreallybepages.CanIconvertapostintoapage(andtheotherwayround)?

Sadlyno.Thewayoutofthisistocopythetextfromtheunwantedpost/page,addanewpost/pageandpastethetextthatyoujustcopied.Thendeletetheunwantedpage/post.

HowdoIdeleteapostorpage?SeeLesson5(DeleteTheJunk).

Lesson8.AllAboutWidgetsNowthatyouhaveyourwebsiteloadedupwithsomecontent,it’stimetoaddafewrefinementstomakeyoursiteappearusefulandwell-designed.Youcandothisbyinsertingwidgetsinthesidebarofyourwebsite.

Whatare‘widgets’?Widgetsareveryhandylittlechunksoffunctionalitythatperformcommontasks.You,thewebmaster,choosewhichwidgetsyouwanttousetoperformadditionaltaskstoimproveyourwebsite’sappearanceandperformance.

Examplesofwidgetsinclude:

Listofcategoriesinyourwebsite

Linkstoyourlatestposts

Custommenus

Allthesewidgetsareclickablehotlinksthatguideyourvisitorsaroundyourwebsite.

AsyoucanseeinFigure8.1,Ihaveputintothesidebarofkeepingchickens.nettheCategories,RecentPosts,ArchivesandTagCloudwidgets.It’suptoyouwhatyouuseonyoursitebecause,asyoucansee,therearealotofwidgetstochoosefrom.

Oneoftheprimaryfunctionsofwidgetsistoprovidedifferentwaysofnavigatingyoursite.Butyoucanalsoaddtextwidgetsthatnotonlydisplaytextbutwhichcancontaincomputercode.We’llcoverthesetextwidgetsinLesson11.

Thenumberandpositionofthewidgetsyoucanusewilldependonthethemeyouareusing.TheTwentyTwelvethemeallowsyoutoinsertwidgetsintoyoursidebarand,optionally,inuptotwofooterareasacrossthebottomofastaticfrontpage.

Otherthemesmayallowyoutoputwidgetsinyourheaderareaoratthebottomofindividualpages.

Here’showtosetupwidgets:

Fromthedashboard,clickon‘Appearance’,‘Widgets’.The‘Widgets’screenisshowninFigure8.2:

AddSomeSidebarWidgetsInthepreviouslessonwediscussedusingcategorieswhenwritingposts.Youcangroupallyourpostsintocategoriesbyplacinga‘Categories’widgetinyoursidebar.Whenavisitorclicksonacategorytheywillbeshownonlyyourlatestpostsinthiscategory–theywon’tseepostsinothercategoriesthatdonotinterestthem.

Thereallyneatthingaboutthiswidgetisthatitallworkscompletelyautomatically.Youdon’thavetodoanythingexcepttocodeyourpostswiththerequiredcategory:WordPresstakescareofallthesortingandfilteringforyouandthewidgetwillupdateautomatically.

Iencourageyoutoexperimentforyourselfandseewhatthewidgetsfitinwithyourideasforyourownsite.

Toinsertawidgetintothesidebarsimplyclickanddragitfromthemainbodyofthescreentothe‘MainSidebar’boxoverontheright.Whenyoudothis,a‘Save’buttonwillpopupandallyouhavetodoisclickthatandyou’redone.Youwillseethatthereareoftenoptionswithwidgetsandyoucanusuallyinsertyourowntitles.Whenyouhavesavedawidget,click‘Close’.

Ifyouwanttorearrangetheorderofthewidgetsinthesidebarsimplydraganddropthem,upanddown,untilyouhavethemasyouwant.Youdon’tevenneedtosavethesidebar:itstaysasyoulastleftit!

Pleasenotethatwidgetswon’tworkunlessyouhavealreadysetupthecontentthatyouwanttodisplay.Forexample,a‘RecentPosts’widgetwon’tdisplayanythinguntilyouhaveactuallyaddedsomepoststoyourwebsite.

Theeasiestwayforyoutofindoutwhatwidgetscandoforyourwebsiteittoexperiment.PlayaroundbyclickinganddraggingwidgetsintotheSidebarandFooterAreasandsee

howitlooks.Youcanaddanddeletewidgetsasmuchasyouwish.

DeleteUnwantedWidgetsIfyouwanttodeleteawidgetfromyoursidebar,simplyclickonitandthenclick‘Delete’anditwilldisappear.Youcanalwaysaddthewidgetbackinagainifyouchangeyourmind.

FAQCanIhavedifferentsidebarwidgetsoneverypage?

Bydefault,WordPresswilldisplaythesamewidgetsonthesidebarofeverypostorpage.Thereisagoodreasonforthis:itprovidesaconsistentvisual‘map’ofyoursitetoyourvisitorssothattheycanmoreeasilyfindtheirwayaroundregardlessofwheretheybrowse.

Butsomethemesdoenableyoutodesignmorethanonesidebarandthenchoosehowandwhentodisplaythem,sothisisnotcastinstone.

Ifyourthemedoesn’tprovidethisandyouhaveagoodreasonforwantingtodisplaydifferentwidgetsinthesidebarondifferentpagesofyourwebsite,thereisausefulplugincalled‘CustomSidebars’thatyoucanusetoachievethis.PluginsarecoveredinLesson15.

WhatifIdon’twantasidebaronmywebsite?

Thenjustdeleteallthewidgets.Ifyoudon’thaveanywidgets,nosidebarwillbedisplayed.

___

That’sitfortheQuickStartGuide.Haveyoumadeastartonyourwebsiteyet?NO?Lessons1-8areallyouneedtogetyourwebsiteupandrunning,albeitinaverysimpleformat.SoIurgeyoutogobacktoLesson1,makeastartandjustdoit.Itgetseasieronceyoumakeastart,Ipromise.

Buildingawebsitemayseemanuphillchallengebut,actually,it’squitegoodfunandyou’llgetagreatsenseofachievementwhenyouseeyourveryowndomaincometolife…Ifyouhavemadeastartonyourwebsite,thencongratulations–welcometothecommunityofWordPresswebmasters!TheIn-DepthGuidewilltakeyourwebbuildingskillstothenextlevel.SeeyouinLesson9!

IN-DEPTHGUIDE–DRILLDOWNTOTHEWONDERSOFWORDPRESS

Lesson9.AddImagesToYourWordpressWebsiteWordPresshassomeverypowerfulandflexiblewaysofhandlingmediaonawebsiteand,inthislesson,wearegoingtolookatseveralwaysofdoingso

First,somebackgroundinformation.WordPressprovidesafolderwithinyourwebsitecalledthe‘MediaLibrary’(Figure9.1)whichcancontainimages,documents,downloadablefilesetc.Thisisthedepositoryofalloftheimages(andothermedia)thatyouhaveuploadedforuseinyourwebsite.

Mediafilesarelabeledeither‘Attached’or‘Unattached’,dependingonwhetherornotyouhaveactuallyusedthemediabylinkingtoitfromoneofyourpostsorpages.

Addingapictureintoapostorpagetoillustrateyourtextisonewayofmakingyourwebpagelookattractiveandrelevant.IfyouuploadthepicturewhenaddingapostorpageWordPressautomaticallyloadsitintotheMediaLibraryanditbecomesan‘attached’image.

Ifyouwanttoaddanimageforuselater,youcanuploaditdirectlyintotheMediaLibraryasan‘unattached’imageandthencallitwheneveryouwantit.

Toaddanimagetoapageorpost,youneedtohavetheimagefilestoredonyourcomputerasaJPEG,GIForPNGfiletype,sizedinpixelsthatwillfitonyourpageandgenerallylessthan8megabytesinsize.

WordPressisquiteflexibleinhandlingimagesandwillhappilyresizeyourpicturetofittheavailablespaceinapostorpage.Butit’sworthjustcheckingoutthedefaultsettingsforimagesizesbecauseyourwebsitewilllookmoreprofessionalifyoupresentyour

imagesinconsistentshapesandsizes.

Todothis,fromthedashboard,goto‘Settings’,‘Media’(Figure9.2)andcheckoutthepixeldimensionsthatWordPresswillusewhendisplayingyourpictures.Thestandard‘medium’sizeismaximum300pixelsheightandwidth.Ifyourthemeiswiderthanabout1000pixelsyoumaywanttoincreasethisto400or500pixelstodisplayyourimageslarger.

IfyouchangetheMediaSettingsbeawarethatthesettingswillapplyonlytoimagesyouinsertafterthis:WordPresswon’tretrospectivelyapplythesettingstoanyimagesyouhavealreadyinsertedonpostsorpages.

AddAPictureToAPostOrPageToaddanimagetoapostorpage,firstclickonthepointinyourtextwhereyouwanttheimagetoappear.Thiscanbeanywherewithinthetext:rightatthebeginning,orinthemiddleofatextblockoraftertheend.Theimagewillbeembeddedexactlyatthepointyouselecthere.

Thenclickonthebuttonlabeled‘AddMedia’.Apop-upboxappears,promptingyoutolocatethefileyouwanttoupload.You’llseethattherearetwotabs,‘UploadFiles’and‘MediaLibrary’.Clickon‘UploadFiles’ifthisisnotalreadydisplayed.

AsyoucanseefromFigure9.3,youcanactuallydraganddropthefile(s)youwanttoinsertbutI’lldemonstratethealternative,whichistouploadfromyourcomputer.

Clickon‘SelectFiles’andnavigatetowhereyouhavestoredtheimageonyourcomputer.Clickonthefileyouwanttoupload,andthenclick‘Open’.AscreenasinFigure9.4appears:

HereyoucanseethatthescreendisplaysalltheimagesIhavealreadyuploadedtomyMediaLibrary,withthelatestonecheckedontheleftandthe‘AttachmentDetails’forthelatestimageontheright.

Nowyoucanenterthetitleoftheimage,optionallyacaption,alttext(alternativetexttodisplayondevicesthatdon’tdisplayimages)anddescription.Enteringdescriptivedetailsintheseboxeswillhelpthesearchenginesindexandclassifyyourimagesandrelatethemtothetextthatyouenterinyourpostsandpages.

Beneaththisisthe‘AttachmentDisplaySettings’.Hereyoucanspecifythealignmentoftheimage–left,right,centerornone.Iencourageyoutoexperimentwithalignments

becauseyoucangetsomeverystrikingeffectswiththerightimageintherightplace.

Youwillalsoseethatthereisa‘LinkTo’box.Thisiswherethevisitorwouldbetakeniftheyclickedontheimage.Youcanchangethislinktoanythingyoulike:ifthiswasaproductyouweresellingyoumightreplacethiswithalinktoyourorderpage.

Ifyouleavethe‘LinkURL’unchangedandthevisitorclicksontheimagetheywillseeafull-pixelversionoftheimageontheirscreen.Ifyoudon’twanttheimagetobealinkthenclickon‘None’.

Finally,youcanchoosethesizeoftheimagewithinthepostorpage.Youroptionsherearedeterminedbythesettingsyouspecifiedearlierinthislesson.Again,experimentwiththistogettheeffectsthatyouwantforyourwebsite.

Thenclickon‘InsertintoPost’andFigure9.5showswhatthepagewilllooklike:

Nowlet’shavealookatuploadingimagesdirectlyintotheMediaLibraryforuselater.

AddAMediaFileToTheMediaLibrarySometimesyouwillwanttoaddanimage(orsomeothermedia)tobedisplayedsomewhereonyourwebsiteotherthanapostorapage.Inthatcase,youneedtouploadittotheMediaLibrarybeforeyoucanuseit.

Forexample,IhaveagraphicfileonmycomputerthatisactuallyalittlebannerthatIwanttoplaceinmysidebartoadvertiseaproductthatIwanttopromoteonmywebsite.IwillcoverhowgettheimageintothesidebarinLesson11buthereI’llbrieflyshowyouhowtouploadtheimagetotheMediaLibrary:

Fromthedashboard,clickon‘Media’/‘AddNew’.

Clickon‘SelectFiles’anduploadtheimageasbefore.

Asbefore,itisgoodpracticetoenteratitle,alternatetextanddescription,whichwillhelpwithSEO(seeLesson18)thenclickon‘Saveallchanges’.That’sit.ThefileisnowstoredonyourWordPressMediaLibrary,readyforwhenyouneedit.

AddAFeaturedImageThisisarelativelynewWordPressfacilitywhichletsyouassociateanimagewithapostorpage.Atthetimeofwriting,featuredimagesarenotusedineverythemeanddifferentthemesusethemindifferentways.However,TwentyTwelvedoesusefeaturedimagesandthisishowtousethem:

Essentially,thefeaturedimagefacilityinTwentyTwelveenablesyoutoinsertanimageabovethepost/pagetitleandbelowtheheaderimage(ifpresent)andsitetitle.Ifyoudonothaveaheaderimageforyoursiteandyouuploadasimilar-sizedimage(960pxx250px)asafeaturedimagetoapostorpage,itwilleffectivelybecometheheaderforthatpost/pageonly.

Inthescreenwhereyouaddorupdateapostorpage,youwillseeatthebottomoftheright-handmenuaboxlabeled‘FeaturedImage’.Click‘Setfeaturedimage’andyouwillbetakentoascreensimilartotheonesillustratedabove,whereyoucaneitheruploadanimageoruseonefromyourMediaLibrary.Clickon‘Setfeaturedimage’andyouwillseetheimagethumbnailappearonyourpost/page.That’sall–save/updateyourpost/pagebutdonotinsertthesameimageintoyourpost/pageoritwilldisplaytwice!

Whenyouviewthepageyouwillseeyourimageatthetop.

AddAPictureGalleryIfyouareaphotographeroranartistoranyonewhowantstodisplayalotofpictures,youmightwanttoaddagalleryofpicturestoapageorpost.A‘gallery’isawayofdisplayingthumbnailsofimagesonapageinarectangulargridandwhenavisitorclicksonanimagetheycanseeitfullsize.

Inthiscase,itispreferabletopreparetheimagesfirstonyourowncomputer,sothattheyareallthesameorientationandsize(inpixeldimensions).Thatwaythegallerydisplaywilllookprofessional.

Beforeaddingagalleryyoushoulddecidewhatsizeyouwanttodisplaythumbnailimages.Bydefault,thethumbnailswillbe150pixelsx150pixels.Butyoucanchangethisbygoingfromthedashboardto‘Settings’,‘Media’.ThiswilldisplaytheMediaSettingsscreenandyoucanchangethedimensionsofhowWordPresswilldisplaythumbnailimagesonyoursite.

Then,fromthepageorpostwhereyouwanttodisplaythegallery,clickonthe‘AddMedia’buttonasbefore,butthistimeselectmultiplefilestoupload.YouwillseeWordPressuploadthemoneatatimetotheMediaLibrary.

Makesurethatallthepicturesyouwantarecheckedandthenclick‘CreateGallery’overonthetopleftofthescreen.Thenclick‘Createanewgallery’inthebottomrightofthebox,then‘InsertGallery’.Thebigbluegalleryiconwillbedisplayed.Youcanaddtextbeforeorafterthisicon.

ThenSaveorPublishyourpostorpageandyoucanthenviewthepagetoseethegallery,asinFigure9.6:

Asyoucanimaginefromwhatyou’veseen,thereareactuallyagreatmanyoptionsfordisplayingimagesandothermediainWordPress,someofwhichareratherspecializedandwouldbeofinteresttopeoplelikephotographersandgraphicartistsetc.

Also,thereareanumberofveryfancypluginsyoucanusetodisplayimagesinaslideshoworgallerythatgowaybeyondthebasicfacilitiesshownhere.Andsomethemesoffera‘slider’functionthatcanincludesomeverydramaticeffects.

___

InthislessonIhaveshownthebasicmethodsofaddingimagesandmediathatyouaremostlikelytouseinaregularwebsite.Asever,Iencourageyoutoexploretheoptionsfurtherforyourselfifyouwanttobeabitmoreadventurous.

FAQIaddedanimagetomypostbuthowcanImoveittoadifferentposition?

Inthe‘EditPost’page,clickontheimagethatyouwanttomoveanddragittowhereyouwantit.Ifthatdoesn’twork,clickontheimageandthenclickonthesmall‘EditImage’iconthatappearsinthefartopleftofthepicture.Thisdisplaysapop-upwhichallowsyoutoeditthealignment,link,title,captionetc.Makewhatchangesyouwantandthenclickthe‘Update’button.

Or,ifyouwanttostartover,clickontheimage,hitthedeletekeyonyourkeyboard,insertthecursorwhereyouwanttheimagetoappearinyourtextandinserttheimageover

again.

Thenclick‘Update’toupdatethepostorpage.

HowcanIgetoneofthosemovingslideshowsonmywebsite?

Thereareanumberofverygoodpluginsthatwilldisplayaslideshowofimagesanditisworthexperimentingwithseveraltofindtheonethatsuitsyou.Someslideshowpluginswilldisplaythegallery(seeabove)associatedwithapostorpagewhileotherswillrequireyoutouploadyourimagesseparately.OneslideshowpluginthatIcurrentlylikeiscalled‘PortfolioSlideshow’becauseitisrelativelyeasytosetupandthereisalsoalow-cost‘pro’versionofitavailable.SeeLesson15forhowtofindandinstallplugins.

Lesson10.AddAVideoToYourWebsiteVideosarenowapopularfeatureofmanywebsitesandWordPressmakesitquiteeasytoincludetheminpostsorpages.

ForreasonswhichIexplainintheFAQbelow,IdonotrecommendthatyouuploadvideostoyourMediaLibrary.Instead,IsuggestthatyouuploadthevideotoYouTube(oroneoftheotherwhite-listedvideo-sharingwebsites)andlinktoitfromyourwebsite.

WordPressnowprovidesaveryeasywaytodisplayavideoonyourwebsitefromthird-partyvideosites.Here’show.

Firstofall,findtheYouTube(orwherever)videothatyouwanttouse(yoursorsomeoneelse’s)andclickonit:

Inyourbrowser’smenubaryouwillseetheURLofyourchosenvideo.Itwilllooksomethinglikethis:

http://www.youtube.com/watch?v=UgZg_6oq3EU

CopythisURLtoyourclipboard.

Thengotothepostorpagewhereyouwanttodisplaythevideoand,onalineofitsown,pastetheURLofthevideojustwhereyouwantthevideotoappear.

Don’tmakethisintoahyperlink:justleaveitasalineinthetext.

WordPressknowsthatthisisanapprovedvideositeandwilltranslatetheURLintoan

embeddedvideo.Magic,orwhat?

WhenyouviewthepageitwilllooksomethinglikeFigure10.2:

Theframeofthevideoisshowninthecontentofthepost/pageandwhenthevisitorclicksonthe‘Play’buttonthesoundandpictureplaysfromYouTube.

FAQHowcanIaddavideothatIrecordedmyself?

ItispossibletoembedyourownvideofilesintoaWordPresswebsitebutyoudoneedtobeawarethatvideoscanbeverylargefilesandthereisafilesizelimitof8megabytesthatyoucanuploadviaWordPressintoyourMediaLibrary.Thisrestrictionseverelylimitsyouroptionsfordisplayingself-hostedvideos.

And,becausevideofilesareusuallyverylargeandeatupbandwidth,ifyouhaveabasichostingplanyoumayfindthatyourhostingproviderwillwanttochargeyouextraifyouwanttohostyourownvideosonyourownwebsite.

TheeasiestwaytoshowvideosonyoursiteistouploadthefiletoYouTubeorFlickr(oranyofthemanyotherfreevideohostingsites)andusethecodethattheyprovide(as

exampleshownabove)toembedthefileintoyourpostorpageasshownabove.ButifyoureallydoneedcommercialvideohostingthereisalwaysAmazonWebServices(aws.amazon.com)who,forafee,willprovideapowerfulvideoservingfacilitythatisusedbymanyoftop-namewebmasters.

Ifyoudon’twanttodoitthiswayandyourfilesizeislessthan8mbthenIsuggestyousearchforpluginsthatwilldothejob(seeLesson15).Iwon’trecommendanyparticularpluginbecausetherearenewonescomingoutallthetimeandtheyalldifferinwhattheycandoandhow.Butspendsometimeexperimentingwithpluginsuntilyoufindwhatyouwant.

BeawarethatyoumayneedtouseHTMLtodothisjobandsoyoushouldalsostudyLesson19whereIshowyouhowtodothis.

___

Inthenextlessonwe’llbelookingathowtoenhanceyourwebsitewithtextwidgets.Thiscoolfeaturegivesyouendlessoptionsofaddingmorefunctionalityandmakingyoursiteunique.

Lesson11.ThePowerOfTextWidgetsWelookedatthebasicsofWidgetsinLesson8butthereareanumberofotherthingsyoucandowithwidgetsthatwillprovidemuchmorefunctionality.

Thebestwaytoseewhatwidgetsingeneralcandoistoexperimentwiththeoptionsavailable(fromthedashboard,click‘Appearance’,‘Widgets’…)andviewtheresults.Asbefore,allyouusuallyhavetodoisdragthewidgetintotheappropriateareaonthesidebar,configuretheoptionsandsaveit.Ifyoudon’tlikeit,youcandeleteit.

ButthereisonewidgetthatwillprovidealmostendlessvariationsandpossibilitiesandthatistheTextWidget.

Basically,thetextwidgetenablesyoutoinserttextintoyoursidebarorotherareasofyourwebsite,butthegoodnewsisthatthetextcanalsobecomputercode:HTMLandJavaScriptinparticular,insteadofsimplyplaintext.WhenWordPressseesthatthetextisactuallycomputercode,itexecutesitandrenderstheresultswhereyouhaveplacedthetextwidget.

Thisfacilitycan,forexample,enableyoutodisplaygraphicsandadsinyoursidebarandhereI’llshowyouhow.

AddAnImageUsingATextWidgetThereisn’t,asyet,asimpleWordPresswidgetthatletsyouplaceapictureinthesidebarbutitcanbedoneeasilyenoughwithabitofHTML.ThisexamplewillincludeaneasypieceofHTMLcodethatyoucancopyandeditintoatextwidgetthatwillplaceagraphicinyourownsite.

ThefirstthingyouneedtodoisuploadtheimagefiletoyourMediaLibrary(seeLesson9)andcopytheFileURLoftheimagefiletoyourclipboard.

TheeasiestwaytoconstructtheHTMLforthistotypeitintoatexteditorsuchasNotePad.Sotypethispieceoftext(exactly!)intoNotePad:

<imgsrc=““/>

andthenplaceyourcursorbetweenthetwoquotationmarksandpastetheFileURLyoujustcopiedtotheclipboardintothatspace.Thisiswhatthislookslikeformychickenkeepingsite:

<imgsrc=“http://1.keepingchickens.net/wpcontent/uploads/2012/01/keepingchickens.jpg”/>

Now,goto‘Appearance’,‘Widgets’anddragatextwidgettothesidebarwhereyouwanttodisplaythatfile.ThencopyandpastethesnippetofNotePadtextintothetextwidget,‘Save’and‘Close’.

Viewyoursitetoseetheresults.Figure11.1showswhatmysitenowlookslike,withalittlegraphicimageinthesidebar:

UseATextWidgetToDisplayABannerAdOneofthingsthatwebmastersliketodoistousespaceontheirwebsitetoadvertiseproducts,eithertheirownorsomeoneelse’s.Theywanttoplaceasmallgraphic(a‘banner’)inthesidebaroftheirwebsitewhichisclickable,andwhichwillsendthevisitorthroughtoasalesororderpage.

Ifyouareadvertisingathird-partyproduct,themerchantoragentwilloftenprovidethecompletecodetodisplaythead.AllyouhavetodoistocopyandpasteitintoaTextwidget,asinthepreviousexample.Thenclick‘Save’and‘Close’andthebannerwilldisplaywhereyouplacedit.

Butwhatiftheproductorserviceyouareadvertisingisyourown,ortheadvertiserwantsyoutohosttheirgraphiconyourwebsite?

Advertiserssometimesdothisbecauseitsavesthembandwidth.Whatyouneedtodointhiscaseistodownloadthebannergraphicfromtheirwebsiteanduploadittoyoursite’sMediaLibrary(seeLesson9).

Themethodofdisplayingthebannergraphicisthesameasthepreviousexamplebutthedifferenceisthatyouwanttheimagetobe‘clickable’,thatis,thecodemustincludealink.

Iwillillustratethisbyactuallymakingtheimageonmywebsiteaclickablelink.I’llmakethetargetofthelinkasalespageofaproductthatmyvisitorcouldbuy.

TheadvertisershavegivenmetheURLofthelinkIneedtousetodirectthevisitortotheirsalespage.

TheoutlineHTMLcodetodisplayaclickableimagelookslikethis:

<ahref=““><imgsrc=““/></a>

InbetweenthefirstsetofquotationmarksyouneedtopastetheURLofthewebpagewhereyouwanttosendyourvisitorswhentheyclickontheimage.BetweenthesecondsetofquotationmarkspastetheFileURLoftheimageinyourMediaLibrary.

So,theHTMLforthisonmychickenkeepingsiteis:

<ahref=“http://tuetwo.chickcoop.hop.clickbank.net”><imgsrc=“http://1.keepingchickens.net/wpcontent/uploads/2012/01/keepingchickens.jpg”/></a>

ThisisillustratedinFigure11.2:

Ileaveyoutoplayaroundandexperimentwithtextwidgetsonyourwebsite.Allyouhavetodo(inmostcases)istodraganddropthewidgetintoyoursidebar,‘Save’and‘Close’.

FAQHowdoIshowGoogleAdsenseadsinmysidebar?

AdSenseadsarethelittlethechunksofcodelinksyouseeonmanywebsiteswhichadvertisegoodsandservicesavailablefromthirdparties.ThisisaprogramrunbyGooglewherepeoplepaythemtodisplayadsandGooglepayswebpublishers(you!)todisplaythem.

YouhavetosignupwithGoogleasanAdSensepublisherandthenyouareallowedtodisplayAdSenseadsonyoursiteand(hopefully)getpaidfordoingso.

YouhavetohaveacompletedwebsitewhichisgettingsometrafficbeforeGooglewillallowyoutosignuptoAdSense.Butonceacceptedyoucandisplayadsonanysiteregisteredtoyou.

GoogleprovidessnippetsofJavascriptcodeforyoutodisplaytextandimageadsinvariousshapesandsizes,dependingonwhereonyoursiteyouwanttodisplaytheads.A‘skyscraper’orothernarrowverticalformatwouldbesuitableforasidebar.

Draganddropatextwidgetintoyoursidebar(oranywhereelseyouwanttodisplayads),copytheJavascriptcodeandpasteitintothetextwidget.Thenclick‘Save’and‘Close’.Googlethendisplaysadsrelatedtothecontentofthepageitisdisplayedon.

___

Nowlet’sgetontoanothervitalelementofasuccessfulWordPresswebsite:CustomMenus.

Lesson12.CustomMenusAndWhyYouShouldUseThemCustomMenusarearelativelynewfeatureofWordPressbuttheyaddalotofflexibilityandpowertothedesignofaWordPresswebsite.

WhatIsACustomMenu?Ifyoulookatmostwebsitesyouwillseethattheyhavesomewherearowoftabswhichconsistoflinkstopagesorareaswithinthesite.Thisrowoftabsiscalleda‘menu’.

AsshowninFigure12.1,menusareofteninaprominentpositionatthetopofthepageandtheirlabelsprovidecluesastowhereyouwillbetakenifyouclickonthem.

BeforeCustomMenuswereintroduced,WordPresswouldautomaticallycreateamenufromallofthepagesinyourwebsiteand,everytimeyouaddedapage,anothertabwouldbeaddedtothemenu.Themenuwouldbedisplayedwhereverthethemeplacedit,usuallysomewhereacrossthetopofthepage.

Theproblemwasthat,ifyouhadalotofpages(orpageswithlongtitles),yourmenuwouldbecomeverycrowdedandcouldevenconfuseyourvisitors.

Bydefault,thisishowWordPresswillstillbehave.IfyouhaveonlyafewpagesinyourwebsitethenmaybethisissufficientandyoumaynotneedtohaveCustomMenus.

Butifyouwanttochoosewhatgoesinyourmenuand/ordecidewhethertohavemorethanonemenu,thenyoushouldmakeuseofcustommenus.

HowToCreateAPrimaryMenu

A‘PrimaryMenu’isonethatyourthemehasalreadyconfiguredintoitsdesign.TheTwentyTwelvethemehasbuilttheprimarymenuintothehorizontalmenubaratthetopofthepage,asshowninFigure12.2.Otherthemesmaydesignatetheprimarymenuaslinksorbuttonsdowntherightorleftsidebar,orelsewhereonthesite.

Toconstructyourprimarymenu,fromthedashboard,clickon‘Appearance’,‘Menus’.Intheboxlabeled‘MenuName’typeanameforthemenu(itdoesn’tmatterwhatthenameis)andclick‘CreateMenu’.I’vecreatedamenucalled‘blank’inFigure12.3:

Youcanseethatthereareanumberofoptionsherethatmakethisaverypowerfulfeature:

‘CustomLinks’arelinkstoanywhereyoulike:apage,postorevenapictureinsideyoursite,oralinktoanotherwebsite.TypethefullURLofthelocationyouwanttolinkto,enterthe‘Label’,whichisthetextthatwillappearonthemenutabandclick‘AddtoMenu’.Youcanaddasmanyoftheseasyouliketothemenu.

‘Pages’enablesyoutopickandchoosefromthepagesyouhavesofarpublished.Thebeautyofthisoptionisthatyoucanputsomepagesinonemenuandsomeinanotherandyoucanalsoorderthemhoweveryouwant.Checkthepagesthatyouwanttoincludeonthismenuandclick‘AddtoMenu’.

‘Categories’referstothecategoriesrecordedonPosts.Ifyourwebsiteconsistsmostlyofpostsyoucanhaveamenuthatenablesyourusertobrowseselected

categoriesfromyourmenu.

Asyoucansee,youhavetochecktheitemsthatyouwanttoincludeonthemenuandclick‘AddtoMenu’.Youcanmixandmatchthedifferenttypesofmenuitemsinonemenuifyoulike.

Ifyouwant,youcanalsochangethe‘NavigationLabel’toadifferenttitlethantheonethatwouldappearasdefault.Expandthemenuitembyclickingonthedownarrowtoseetheboxwhereyoucandothis.

Theitemswithinthemenucanbedraggedanddroppedintotheorderyouwantthemtoappear,andanotherneatoptionisthat,ifyouhavealotofitemsinthemenu,youcanarrangethemintoahierarchybysimplydraggingpagesslightlytotherightandtheywillnestbeneaththeonesabove.

Whenthemenuitemsareassembledhowyouwant,justclick‘SaveMenu’andit’sdone.

NowyoumusttellWordPressthatyouwantthismenutoappearasyoursite’s‘PrimaryNavigation’which,inthecaseoftheTwentyTwelvetheme,ishorizontallyacrossthetopofthepage.Under‘ThemeLocations’,selectthemenuthatyoujustcreatedfromthedrop-downlistandclickon‘Save’.

HowToCreateASecondaryCustomMenuInadditiontothePrimaryMenu,youcancreateasecondarymenu(andadditionalmenus)thatyoucandisplayinthesidebarorotherareasofyoursite.Whenyouhavealotofpages,orcategories,orotherdestinationswhereyouwanttosendyourvisitors,thiscanbeausefulwayofdividingthenavigationofyoursiteintomoremeaningfulsections.

Forexample,youcouldhavethemoreimportantandinterestingpagesinthePrimaryMenuupatthetopbutother,lessimportant,pagessuchasPrivacyPolicy,TermsofService,andSiteMapasasecondarymenuinlessvisiblelocationssuchasthesidebarorfront-pagefooter(seeLesson13).

TocreateanotherCustomMenu,fromthedashboard,click‘Appearance’,‘Menu’andclickthetabmarkedwitha+atthetopofthescreen.(SeeFigure12.3)

Thenenteranothermenuname,asbefore,andclick‘CreateMenu’.Youcanthenpopulatethatmenuwiththepages,CustomLinksorcategoriesthatyouwantandclick‘SaveMenu’.

PositionYourCustomMenusUsingWidgetsWhenyouhavecreatedasecondarycustommenuyoucanpositionitwhereyouwantitbyusingthe‘CustomMenu’widget.

Todothis,fromthedashboard,click‘Appearance’,‘Widgets’anddragaCustomMenuwidgetintothesidebarorotherwidgetareaprovidedbyyourtheme,asshowninFigure12.4:

Selectthemenutoappearinthatspaceandthenclick‘Save’.

Asyoucanimagine,thepossiblecombinationsandvariationsonhowyoucanusethisareendless.

___

IhopeIhavedemonstratedsomeofthewaysyoucanuseCustomMenus,butyoucanexperimentforyourselfanddiscoverhowyoucanusethisfeaturetomakeyourwebsitelookandbehavethewayyouwant.

FAQHelp-Ihavejustchangedthethemeonmywebsiteandmycustommenuhasdisappeared!What’shappened?

First,youneedtocheckthatyournewthemeactuallysupportscustommenus.Mostup-to-datethemesdo,buttheremaybeafewwhohaveyettocatchupwiththisrecentfeature.

Ifyourthemedoessupportcustommenusthenreadon.WhenyouchangeyourWordPressthemethenewthememaynotautomaticallyregisterthatyouhavesetupacustommenusoyouhavere-settheprimarymenu.

Fromthedashboard,click‘Appearance’,‘Menus’,‘ThemeLocations’.Selectyourprimarymenufromthedrop-downlistandclickon‘Save’.Thattellsthethemethatyoudohaveacustommenuanditshouldthendisplayit,asrequired.

Lesson13.SetTheHomePageOfYourWordpressWebsiteOneofthedifferencesbetweenbuildingaWordPresswebsiteandcreatingoneusingtraditionalHTML-typetoolsisthatWordPressletsyouchoosewhichpageyouwantasyourfront(home)page.Thisisthefirstpagethatvisitorswillseewhentheylandonyourdomain.

Traditionalwebmasterssometimeshavedifficultygettingtheirheadaroundthis:ifyouareoneofthem,justforgeteverythingyoueverknewaboutindex.html…

Bydefault,WordPresswillchoosetodisplayyourlatestposts.Thisisfineifyouhavea‘journal’or‘latestnews’or‘blog’typeofwebsite.Ifyouleaveitasthedefaultorifyouchoose‘yourlatestpost’,yourfrontpagewillbeupdatedeverytimeyouaddanotherpost.ThiswashowitworkedwhenWordPresswas(andstillis)usedforatraditionalblog.

Butifyouwantastaticpageasyourfrontpageyouhavetosaywhichpageyouwant.

SetAnExistingPageAsYourHomePageTosetyourfrontpage,fromthedashboard,click‘Settings’,‘Reading’.

Tosetanexisting(static)pageasyourfrontpage,clicktheappropriateradiobuttonasshowninFigure13.1,selecttherequiredpagefromthedrop-downboxandclick‘SaveChanges’.Thispagewillthenbecomeyourhomepage.Notethatifyouhaven’tcreatedthispageyet,itwon’tappearinthedrop-down!

2012FrontPageTemplateThe2012WordPressthemeprovidesanoptionalspecialtemplateforyoutouseforyourfrontpage.Thisdoesnothaveasidebarbutinsteadhastwoseparatefooterwidgetareasbeneaththemainarticleonthepage.

Whatthismeansisthatyoucould,forexample,constructa‘welcome’-typepageandthen

showasub-setofnavigationlinksinthetwolowerwidgetareas.Youcanthenleadyourvisitorintotheareasofthesitethatyouwouldlikethemtovisitfirst.IhavedonethisonthefrontpageofmychickenkeepingsiteasshowninFigure13.2:

GroupYourPostsOnToTheirOwnPageThere’salsoanotheroptional,handyfeaturethatIliketomakeuseof.Ifyousetastaticpageasyourfrontpagethenyoucanhaveallyourpostsgroupedtogetheronanother‘container’pagewhichcanthenappearasatabonthemenubar.Thismeansthatyoudon’tthenneedtohaveawidgetinthesidebartoshowthelatestposts.

Todothis,justcreateablankpagewiththeheadingyouwantasitstitleandpublishit,eitherasablankpageormaybeasmallamountoftextasanintroduction.

Youcould,forexample,createablankpagewiththetitle‘News’or‘Blog’orsomethingequivalent.Then,on‘Settings’,‘Reading’,selectthatpagefromthe‘Postspage’drop-downbox.ThisisillustratedinFigure13.1.

Then,wheneveryouaddapost,itwillautomaticallybeaddedtothatpage.

SetTheNumberOfPostsToScrollWheneveryouaddanotherposttoyourwebsite,bydefault,thelatestpostwilloccupythespaceatthetopofthepostspageandallolderpostswillscrolldownbeneathit.Becauseofthisitisagoodideatodecidejusthowmanypostsyouwanttoseescrollingdownthepage.Ifyouwantyourwebsitetolookmorelikeaconventionalwebsitemaybeonewillbeenough.WordPressinitiallysetsthisnumbertotenwhichisprobablytoomanyformostpurposes.

So,tosetthenumberofpostsperpageview,fromthedashboard,clickon‘Settings,‘Reading’andsettheindicatorlabeled‘Blogpagesshowatmost’tothenumberofpostsyouwanttoseeonthepage.

Again,thisisillustratedinFigure13.1whereyoucanseethatIhavesetmy‘News’pagetodisplaythreeposts.

Thissettingwillbeappliedwhetherornotyouhaveastaticfrontpage.

Whenyou’redone,clickon‘SaveChanges’.

SetAStickyPostAnotherusefulfeatureofpostsisthatyoucandesignateoneofyourpoststobe‘sticky’,whichmeansthatitwillalwaysappearaboveotherpostsofalaterdate.Thiscanbeveryhandyifthereissomepermanentinformationthatyoualwayswanttodisplay(‘HowToOrder’…)onthetopofyourfrontpagebuttohavelaterpostsscrollingbeneathit.

Tomakeapoststicky,onthePostpage,clickon‘Edit’nextto‘Visibility’andcheck‘stickthisposttothefrontpage’.Thenclick‘OK’,asshowninFigure13.3.

Whenyoupublishorupdatethepost,itwillalwaysappearonthefrontpageofyourposts.

FAQIwantafancyfrontpagewitharectangulargridshowingexcerptsandlinkstomysite’sfeaturedposts.HowcanIgetthat?

Youaretalkingaboutwhatisknownasa‘magazine’theme.Thisletsyouselectaparticularpagetemplatetouseonyoursite’shomepagewhichpresentsexcerptsand

thumbnailstoselectedposts.MagazinethemesusuallycomewithmanyoptionstoconfigureandcustomizehowyouwantthecontenttoappearandtheyoftenusesomeadvancedWordPressoptions.

TherearesomegoodfreemagazinethemesavailableonWordPress:checkoutBombax,PurelineandBirdSITE,althoughtherearemanymore.Ifyouwanttogodownthisroute,Irecommendthatyouexperimentwithfreethemestostartwithbecausetherecanbealearningcurveinworkingoutthebestwayforyoutodisplayyourparticularcontent.Whenyouknowwhatyouwantyoucaninvestigatesomeoftheavailablepremiummagazinethemeswhichcanprovidesometrulyimpressiveresults.

Lesson14.ChooseAndChangeYourWordpressThemeWordPressthemesarethedesigntemplatesthatdeterminetheappearanceofthewebsite.Therearehundreds(thousands?)offreethemestochoosefromandyoucan(usually)switchthethemequiteeasilyifyouchangeyourmindaboutwhatyouwant.

YoushouldbeawarethattheTwentyTwelvethemethatwehaveusedtoillustratethistutorialonlyoffersasub-setofthepossibleoptionsthatWordPressprovidestopresentyouronlinecontent.

Forexample,somethemesoffermorethanoneheaderwidget,othersprovideslidersandgalleries,andsomehavebuilt-infunctionslikeopt-inboxeswhileotherscanformatyourcontentinamagazine-likeview.

So,ifyouthinkthatyourrequirementsaretoocomplexforWordPresstorender,Iurgeyoutothinkagainandexploresomeofthemorefeature-richthemesthatsomeverycleverdesignershaveprovidedforyou.

WordPressoffersmanyfreethemesonitswebsitethatyoucaninstallwithafewclicksofthemouse.Othersareofferedbythirdparties,someforfreeandsomeforsale.

Youcancommissionaprofessionaltocreateauniquethemejustforyouoryoucanevencreateyourownthemesbytheuseofdrag-and-dropsoftwaresuchasArtisteer.

SeetheConclusionofthistutorialtofindoutwheretoreadmoreabouttheseoptions.

Buttoillustratethepossibilities,wearegoingtogototheWordPresssiteandpickafreetheme.

InstallAFreeWordpressThemeFromthedashboard,clickon‘Appearance’,‘Themes’andthenthe‘InstallThemes’tab.

You’llseeamenuwhereyoucansearchforavailablethemes:

Ifyouknowwhatshapeandcolorofthemeyouwant,thenclickontheappropriatecheckboxesandthenclickon‘FindThemes’toseewhatcomesup.

Alternatively,youcanbrowsethelatestoffers.Youcouldclickonthe‘Featured’tabbecausethesethemesareusuallyverystrikingandwilloftensuggestideasforhowyoumightbuildyoursite.

ThreefreethemesthatIcurrentlyuseare‘Responsive’(seeFigure14.1),‘Graphene’and‘Pageline’.TheseallgetverygoodreviewsfromtheirusersandtheyhavecleanandoriginaldesignsthatIhappentolike.Ifyouknowthenameofthethemeyouwantyoucansearchforitintheboxatthetopoftheabovescreen.

Whenyoufindathemethatyoulikethelookofyoucanclickon‘Preview’toseehowthethemewilllookonthescreen.Thiswillpopupinanewwindowwhichyoucanclosewhenyou’veseenenough.It’salsoagoodideatoclickonthe‘Details’linkstoseehowmanystarsthethemehasbeenawardedbyotherusers–themorethebetter.

Whenyou’vefoundathemethatyoulike,clickon‘Install’andthenon‘InstallNow’inthepop-upwindow.Thiswillautomaticallyuploadthethemetoyourwebsite.Youcannowpreviewthethemeagainasitwilllookonyourownwebsiteand,ifyoulikeit,click‘Activate’andyou’redone–you’vechangedthetheme.

YoucanchangethethemeofyourWordPresswebsiteasoftenasyoulike,butitisagoodideatodoyourexperimentingearlyoninthedevelopmentofyoursite.Whatyouideallywantistofindathemethatfitsthestyleandpersonalitythatyouwanttoportrayandthensettledownwhenyouarecomfortablewithit.Yourvisitorswillsooncometorecognizethelookandfeelofthewebsitewithyourparticularstyle.

Ifyouchangethethememorethanonceyouwillprobablyendupwithseveralnon-activethemefilesinthebackground.Youcan,ifyouwish,gobackandre-activateathemethatyou’vepreviouslyinstalled.But,whenyouknowthatyoudon’twanttomakeuseofa

previouslyinstalledtheme,it’sagoodideatosimplydeleteitbecauseitwilljustbetakingupspaceonyourwebhostingserver.

Afterinstallinganewtheme,havealookattheoptionsitgivesyouforchangingtheheader,widgets,colors,orwhatever.Thetheme’sauthormayprovidealinktotheirwebsitewhereyoucanfindoutmoreaboutthisthemeorothersthattheymayhaveonoffer.

InstallAThird-PartyThemeFromAZipFileIfyouhaveathemethatyouhaveobtainedfromathirdparty,youwilllikelyhavethethemefilesinaZIPfilesittingsomewhereonyourcomputer,inwhichcasedonotunzipit.

Toinstallazippedthemefromyourcomputer,fromthedashboard,clickon‘Appearance’,‘Themes’,‘InstallThemes’andthenclickonthe‘Upload’tab,asinFigure14.3:

Apop-upboxwillpromptyoutobrowseyourcomputertolocatetheZIPfileandwhenyouhavedoneso,clickon‘InstallNow’.ThethemeshouldthenuploadandinstallautomaticallyfromtheZIPfile.Activateit,asabove,andyou’redone.

___

OK,I’vemadeitlookprettysimpletochooseandchangeyourwebsite’stheme,butthereareoneortwoimportantprovisosthatyouneedtobeawareof.

Ifyouchooseathemeandthengoontodoalotofworkonyourwebsite(particularlywithwidgetsandmenus)andthendecidetochangeyourtheme,thenewthememaynotautomaticallypickupallyourcontentanddisplayithowyouwant.

Itmaybejustfine,butbeawarethatthisisapossibilityandyoumayhavetoreinstallyourwidgetsand/ormenus.Thisisnotusuallyabigdealbutitmayjustcauseabitofunexpectedwork.

WordPressissuesnewsoftwarereleasesfromtimetotimeandsometimesthesearemajorupgradeswhichrequireathemetobeupgradedaccordingly.Mostreputablethemedesignerskeeptheirthemesuptodatebutbeawarethatyoumaybeforcedtochangeyourthemeifyourdesigner’sthemegetsoutofsyncwiththelatestWordPressrelease.

FAQHowcanIdesignmyowntheme?

TodesignyourownthemeyouneedtobefairlycompetentatCSS,HTMLandPHP,nottomentiongraphicstechnologyandWordPress.So,toberealistic,itisn’teasyforabeginnertodesigntheirownWordPressthemes.

However,oneeasywayforanon-geektocreateauniqueWordPressthemeisviasoftwarethatletsusersdesignWordPressthemesusingaveryflexibletemplatewhichtheycanthentweakandpersonalizethemselves.IuseArtisteertodothisandIthoroughlyrecommendit.IttakesabitofpracticetoexploreallitspossibilitiesbutIuseitalottocreatemyown,uniquethemes.SeetheConclusiontofindoutmoredetailsofArtisteer.

What’sa‘childtheme’?

Childthemesareratherbeyondthescopeofthistutorial,butIwillbrieflyexplainwhattheyareandhowtheycanbecomeuseful.

Essentially,achildthemeenablesyoutocreateathemethatinheritsmostofitscharacteristicsfromanothertheme(the‘parent’theme)butwhichcontainsafewspecificchangesthatmakeitdifferentfromitsparent.Forexample,ifyouhaveaparentthemethathasasidebarontherightbutyouwantasidebarontheleft,youcancreateachildthemethatspecifiessidebarsontheleft.

Youdothisbycreatingasmallstylesheetfile(style.css)thatcontainsthechangesthatyouwanttooverridethecorrespondinglinesintheequivalentparenttheme’sstylesheet.

Theprincipleisthattheoriginalparentthemeremainsunchangedandcanbesubjecttoupdatesandenhancementsbutthechildtheme’sstylesheetwillalwaysbelinkedintotheparentandthechangeswillstillapplyatrun-time.

ThisisarelativelynewattributeofWordPressandtheirdevelopmentteamhasstatedthatchildthemeswillbecomemoreimportantasfutureWordPressupdatesoccur.Attheveryleast,itwillprobablymeanthattoolswillbecomeavailablefornon-techuserstotweakandpersonalizetheirthemeswithouthavingtoriskcompromisingthefunctionalityoftheunderlyingtheme.

So,watchoutformoreannouncementsfromWordPressaboutchildthemes.

Lesson15.ThePowerOfPlugins‘Plugins’isatermforacollectionofadditional(oftenfree)piecesofsoftwarethatprovideextrafunctionalityforWordPresswebsites.Thesearethe‘optionalextras’thatyoumay,ormaynot,needtomakeyourwebsitebehaveasyouwant.

Theyarecalled‘plugins’becausetheydoexactlythat:ifyouinstallastand-aloneplugin,WordPressdetectsthatit’sthereandmakestheconnectionwithitautomatically.Youmayhavetoconfigureafewparameterstotailorittoyourrequirements,butthat’sallyouhavetodo.

TherearethousandsofWordPresspluginsavailablebut,inthislesson,we’rejustgoingtoinstallafewoftheonesthatIconsideressential.Theyareallfree.Iwillexplainwhattheydoandhowtousethemaswegoalong.

First,I’llshowyouhowtoinstallpluginsingeneral.Then,I’lllistmyrecommendedpluginsandshowyouhowtoconfigurethem.

HowToInstallPluginsFromthedashboard,click‘Plugins’.YoushouldseethelistofcurrentlyinstalledpluginsasinFigure15.1:

Toinstallanyplugin,fromthedashboard,click‘Plugins’then‘AddNew’atthetopofthescreen.Youcanaccessthepluginsyouneedseveralwaysfromhere,butthequickestwayistoclickonthe‘Popular’tabandseewhatcomesup,asinFigure15.2.

Youwillprobablyseesomeoftherecommendedpluginsstraightaway.

Toinstallaplugin,allyouhavetodoisclickon‘InstallNow’onthatplugin’slistingandconfirmthatyoureallydowanttoinstalltheplugin.ThenWordPresstakesover,installsthepluginonyourwebsiteautomaticallyandthenallyouhavetodoisactivateit.

Youshouldrepeatthisstepforalltherecommendedpluginsthatyoucanfindonthefirstpageof‘Popular’.

Ifyoucan’tfindthepluginonthe‘Popular’page,thentheotherwayoflocatingapluginistosearchforit.Insteadofclickingon‘Popular’,usethe‘Search’boxonthe‘InstallPlugins’page.TypetheexacttitleofthepluginintotheSearchboxandclick‘SearchPlugins’.Youmaybepresentedwithmorethanonechoicesobesuretopicktheonethathastheexacttitle,andtheninstallthepluginasabove.

RecommendedPluginsSo,thepluginsIrecommendare:

GoogleXMLSitemaps

ThispopularpluginprovidesaGoogle-compliantsitemapforyourwebsite.

What’sasitemap?Well,itisafilecalledsitemap.xmlthatsitsinthebackgroundonyourwebsiteandwhichcontainsacompletelistofallyourwebsite’spagesandpostsanddocumentstheconnectionsbetweenthem.

Thesitemapfileisthereforthebenefitofthesearchengines,tohelpthemfindtheirwayaroundyoursiteandindexitaccordingly.Sitemapsarenotreallyforhumanvisitors!

MostprofessionalwebsiteshaveasitemapandthispluginisconsideredtobeessentialforeffectiveSEO.

Thepluginupdatesthesitemapautomaticallyeverytimeyouadd,deleteoreditsomething

so,onceinstalled,youdon’thavetodoathing.

AllInOneSEOPack

This,inmyopinion,isanotheressentialSEOplugin.Itprovidesallthefeaturesyouneedtooptimizeyoursite’spagestorankinthesearchenginesforyourchosenkeywords.

Whenyouinstallthe‘AllInOneSEOPack’pluginandactivateityouwillseearedwarningpromptatthetopofthescreenaskingyoutoconfiguretheplugin.Seebelowforinstructionsonhowtodothis.

ContactForm7

Havingsomewhereonyoursitewhereyourvisitorscancontactyouisconsideredgoodpracticeandmakesyoulookseriousandtrustworthyinyourcustomers’,andthesearchengines’,eyes.

Simplystickingupanemailaddressonyourwebsiteisnotagoodideabecauseitwillquicklybeharvestedbythespamphishersandyouremailaddresswillrapidlybecomeunusable.

Thispluginprovidesasecurewayforpeopletocontactyouprivatelyandwillprovidethecredibilityyouneedtopresentaprofessionalfacetotheworld.LaterinthislessonIwillshowyouhowtocreatea‘Contact’page.

___

OK,we’renearlydone.Justlet’sfinishbyconfiguringthepluginswejustinstalled.Iftheplugindoesn’tappearbelow,thenthegoodnewsisthatthere’snothingmoretodoonit!

ConfigureAllInOneSEOPackClickonthelinkontheredpromptmessageatthetopofyourwebsitepageandyou’llgettotheoptionspageforthisplugin,asshowninFigure15.3:

First,clicktheradiobuttonnexttoPluginStatus,‘Enabled’.Thenlookatthethreeboxes

belowentitled‘HomeTitle’,‘HomeDescription’and‘HomeKeywords’.Thesearetheboxesthattellthesearchengineswhatyoursiteisallabout.

Thetextyouenterherewillshowuponthesearchresultswhenyoursiteappearsontheirlistings.Figure15.3showswhatIenteredformywebsite.

Enteryourtextandscrolltothebottomofthepageandclick‘UpdateOptions’.Therearealotofothertechnicaloptionsavailableonthispageanditissafetoleavethedefaultsastheyare.

NowthatyouhaveinstalledthispluginyouwillnoticethatithasaddedsomesimilarboxestotheindividualPagesandPostsscreens:

Thefields‘Title’,‘Description’and‘Keywords’showninFigure15.4arewhatisknownintech-speakas‘meta-data’.Thisinformationgetscopiedtotheinvisiblebackgroundofyourwebpageandisprovidedsolelyforthesearchengines;yourhumanvisitorswillnotseethisinformation.

Itisgoodpracticetofilltheseeachtimeyouaddyourpagesandposts.IwillcoverthistopicagaininLesson18.

ConfigureContactForm7Fromthedashboard,click‘Plugins’andclick‘Settings’for‘ContactForm7’.

Thereisnothingreallytochangehere,butitwouldbeagoodideaforyoutocheckthattheemailaddressquotedonthispageistheemailyouwantyourmessagestobesentto.Thiswillnotappearonthecontactpageandwillnotbevisibletoanyoneotherthanyou.Ifnecessary,changethisemailaddressandthenclickon‘Save’.

Beforeleavingthepage,copytheshortcodeatthetopofthepage([contact-form-7id=“55”title=“Contactform1”])toyourclipboard.

AddAContactPage

Now,let’squicklyadda‘ContactUs’page.Fromthedashboard,click‘Pages’,‘AddNew’.Enteratitlesuchas‘ContactUs’andthenpastetheshortcodeyoujustcopiedintothebodyofthepage.Youcanaddsomesurroundingtextifyoulike,andthenclick‘Publish’.Easy–youjustgotyourselfa‘Contact’page.

Whileyouaregoingthroughthisexerciseyoumaywellseeotherpluginsthatlookinterestingandthatyouaretemptedtoinstall.Byallmeansexplorewhat’savailableandinstallmorepluginsifyoucanseeauseforthem.Myadvice,whenlookingforplugins,istochooseonlythosewiththreeormorestarsanddonotinstallapluginthathasnotbeentestedwiththeversionofWordPressthatyouareusing.

Youcanfindoutmoreaboutapluginbyclickingon‘Details’againstthatpluginonthe‘InstallPlugins’page.

___

Therearemany,manymorepluginsthatyoucanuseandIleaveyoutodiscoverandinstallthemyourself.ButaquickwordofadviceifthisisthefirstWordPresswebsiteyouhaveeverbuilt.Don’toverloadyourwebsitewithpluginsifyoucannotjustifythattheyarenecessaryforthefunctionalityofyoursite.

Pluginscanclutterupyoursiteandslowitdownandcan,fromtimetotime,conflictwithoneanother.And,aswiththemes,pluginscanbecomeoutofdateandcanstopworkingiftheplugin’sauthorhasnotkeptuptodatewiththecurrentversionofWordPress.So,takeitstepbystepandbealittleself-disciplinedinyouruseofplugins,atleastatfirst.

FAQWhatisthebestpluginforkeepingtrackofthenumberofvisitorstomywebsite?

‘GoogleAnalytics’isthesystemusedbymostprofessionalwebmastersandthisprovidesanextensivebreakdownofhowmanyvisitorsyoursiteattractsandwheretheycomefrom.

TouseAnalyticsyouneedtohaveaGoogleaccount(free,andeasytosetup)andyouhavetosignuptoAnalytics.Allthisisexplainedinhttp://www.google.com/analytics/.

WhenyouhaveaddedyourwebsitetoyourGoogleaccount,youareprovidedwithasnippetoftrackingcodewhichyouhavetoincludeonyourwebsite.ThisoperatesinthebackgroundandinvisiblymonitorsyourvisitorssothatGooglecanpresentyouwithadetailedbreakdownofyourwebsitetraffic.YoucanseethedailyresultsofthisbyloggingintoyourGoogleAnalyticsaccount.

TherearevariouspluginswhichenableyoutoaddthetrackingcodetoyourwebsiteandtheoneIcurrentlyfavoris‘GoogleAnalyticsforWordPress’.Searchforthispluginasexplainedabove,installitandcopyandpasteyourtrackingcodeasdirected.

Havingsaidallthis,whenyoufirstgetstartedGoogleAnalyticsmaynotbeveryusefulbecauseyoumaynotactuallybegettingmanyvisitors.So,youdon’tneedtorushintothisuntilyouhaveyoursiteupandrunning(say,afteramonthorso).

Lesson16.Comments:StartADialogueWithYourVisitorsYoumayrememberthat,inLesson5,Icautionedyouaboutallowingpeopletocommentonyourpostsandpagesbecauseofthenuisanceofspam.Leavingopentheopportunityforvisitorstoaddtheirowncontentcanturnyourwebsiteintoamagnetforspammersaroundtheworldtopostgarbageand,attimes,someseriouslyoffensivematerial.

EnableCommentsHowever,ifyouhaveagoodreasonforinvitingyourvisitorstoleavecommentsonyourwebsite,andifyouarepreparedtomoderateit,hereiswhatIrecommendyoudo:

Fromthedashboard,clickon‘Settings’,‘Discussion’andcheckthefollowingboxes:

Allowpeopletopostcommentsonnewarticles

Commentauthormustfilloutnameandemail

Anadministratormustalwaysapprovethecomment

Commentauthormusthaveapreviouslyapprovedcomment

AsyoucanseefromFigure16.1,thereareothersettingsonthatpagethatareself-explanatoryandyoucandecideforyourselfwhatelseyouwanttocheck.

Thenclick‘SaveChanges’.

That’sallyouneedtodoifyouwantacommentboxtoappearatthefootofeverypostandpage.Butyouwillprobablywanttobeabitmoreselectiveaboutwhichpagesyouactuallywanttoallowcommentson.Forexample,youprobablywouldn’twanttoinvitecommentsonyourContactpage.

Tosetupselectivecommenting,fromthedashboard,goto‘Pages’,‘AddNew’.Thenlookovertothetoprightofthescreenandclickonthearrownextto‘ScreenOptions’asinFigure16.2.

Whereitsays‘Showonscreen’makesurethe‘Discussion’boxischecked.

Whatthiswilldoistoadda‘Discussion’boxonthescreenwhereyouaddanewpage.Youcanthencheckoruncheckwhetheryouactuallywantacommentboxonthatpageatthetimethatyouaddorupdatethatpage.

DothesamewiththeScreenOptionsonthe‘Posts’,‘AddNew’.

ModerateCommentsToBanishSpammersNotethatIrecommendthatcommentsmustbeapprovedbeforeappearingonyourwebsite.

Thewaythisworksisthat,whensomeonepostsacommentviaapageorpostonyoursite,theadministrator(you!)willreceiveanemailinformingyouthatanewcommentisawaitingmoderation.

Youthenhavetoapprovethecommentbeforeitispublished.Whenyouapproveacommentitwillappearonthepagewhereitwasoriginallyposted.Butifthecommentisspamyoucanmarkitasspamanditwilldisappear.

Ifavisitorpostsacommentandyouapproveit,then,ifthatvisitorevervisitsyoursiteagainandusesthesameemailaddress,theycanpostanothercommentwhichwillbeautomaticallyapproved.That’sbecauseWordPressassumesthatyoutrustthisvisitorandthattheirfuturecommentsaregoingtobeOK.

Thisisgenerallytruebutafewpeopledoabusethissoit’sagoodideatojustkeepaneyeoncomments.Youcaneasilytrashanythatareunwelcome.

Moderatingcommentsyourselfwillprobablybeallyouneedtodointheearlydaysofyourwebsitebecausethevolumeofusercommentswilllikelybemanageable.Butwhatifthespammersfindyouandyouaresuddenlyoverwhelmedbyhundredsofspamcomments?

Theansweristouseaplugintofilterthecommentsbeforetheyevengetthroughtoyoursite.Theanti-spampluginsIuseandcanrecommendare:

Akismet

SpamFreeWordPress

GASP

Youwillonlyneedtouseoneofthesepluginstofilterspam.Akismetisthemostpopular(and,inmyopinion,themostreliable)butyouwillhavetopayasmalllicensefeeifyour

websiteisforcommercialpurposes,otherwiseitisfree.

Atthetimeofwriting,eachofthesepluginsisavailableandup-to-datebutIrecommendyoucheckthemalloutandselecttheonethatseemsmostappropriateforyou.Tofindoutmoreabouteachofthem,searchforthembynameasdescribedinLesson15.

FAQIfsomeonepostsacommentonmywebsite,canIpostmyownreplytothatcomment?

Yes.Youcan,ineffect,enterintoadialoguewithyourcommentingvisitors.Whenanyoneaddsacommenttoyoursiteandyouapproveit,a‘reply’linkwillappearalongsideit.Toenteryourownreplytothatcomment,displaythepost/pagewherethecommentappears,clickonthe‘reply’linkandanothercommentboxwillappearforyoutoaddyourreply.

Help-Ihavesetmysitetoallowcommentsbutno-onehaseveraddedacomment!WhatamIdoingwrong?

Relax–intheearlydaysofawebsiteyouwillprobablynotbegettingmanyvisitorsandthosewhodovisitmayjustbepassingby.Andevenwhenyoudogettraffic,inmostcasesonlyaverysmallpercentageofvisitorswillactivelycontributetheirowncomments.

Giveittime.Postregularlytoyoursiteandtrytobuilduparegularreadership.

Whynotaddsomecontroversialtopicandaskyourreaderstohavetheirsay?Youcouldeveninviteyourfriendstochipinandstartoffadiscussion.Justkeepatit!

Lesson17.UsersAndTheirCapabilitiesBydefault,WordPressassignstheroleof‘administrator’totheuser(you!)whocreatedtheWordPressinstallation.Theadministratoristhepersonwhohasthecapabilitytodoeverythingwiththewebsite–add,amend,deletepages,postsandmedia,changethetheme,setpasswords,installplugins,managewidgetsandaddordeleteotherusers–andmore.

Asauser,youhaveaprofile.Toseeyours,fromthedashboard,click‘Users’,‘AllUsers’andyouwillseeyourusernamelisted.Hoverthemouseoveryourusernameandclick‘Edit’whenitpopsup.You’llseealltheinformationthatWordPressknowsaboutyou,asshowninFigure17.1:

Youdon’thavetoaddanymoreinformationifyoudon’twanttobut,ifyoudo,someoftheinformationmaybevisibletovisitorstoyoursite.

Notethathere,atthebottomofthepage(Figure17.2),iswhereyoucanchangeyourpassword.ThisisthepasswordyouneedtologintotheWordPressdashboardandyoucanchangethiswheneveryouwantto.

Justtypeinthenewpassword(twice)andthenclickon‘UpdateProfile’.

Ifyouarethefounderofyourwebsiteandyouwillbetheonlypersonwhoeverworksonit,thenyoucannowsafelyskiptherestofthislesson.

Butiftherecouldbemorethanonepersonworkingonthesitethenyouwillneedtoknowhowtocreateotherusers.

AddAnotherUserToaddanotheruser,fromthedashboard,click‘Users’,‘AddNew’.Asyoucanseefromthescreen,thefieldsatthetopofthescreen(Username,E-mail,FirstName,LastNameetc.)areself-explanatory.Enterallyouneedtoidentifythatuser.Atthebottomofthescreenisadrop-downboxmarked‘Role’.ThiswilltellWordPresswhatthatuseris,andisnot,allowedtodoonthesite:

Administrator-somebodywhohasaccesstoalltheadministrationfeatures(thesameasyou!)

Editor-somebodywhocanpublishandmanagepostsandpagesaswellasmanageotherusers’posts,etc.

Author-somebodywhocanpublishandmanagetheirownposts

Contributor-somebodywhocanwriteandmanagetheirpostsbutnotpublishthem

Itisuptoyoutodecidehowtoallocatetheroleandcapabilitiesofeachusertosuityourorganizationandteam.

Whenallisfilledin,click‘AddNewUser’andyou’redone.ThatpersoncannowlogintotheWordPressdashboard(seeLesson3)withtheusernameandpasswordthatyouhaveassignedandwillbegiventhecapabilitiesthattherolepermits.

FAQIsetmyfriendupasauseronmywebsitesothathecouldbeacontributor,buthe’s

forgottenhispassword.HowcanIretrievethepasswordforhim?

Theeasiestwayforyoutodothisistosetanewpasswordforhimandhere’showtodoit.

Logintoyourwebsiteastheadministrator.Fromthedashboard,clickon‘Users’,‘AllUsers’,hoveroveryourfriend’snameandclickon‘Edit’.Scrolldownthepageandenteranewpassword(twice).Thenclick‘UpdateUser’.

Thenemailyourfriendwiththenewpasswordandtellhimnot,underanycircumstances,toforgetitagain…

Lesson18.SearchEngineOptimization(SEO)AsIhavementioned,SEOisahugetopicandisallabouthowtooptimizeyourwebsitetoattractvisitors.Thereisnopointinhavingastate-of-the-artwebsitewithallthebellsandwhistlesthatmakeitworklikeadreamifno-oneevervisitsit.

Soyouneedtraffic,whichisatechnicaltermforrealpeople,withrealeyeballs,eagertoviewthedelectablecontentyouhavepreparedforthem.

NowwhenwetalkaboutSEOwereallymeanoptimizingwebsitesfortheGooglesearchengine.Googleisn’ttheonlysearchenginebutitisthebiggest,andwhatGoogledoes,theothersfollow.

ThebasicproblemthatallwebmastersfaceisthatthereareliterallybillionsofwebsitesontheInternetallcompetingforattention.WhensomeonegoesontoGoogleandperformsasearch,theybeginbykeyinginsomesortofquery,forexample,‘howdoIkeepchickensinmybackyard’.

Googlechecksitsindexandinstantlydisplaystenresultsonthefirstpage,asinFigure18.1:

Iftheuserseeswhattheywantthey’llclickonasite.Iftheydon’t,theymightjustmoveovertothesecondpage,butrarelybeyondthat.So,ifyourwebsitedoesn’tshowuponthe

firstcoupleofpagesofthesearch,youareinvisible.

Now,wouldn’titbegreatifyourwebsitecouldappearonpageoneortwooftheGooglesearchresultswhensomeonetypesinaqueryapplicabletoyoursite?That’sreallywhatSEOisallabout.

Googlehastraditionallybeenquiteguardedabouthowtheydecidewhichwebsitesdeservetoappearprominentlyontheirsearchresults.Theirsearchalgorithmshavealwaysbeenoneofthebigtradesecretsofthisbilliondollarenterprise.

Butnowcannywebmastershaveeffectivelyreverse-engineeredthealgorithmsandfoundwaysofeffectively‘gaming’thesystemtotrickGoogle’scomputerrobots(thatwetechieshavedubbed‘spiders’)intoartificiallyboostingtheirsites.

Todealwiththis,Googleregularlyissuesnewversionsofitsalgorithmsandtheyhavelatelybeenabitmoreinformativeaboutwhatwewebmasterscanactuallydotopleasetheirmightyspiders.

So,whileIcannotgiveyoualltheinsiderintelligenceonhowtodefinitivelyoptimizeyourwebsite(nobodyoutsideofGooglecan),whatfollowshereisasummaryofthelatesttipsGooglehasnowmagnanimouslyreleased…

Firstly,whatIcantellyouisthatGooglelikesWordPresswebsitesbecausetheWordPressbehind-the-scenescodeforcesthesitetobeneatandtidy,withoutbrokeninternallinks,andwithaspider-friendlystructurethatmakesiteasyforthemtocrawlthesite.So,choosingWordPressisonebigplusforyou!

BasicWordpressSEOThesefewsimplestepswilloptimizeyourWordPresswebsitesothatGoogleandtheothersearchengineswillhaveeveryincentivetoindexyoursiteefficientlyandthushelpyouattracttargetedtraffic.Allthesetipsstartfromthedashboard:

‘Settings’,‘General’

‘SiteTitle’isveryimportant.AsshowninFigure18.2,itshouldcontain(preferablystartwith)themainkeywordthatyouwanttooptimizefor.Forexample,‘KeepingChickens’ismuchmorepreciseanddescriptivethan‘Joe’sBackyard’.

Onceyoursitebeginstoattracttrafficdon’tchangethisunlessthereisagoodreasontodoso.

‘Posts’/’Pages’,‘AddNew’

Thepostorpagetitleisalsoimportant.Again,thisshouldcontainoneofyoursite’smainkeywords.Makesurethatthepermalinkaccuratelyrecordsthat.Edititifitdoesn’t.

Thecontentofyourpost/pageshouldbeuniqueandshouldcontainasprinkleofwordsorphraseswhichhaveaconnectionorassociationwiththekeyword(s)inthepost/pagetitle.Themainkeyword(s)shouldbeincludedinthetextafewtimesbutnottoanexaggeratedextent.

OneofthelatestfeaturesthatGooglelooksforiswhetheryourpageisusefulandinteresting.Oneofthewaysitmeasuresthisisbylookingathowlongyourvisitorstaysonthepage,howmanypagesofyourwebsitetheyreadandwhethertheysharethecontentwithothers.IfpeopletweetorlikeorshareyourwebpagesonsocialnetworkingsiteslikeTwitterandFacebookthenthatboostsGoogle’sapproval.

Googlealsolikestoseethemainbodyofyourtextabovethefold.Thismeansthattheuserneednothavetoscrolldownthepagetofindanythingreadable.Ifthetophalfofyourpageistakenupwithadsthenthat’sadowner.

Googlealsolikesthetexttobegrammaticallycorrectwithnotyposorspellingerrors.

Ifyouhavealongarticleonyourpost-pageyoushouldconsiderusingsub-headings,againcontainingoneofyourkeywords.Usethedrop-down‘Paragraph’boxtoformatsubheadingsas‘h3’(noth1orh2whichyourthememightuseforotherpurposes).

Ifyouhaveanimageembeddedinyourtext,addyourkeyword(s)totheimagetitle,description,alternatetextand,optionally,caption.

InthecaseofPosts,useoneormorerelevantcategoriesandaddtwoorthreekeywordstoPostTags.

Rememberthatyouhavetodotwothingswhenwritingyourpostsandpages.Youmust

communicateeffectivelynotonlywithyourhumanvisitorsbutalsotothecomputerrobots(spiders)thattrytoworkoutwhatitisthatyouaretalkingabout.

AllinOneSEOPackplugin

ThispluginisimportantforSEObecauseitspecificallyaddswhatisknownas‘metadata’totheinternalcodingofyoursite.Thisisnotvisibleonthepagetohumanvisitorsbutit’sthere,behindthescenes,forthespiderstogobbleup.

Intheplugin’sboxesonthePagesandPostspages(SeeFigure15.4inLesson15),enterthepost/pagetitle,asummaryofthepost/pagecontentinthedescriptionandthreeorfourkeywords.The‘description’boxisthetextwhichwillbedisplayedbythesearchenginesonthesearchresultspage(seeFigure18.1)soyouneedtowritethisinplainlanguage,withkeyword(s)appearingnaturallyinthetextand,preferably,acalltoaction.(‘Findouthowtobuildachickencoophere!’)

IfyouwanttoknowmoreaboutthispluginandthewaysinwhichitcanhelpwithyourSEOhavealookatthedocumentationprovidedontheplugin’swebsite.

___

That’sthebasicsfrommeonthistopic,butIencourageyoutoexploremoreforyourselfbecauseSEOisimportantforallwebmasterstounderstand.

FAQWhat’sa‘keyword’?

AkeywordisoneormorewordsthatmighttriggeramatchintheGoogleSearchEnginedatabase.

Here’showthisworks.Whenyoufirstbuildyourwebsite,Google(andalltheothersearchengines)findyourwebsiteandtheirsoftwarerobotsread(‘crawl’)thewordsoneachpage,especiallytheheadingsandanythingyou’vemadeapointofemphasizing.ThebotsignoretheentireHTMLandtechnicalstuff–allthey’reinterestedinistheactualwordsthatyouhavewritteninyourpagesandposts.

TheydeliverthisdatabacktoGoogle’sindexingsoftwarewhichthenanalyseswhatyou’vewrittenanddecideswhatyourwebsiteisallabout.Thisisverypowerfulsoftwareanditgenerallydoesaprettygoodjobofimpersonatingahumanreader.

Googlethenstorestheinformationaboutyourwebsiteinitsvastdatabase,waitingforsomeonetositdownattheircomputerandtypeaqueryintotheirsearchpagewhichmightmatchwhatyourwebsiteisallabout.

So,ifyouwantyourwebsitetobefoundbyyourtargetaudiencethenit’simportantthatyouoptimizeyourcontentforthekeywordsthattheymightusewhensearchingforinformation.Andthat’swherewecometotheothersideoftheequation.

Theterm‘keyword’alsodenotesthewordsthattheusertypesinastheirquery.

Googlesaveseverystringofwordsthatuserstypeintofindsomethingandtheirsoftwarecalculatesthefrequencywithwhichthesephrasesorcombinationsofwordsoccur,overallthesearchesmade.Therefore,theycancalculateveryaccuratelyhowpopulara

particulartopicorphraseis.And,asyoucandeduce,themorepopularthekeyword,themoredifficultitistogetyourwebsitetocomeuponpageonebecausetherewillbetoomanycompetingwebsites.

Forexample,golfisaverypopulartopicthatpeoplewanttosearchfor.Butsimplytypingintheword‘golf’isusuallyawasteoftimebecauseitistoobroad.Millionsofpeoplesimplytypeintheword‘golf’andGoogledoesitsbesttocomeupwithsomethingrelevantbuttheusercouldbelookingforanythingandtheresultstheygetwilllikelybetoobroadtobeuseful.AnditwouldbevirtuallyimpossibleforyoutogetyourwebsitetocomeuponthefirstpageofGooglewhensomeonesimplytypesin‘golf’becausetherearejustsomanyotherwell-establishedwebsitescompetingonthesamesubject.

Buthere’swherethe‘optimization’bitcomesin.Cannysurfershavecometolearnthatthey’llgetresultsquickeriftheysearchforsomethingmorespecific,forexample,‘golfshoes’.Buteventhatisverybroad.

It’smuchbettertolookfor‘men’sgolfshoes’oreven‘men’sbluegolfshoes’or‘men’sbluegolfshoessize10’.Thatnarrowsdownthesearchandtheuserismorelikelytofindwhatthey’relookingfor.

So,ifyou’resellinggolfshoes,itwillbeeasierforyoutorankyourwebsiteinthesearchresultsifyouoptimizeoneormorepagesforveryspecificwordsandphrasestodescribeexactlywhatproductsyouhaveforsale.

‘SportcoMen’sBlueLeatherGolfShoesSize10’tellsGoogle,andyourpotentialcustomer,preciselywhatyouhaveforsale.Andyouwillhaveamuchbetterchanceofcominguphigherinthesearchresultssimplybecausethereismuchlesscompetitionforthesekeywords.

Butwhatifyouareasmallbusinessororganizationandyoujustwantyourwebsitetopublicizeyournameandbrand?

SEOismucheasierifyournameisunique(ornearly)becausethereismuchlesscompetition.Ifyourwebsiteisallabout‘ClarissaClancyClairvoyant’thenit’smucheasiertoappearonpageoneofGooglewhensomeonetypesinyournamebecauseyouareprobablytheonlyoneusingthatkeyword.

ButthatpresupposesthatyouhavedoneenoughpublicitytogetyournameknownoutsideofGoogleinthefirstplace–andthat’squiteanothertopic!

Lesson19.BehindTheScenesWithHTMLRightatthestartofthistutorialIsaidthatyoudon’tneedtoknowHTMLtouseWordPress.Thisistrue,butyoucanseefromacoupleofthepreviouslessonsthatitcanbehandytoknowhowtoinsertHTMLifyouneedtouseittodisplaysomethingnotcoveredbyWordPress.

HTMLstandsfor‘Hyper-TextMarkupLanguage’andisthecodethat,originally,peoplehadtousetocreateandmaintainaregularwebsite.

ThebeautyofWordPressisthatitshieldsyoufromallthisinitsuserinterfacebut,behindthescenes,WordPressgeneratesallthenecessarycodeforyou.Anditdoesit(mostly)veryefficiently.

I’mnotgoingtoteachyouHTMLherebutI’mgoingtoshowyouhowtouseitifyouhavewrittenanyofyourowncodeorifyouhaveacodesnippetprovidedforyoutoperformsomefunctionnotsupportedbyWordPress.

AddHTMLCodeToAWordpressPageWordPresspresentsyouwithanalternativewindowtouseonPostsandPagesifyouwanttoinsertyourowncode.Todothis,clickonthe‘Text’tabinapostorpage,asinFigure19.1:

WhenyouclickonthatyouaretakentotheHTMLwindowandWordPressexpectsthattherewillbesomeHTMLorothercodeincludedinthetext.

YoucanwriteanytextasnormalandWordPresswilldisplayitasnormal,butwhenitencountersanyHTMLitwillexecuteitratherthandisplayingitastext.

Figure19.2showsthetextboxwithHTMLcodeinit…

…andFigure19.3showswhatthatpagelooksliketothevisitor:

WhenyouusethisTexttabtherecanbeoccasionswhenWordPressdoesn’trendertheHTMLcodeasyoumightexpect.Thisisbecauseitdoesafurtherlayerofverificationbeforeacceptingthecodeandthiscanmeanthatitstripsoutanythingthatitdoesn’tlike.

Thiscanbeannoying,butyoucanforceWordPresstoacceptyourcodeifyoutemporarilychangeyourUserprofile.

DisableTheVisualEditorFromthedashboard,goto‘Users’,‘YourProfile’andyou’llseeascreenlikeFigure19.4:

Checkthe‘Disablethevisualeditorwhenwriting’boxandthenscrolldownandclick‘UpdateProfile’.

Nowyoucanenterthecodeyouwantintoyourpostorpageanditshouldretainthecode‘asis’whenyoupublishit.

Ifyoudothis,youwillhavetogobacktoyourUserprofileanduncheckthisboxifyouwanttore-enablethevisualeditorforuseinfutureposts.

Butyou’llhavetoremembertorepeatthedisablingifeveryouwanttogobacktoedittheoriginalpostbecause,ifyoudon’t,WordPresswillstripoutallyourcode!

___

IsupposeIoughtnottoleavethislessonwithoutahealthwarning.InsertingHTMLcodeintoaWordPresspostorpagecanhaveunintendedconsequences.ThiscanbebecausetheHTMLcodemaycontainanerror,ormaybesomethinginthecodeclasheswiththesite’stheme,orsimplythatyouaretryingtodosomethingthatWordPressconsiderstobeinvalid.

IfyougetproblemswithHTMLyouhavetwochoices:removetheoffendingcode,orcallforhelpfromsomeonewhoknowswhattheyaredoing.

FAQI’matotalnon-techieandallthisstuffgivesmeaheadache.DoIreallyneedtoknowaboutHTML?

No.Youdon’thavetoworryyourprettylittleheadaboutitatall,ifyoudon’twantto.YoucanleaveittoWordPress.

Lesson20.HowToBeAWinningWordpressWebmasterOK,thissectionofthebookisforwhenyouhavecompletedLessons1-19andyouhaveaworkingwebsiteupandrunning.Peopleinthissituationoftenaskme,‘Right,I’vedonemywebsite,nowwhatnext?’

Well,I’llletyouintoalittlesecret.Successfulwebsitesareneverreallyfinished.Thepointaboutalivingwebsiteisthatitreflectschangethroughtimeanditisalwaysup-to-dateandfreshwhenvisitorslandonit.So,workonawinningwebsiteneverreallystops.

BuildUpYourWebsiteSo,youshouldembarkonascheduleofconstantlyaddingnewpagesand/orpostsandfine-tuningyoursitenavigationsothatvisitorscaneasilyfindtheinformationtheyarelookingfor.

Themoreworkyoudo,themoreskilledyouwillgetatitandyouwilleffectivelylearnonthejob.And,trustme,youwillfinditveryrewardingtoseeyourwebsitecomingtolife.

GetFeedbackWhenyou’reready,askotherstogiveyouanhonestappraisalofyourefforts.Findoutwhatelsetheywouldliketoseeonthesiteandwhethertheycanofferanypositivesuggestionsforimprovements.

PromoteYourWebsiteDon’tforgettheexternalpromotionofyourwebsite.

YouneedtoleteveryoneknowaboutyourwebsitebyaddingyourdomainURLtoallyourpublicitymaterialandyouremailsignatureandyourbusinesscardsandyourprofileonforumsetc.,etc.

IfyouareonFacebookorTwitterorGoogle+orLinkedIn(oranyothersocialmedia),makesurethatallyourfriends,followersandcontactsknowaboutthewebsite.

Wherepossible,askotherswithwebsitestolinktoyoursasthiswillhelpyoursearchenginevisibility.

ExpandYourSkillsAnd,asyouworkaway,youwillfindthatyourskill-setwillgrow.Youwilldiscoverthatyouhavemasteredtechniquesthatyouoncethoughtunfathomableandyouwillalsogaintheconfidencetolearnevenmore.Thatis,essentially,howIlearnedWordPressandyoucandothesame.

GetHelpAsitsaysinthetitle,Iwrote‘WordPressToGo’asaguideforbeginners,notadefinitiveworkonthewholetopicofWordPress.ButIhopethatIhaveequippedandencouragedyoutofindoutforyourselftheanswerstoquestionsnotcoveredhere.

WordPresshasitsownself-contained,contextual‘Help’system.Lookatthetoprightofeachofthepagesinthedashboardandyouwillseealittle‘Help’tag.Whenyouclickon

thatyouwillseeadrop-downboxthatcontainstextandlinkstoprovidemoreinformationaboutthetypeofpageyouareonandhowtouseit.InadditiontoWordPress.org,therearemanyotherwebsitesofferingusefulinformationaboutWordPress.

GoontoGoogleandsimplytypeinthequestion(s)thatyouwantanswered.Makesureyouincludetheword‘WordPress’somewhereinthequestion.

Youmaybesurprisedathowmuchinformationthereisoutthereforfree.Youwillunderstandalotmorefromthatmaterialafteryou’vebeenthroughtheselessonsthanyouwouldhavedonebefore.

ButonewarningaboutpickingupWordPresstipsfromexternalwebsites.CheckthedateofthepageorarticlethatyouarereferencingbecauseWordPressinformationcanquicklygooutofdate.

Ifwhatyouarereadingismorethanoneyearold,becarefulthattheinformationyouarereadingisstillcurrent.

Finally…So,mymessageinthisfinallessonistokeepatit.Expandandpolishyourwebsite.Keepitallfreshandup-to-the-minute.Keeponlearning.Andtakeprideinyourachievement.

That’sthewaytobecomeawinning,WordPresswebmaster!

ConclusionWordPressisahugetopicandIhopethatyouhavefoundthistutorialausefulguidetogettingyoustarted.Ihavedeliberatelykeptthingsassimpleaspossibleand,forthatreason,Ihavenotventuredfurtherthantheessentialfirststeps.

Thousandsofpeoplewithnopreviouswebexperiencehaveusedthistutorialsuccessfully-andIlookforwardtoyoujoiningthem!

Ifyou’vereachedthispagebutyouhaven’tyetmadeastartoncreatingyourownwebsitethen,please,gobacktothebeginningofthisbookandworkthroughitagain.Ifitallseemsabitconfusingthefirsttimethrough,thenthedetailswilllikelyallbegintoclickintoplacethesecondtimearound.Giveitanothershotandyou’llsoonbewellonyourwaytogettingyourveryownwebsite.

Ifyouhavefollowedtheselessonsandcreatedyourownwebsiteonyourowndomainthencongratulations–youdidit!Youhavemadeastartingettingyourownonlinepresenceandyouarenow,officially,aWordPresswebmaster.You’veachievedyourobjective,andyou’reentitledtofeelproud.

FurtherResourcesAsIhavementioned,theWordPressscenechangesallthetimewithmorenewupdatesandfeaturesthanIcanpossiblyincludeinthisbook.IhavetriedtocovertheverybasicsinthistutorialbutyoucanfindmoretoolsandtipsonmywebsitewhereIaddanyinformationthatIthinkwillbeuseful.

Youcanfindaloadofrecommendedresourcesonmywebsiteathttp://wordpress2go.com/resources/whereIhavelistedmanymoresourcesthatyoucaninvestigate.AndifyouhaveagenuinequeryaboutsomethinginthisbookthenyoucancontactmeviathissiteandIwilldomybesttoanswer.

AlsoonmywebsiteIhavelistedsomeoftheplacesyoucangotofindmoreWordPressthemes,otherthanthefreeonesavailablefromWordPress.Ihavealsoprovideddetailsofsomeofthetools,freeandpaid,thatIhavefoundusefulinbuildingmyownwebsites.

Ihavealsoleftmydemositehttp://1.keepingchickens.net/onlinesothatyoucanviewitandseetheresultsofthistutorialinrealtime.

PleaseReviewThisBook!Finally,pleaseletmeaskyouafavor.Ifyouhavefoundthisbookuseful,pleasewouldyougobackto‘WordPressToGo’onAmazon(http://www.amazon.com/dp/B0072V4EYS)andleavemeareview?SatisfiedreadersprovidetheverybestadvertisementforaproductandIwouldvalueyouropinion.

Weallliketoseehelpfulreviewswhenwearelookingtobuysomethingandit’sgoodforeveryoneifcustomersarewillingtosharetheiropinions.

___

Again,thankyouforusingthisbook.Goodluckwithyourwebsite!

AboutTheAuthorSarahMcHarryisawebmaster,programmerandwriter.Shehasworkedasadeveloperforbusinesseslargeandsmall,onbothsidesoftheAtlantic,formoreyearsthanshecarestobragabout.

ShebuiltherfirstWordPresswebsitein2008and,asaprofessionalwebmaster,accustomedtobattlingwiththeintricaciesofHTML,PHPandCSS,itwasarevelationtoher.

Here,atlast,wasaninterfacethatmadeweb-buildingaccessibletoeveryone.Betterstill,itwasfreeandavailabletoanyonewhowantedtouseit.

SarahhassincebuiltdozensofWordPresssites,bothforherselfandforherclients.AndoneoftheunexpectedoutcomesofcreatingallthoseWordPresswebsitesandblogsforherclientswasthattheybegantoaskhowtheycouldsetupandmaintainthosesitesthemselves.

Thisishowthisbookcameintobeing.

Afterexperimentingwithanumberofapproachestopresenttheinformation,Sarahfoundthatthe‘20Lessons’formatwasthemosteffective.

Thisbookistheresult.

Sarahnowworksatbuildingwebsitesforvoluntaryorganizationsinherlocalcommunityandteachingothershowtodothesame.

Whensheisnotfiddlingaroundwithherwebsites,Sarahlikestoplaybridge,takephotographsandindulgeinguerillagardening.

SarahisBritish(buthalf-Canadian)andshecurrentlylivesintheWestCountryofEnglandwithhercat,Fanny.