wordpress to go1.droppdf.com/files/ro1jr/wordpress-to-go-mcharry-sarah.pdf · covering lessons 1...

WordPressToGo

HowToBuildAWordPress

WebsiteOnYourOwnDomain,FromScratch,

EvenIfYouAreACompleteBeginner

SarahMcHarry

AllRightsReserved

NopartofthiseBookmaybereproduced,copied,modifiedoradapted,withoutthepriorwrittenconsentoftheauthor,unlessotherwiseindicated.

Plainlanguage

copyrightnotice:Donotcopy,re-writeorplagiarizethisbookinanyshapeorform.Ifyoudo,youwillbereportedtoAmazon'sCopyrightDepartmentimmediately.

TableofContents

IntroductionQUICKSTARTGUIDE–YOUROWNWEBSITEIN8EASYLESSONSLesson1.RegisterYourDomainAndSignUpForWebHostingLesson2.InstallWordpressOnYourDomain

Lesson3.HowToLogInAndOutOfWordpressLesson4.TheDesignOfYourWordpressWebsiteLesson5.FirstStepsToAPerfectWebsiteLesson6.AddYourFirstWordpressPageLesson7.AddYourFirstWordpressPostLesson8.AllAboutWidgetsIN-DEPTHGUIDE–DRILLDOWNTOTHE

WONDERSOFWORDPRESSLesson9.AddImagesToYourWordpressWebsiteLesson10.AddAVideoToYourWebsiteLesson11.ThePowerOfTextWidgetsLesson12.CustomMenusAndWhyYouShouldUseThemLesson13.SetTheHomePageOfYourWordpressWebsite

Lesson14.ChooseAndChangeYourWordpressThemeLesson15.ThePowerOfPluginsLesson16.Comments:StartADialogueWithYourVisitorsLesson17.UsersAndTheirCapabilitiesLesson18.SearchEngineOptimization(SEO)Lesson19.BehindTheScenesWithHTML

Lesson20.HowToBeAWinningWordpressWebmasterConclusionAboutTheAuthor

IntroductionWelcome!

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,changetherules

withoutnotice,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.

Yourdomainbecomesyour

veryownexclusivewebaddress,yourownpieceofonlinevirtual‘realestate’thatplaysitspartinpublicizingyourmissionormessage.

Thesedays,ifyoudon’thaveyourownonlinewebpresence,youareinvisible.

Youcanprintyourdomainaddressonyourbusinesscards,addittoyouremailsignatureandquoteinall

yourofflineliterature.Yourownwebsiteonyourowndomaingivesyouidentity,visibilityand,indeed,status.

Butdon’tIneedaprofessionalwebdesignertomakeagoodjobofbuildingawebsite?

No,definitelynot!ThisusedtobethecaseintheearlydaysoftheInternetbecauseonlyafewtech-savvygeeks

knewandunderstoodthecomputerlanguage(HTML)thattranslatedyourwordsandpicturesintothecodethatbrowsersunderstand.

Butasthetechnologyhasadvanced,sohavethetoolstobuildwebsitesbecomemoreaccessible.WordPressisoneofthesetoolsandWordPressisthesubjectofthisbook.

WhatifI’mnotatechnical

wizard–willIunderstandallthejargonaboutweb-building?

Withthisbookyoudon’tneedtoknowanyjargonorgobbledygook–IexplainitallinplainEnglishaswegoalong.Asyouusethesystemitwillbegintoclickintoplaceandyou’llunderstandwhatyouneedtoknowandwhatyoudon’t.

IfyoucanuseawordprocessoryoucanbuildyourownWordPresswebsite–it’sthatsimple-Ipromise!

Howmuchwillitcosttodoitallmyself?

Peanuts.Theonlythingyouabsolutelyhavetospendmoneyoniswebhostingandyoucangetthisforafewdollarsamonth.

Forlessthan$10permonth

youcangetyourwebhostingaccountfromoneofthetophostingcompaniesontheplanet.

Ofcourseyoucanspendmoneyonothertoolsandservicesifyouwant,but,forasimplewebsitethatyoubuildyourselfyoureallydon’tneedtospendanymoremoneythanthat.

WhatIsWordPress?

WordPressisapowerful(andfree!)packageofsoftwarethatsitsinthebackgroundonyourwebserver(theremotecomputerwhereyourdomainishosted)andperformsallthetechnicalprocessingthatdeliversyourcontenttoyourvisitorontheirlocalcomputer.OnceWordPressisinstalledonyourdomainyoudon’tneedtodoanythingtomakeitwork.Itjustsitsthereandperformsitsmagic

entirelybehindthescenes.

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

Oncethehangoutofhobbyistsandbloggers,WordPresshasnowevolved

intoapowerfulandsophisticatedwebplatformthatsupportsahostoffeaturesbothforprofessionalanddo-it-yourselfwebmasters.

Theterms‘blog’and‘website’arenoweffectivelysynonymousasfarasourusageofWordPressisconcerned.Punditsusethetwotermsinterchangeablybecausethetechnology

platformbehindbothisexactlythesame.

WordPressisnowactuallyusedbysomeofthemajorplayersontheInternetasacompleteContentManagementSystem(CMS).ThinkCNN,TheNewYorkTimes,About.com,theWhiteHouse,USPostOffice,andFordMotors-theyallmakeuseofWordPress.

And,inadditiontotheexperts,millionsofordinarypeopleandsmallbusinessesaroundtheworldalsouseWordPressastheirplatformofchoicetogetapresenceontheweb.

What’ssospecialaboutWordPress?

WordPressisFREEandopen-source

WordPressisstableand

maintainedbyanarmyofexperts

WordPresscontainsnumerousbehind-the-scenesfeaturesthatmakecreatingyourownwebsiteabreeze

WordPressiswonderful,butithasareputationforbeingdifficult.Thisis,inpart,duetothedocumentation.

WordPresswasoriginally

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

Iknowallthis.I’macomputerprogrammer

myself.Iactuallyamatechie(andproudofit!)butIcanalsowriteplainEnglish.Inthistutorial,IjustconcentrateonthebasicessentialsofWordPressandignoreallthecomplicationsthatyoudon’tneedtoknowwhenyou’refirststartingout.

HowToUseThisTutorial

Thebestwaytousethistutorialistositdownatyour

PCwiththisbookbesideyouandfolloweachlesson,stepbystep.

BecauseWordPressisnowsosophisticatedandflexible,itcansometimesbedifficultfornewcomerstoseethewoodfromthetrees.SoIhavebrokenthistutorialdownintotwolevels:

QuickStartGuide

In-DepthGuide.

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

Whenyouhavecompletedlessons1–8youwillhaveabasic,workingwebsitethatyoucancontinuetobuildandusewithoutanyfurther

tweaking.Formanypeople,thisisalltheymayeverneed.

TheIn-DepthGuidetakesyoufurtherthanjustthebasicsandintroducessomeofthemoresophisticatedandfunctionaloptionsthatWordPressprovidestohelpyoumakeyourwebsitemoreefficientandunique.Lessons9–20takethebasicwebsitethatyoubuiltintheQuickStartGuideandhelpyou

developitontobecomeafeature-richresource,tailoredforyourpurposes.

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

Whenyou’vecompletedalltwentylessonsyouwillhavelearnedallthebasicsofbuildingaWordPresswebsite.You’llbewell-equippedtodiscoverforyourselfanyofthemoreadvancedfeaturesthatyoumaywishtoinvestigate.

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

formoreideasandresources.

Right,let’sgetstarted!

QUICKSTARTGUIDE–YOUR

OWNWEBSITEIN8EASYLESSONS

Lesson1.RegisterYourDomainAndSignUpForWeb

HostingThisisthefirststeptogetting

yourownwebpresence.ButifyoualreadyhaveadomainandhostingaccountyoucanskipthislessonandgoontoLesson2.

AsI’vealreadystated,thisisthefirstandonlyplaceinthistutorialwhereyouwillneedtospendanymoney.Havingareliablecompanytohostyourwebsiteisanessentialinvestmentanditdoesn’tcostmega-bucks.Onceyouhave

yourhostingaccountsetupyoucanforgetallabouttheverycomplexcommunicationstechnologyneededtosupportyourwebsitebecauseyou’repayingsomebodytoprovideitforyou.And,Ipromiseyou,ifyougowiththewebhostingcompanythatIrecommend,youwillgetaverygooddealindeed.

Ifyouhaveneverdoneanyof

thisbeforeandyou’reabitintimidatedbyallthejargonandtech-speak,don’tpanic.ThereisamassofincomprehensiblegobbledygookassociatedwithwebhostingandInternettechnologybutthegoodnewsisthatyoudon’tneedtounderstandnorcareaboutmostofit.LetmetakeyoubythehandandIwillexplainjustwhatyoudoneedtoknowaswegoalong.Tocoin

acliché,it’snotrocketscience.Trustme.

Whenyou’vecompletedthislessonyouwillhavetakenyourfirstgiantleapintotheonlineworldofweb-building…

ChooseYourDomain

OK,tobegin,youneedtodecideonadomain.Yourdomainnameisyouruniquewebaddressandit’swhat

peoplewilltypeintotheirbrowsertoreachyourwebsite.Soit’sagoodideatomakeitanamethat’seasytorememberandeasytospellandthattellspeoplewhatyourwebsiteisallabout.Sowhatsortofdomainnameshouldyouhave?

Itisbettertohaveadomainlike‘keepingchickens.com’ratherthan‘xyz101.com’becauseitspellsouttothe

worldpreciselywhatyoursiteisabout.Butyourdomaincouldbeyourownnameornickname,oryourbusinessnameormaybeasloganthatdescribesyourmission.

The.comextensionisthemostuniversallyrecognizedsuffixtoadomainname,butyoucouldalsohave.netor.org,thelatterespeciallyifyouareanon-businessorganization.The.net

extensioncanbehandyifthe.comversionofyourdomainisalreadytaken.Andthere’salso.us,.co,.biz,.info(andmore)ifyouwanttolookdifferent.Plus,therearethecountry-specificdomainnameextensionssuchas.uk,.au,.de-it’syourcall.

Youcanregisteryourchosendomainatthesametimeasyousignupforwebhosting.

SignUpForWebHosting

ThehostingcompanythatIrecommendforWordPresswebsitesisHostgator(www.hostgator4u.com).Theyhaveanawesomereputationforreliabilityandcustomerserviceandtheyalsoofferverycompetitivepricing.Andtheyhavetheaddedadvantagethattheyprovideahandyscriptforautomaticallyinstalling

WordPressonyourdomain.Thisisreallyusefulandwillsaveyoualotoftime.

Hostgatoroffersseveralhostingplansandyoucansignupforperiodsofbetween1monthand3years.Ifyousignupfor1monthyouwillpayyourhostingfeesmonthly.Ifyousignupfor1yearyouwillpayyourhostingfeesannually.Asyoumightexpect,thelongeryou

signupfor,thecheaperitbecomes.Andyoucanpayviacredit/debitcardorPayPal.

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

Nowyouhavetochoosewhichhostingplanyouwant.

The’Hatchling’istheverycheapestplan,allowingyoutohostjustonedomainontheservice.

The‘Baby’planisessentiallythesameserviceastheHatchlingbutwiththeBabyyoucanhostanunlimited

numberofdomainsonthesameaccountwithoutpayinganyextra.

Thisisforyoutodecide.IfyoudecidetostartoffwithHatchling,youcanupgradetoBabyifyouwanttoatsometimeinthefuture.

Hostgatorhasahabitofofferingamazingdiscountsontheirservicesandthese

mayvaryfromtimetotime.Butifyouquotethecouponcode‘WORDPRESS2GO’Hostgatorwillknowthatyouareareaderofthisbookandtheywillgiveyouthemaximumpossiblediscountavailableatthetime!

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

enterWORDPRESS2GOasthecouponcode.

Thenfollowthepromptstocompletethepurchaseprocess.Irecommendthatyouselectprivacyprotectionforyourdomainbecausethishidesyouridentityfromspammers.

Youdidit!You’venearlycompletedLesson1.

You’vegotyourdomainand

ahostingaccount.Whenyou’vesignedupwithHostgator,checkyouremail.You’llreceiveanemailfromthemwithyouraccountsign-inandpassword.It’sagoodideatokeepthisemail(orevenprintitout)sothatyouhavearecordofyourhostingdetails.

ForsecurityreasonsHostgatormaywanttotelephoneyouafteryou

registertoverifythatyouarethepersonwhoopenedtheaccount,sopleaseprovidethemwithaneasilyaccessiblephonenumber.(Ortheymightaskyoutocallthem).

Don’tworry;theywon’ttrytosellyouanything:alltheywantistoknowthattheaccountwasopenedbyyou(orwithyourpermission)andthatyouarearealpersonand

notarobot.Thisstepisessentialbeforeyoucanaccessyouraccountandgetstarted.

IntheremainderofthistutorialI’mgoingtotakeyouthroughthecreationofaWordPresswebsiteusingmydomain‘1.keepingchickens.net’asanexample.I’llstartrightatthe

beginningandyou’llwatchthewebsiteunfold,lessonbylesson.Ifyouworkalongsideme,youcanbuildyourownsiteatthesamepace.

Lesson2assumesthatyouarestartingoutwithaHostgatorhostingaccountandthatyoudon’thavetheWordPresssoftwareinstalledalready.

I’llshowyouhowtoinstall

WordPresswithjustafewclicksofthemouseandthenyou’llbeallsettobeginbuildingaWordPresswebsite!

IliveintheUKandIwouldratheruseaUK-basedhostingcompany.DoIhavetousetheAmericanHostgator?

No,Icanrecommenda

companycalledJustHostwhoarebasedintheUK.Theyoffer.ukdomainnames(aswellasthoseabove)andallbillingisinGBP(poundssterling).

JustHostprovideshigh-quality,low-pricedhostingequivalenttotheHostgatorHatchlingplanandtheiruser-interfaceisverysimilarsoyoushouldbeabletofollow

thistutorialwithoutanytrouble.

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

IalreadyhaveadomainthatIregisteredwithanotherregistrar.CanIstillusethedomainwithHostgator?

Yes–youcanstillsetupHostgatorhostingforapre-

registereddomainbut,inthesecircumstances,youmustchangeyourdomain’sDomainNameServers(DNS)toindicatethatyourwebsitewillbehostedonHostgator.

Thisisnecessarysothatthedomainnamesystem(whichdrivestheInternet)cantranslateyourdomainnameintoaspecificIP(InternetProtocol)addressthatidentifiesthespecificbitof

hardwarethathostsyourwebsite.Iadmitthatthatsoundsabittechnicalbutit’sreallyquitesimple.

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

WhenyousignupforaHostgatorhostingaccountyouwillreceiveawelcomeemailwhichwilltellyou

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

Youwillneedtologintoyouraccountattheregistraryouusedwhenyouboughtthedomain.Thereshouldbesomewherefairlyobviousontheirscreenlabeled‘SetyourDNS’(orsomethinglike

that).EnterthetwocodesHostgatorsuppliedandsavethesettings.

Thechangesmaytakeplaceimmediatelyoryoumayhavetowaitseveralhours(ormore)beforeyoucanaccessthedomainatHostgator.ThisisbecausetheinformationhastopropagateouttoallthenetworksontheInternetthatneedtoknowwheretofindyourwebsiteandthisisnot

alwaysimmediate.

Ifyoucan’tfindouthowtochangeyourDNSthentryaccessingyourregistrar’sFAQpageorknowledgebase.Ifallelsefails,contacttheirTechSupportandaskthemtohelp.

Lesson2.InstallWordpressOnYour

DomainWhatwe’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,thetitleofyourwebsiteandyourfirst

andlastname.ThisistheminimuminformationWordPressneedstocreateawebsite.Youcanchangeanyofthisinformationlater.Thenclick‘InstallNow!’andwaitforthescripttofinish.

Thenit’sdone.WordPressisinstalledonyourdomain-easypeasy!CheckyouremailtogetyourWordPressusernameandpassword.

Ifallthiswentwell,congratulations-youcannowskiptothenextlesson.

InstallWordpressWith‘Fantastico’

Ifyoudon’thaveaccesstoQuickInstallyoucanusetheothertoolcalled‘Fantasico’toinstallWordPressautomatically.Thereareseveralversionsofthistoolsowhatyouseemayvary

slightlyfromwhatIamshowingyouhere,butmostofitisself-explanatory.

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

Clickon‘WordPress’intheleftpanel.Thenonthenextscreenclick‘NewInstallation’.

Clickonyourdomainnameinthedrop-downboxand

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

Checkyouremailfora

confirmationthatWordPresshasbeeninstalledonyourdomainandsavethis(orprintitout)forsecuritypurposes.

Congratulations!Whenyou’vecompletedthislessonyouhaveanemptyWordPresswebsiteonyourdomainjustwaitingforyoutomakeityourown!

Help!IinstalledWordPressbutI’vemadeacompletemessofeverythingandIwanttostartagain.CanIuninstallWordPressonmydomain?

Yes,youcan.LogintoHostgator’scPanelandgobackintoQuickInstall(seeFigure2.3).

Clickonthebuttonatthetopofthescreenthatsays

‘ManageInstallations’.Youwillseeasmallredcrosstotherightofyourdomainname.Clickthisandanoptionwillappearlabeled‘Uninstall’.

FollowthepromptsandyourWordPressinstallationwilldisappear.Youcanthenstartover.

Lesson3.HowToLogInAndOutOf

WordpressNowlet’sdealwithafewofthebasicsandbeginwithloggingintoandoutofWordPress.

LogIntoWordpressWheneveryouwanttoworkonyourwebsiteyouneedto

loginintoWordPressbytypingthefollowingintoyourbrowser:

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

You’llseethefamiliarWordPressloginscreenasinFigure3.1:

Entertheusernameandpasswordthatyouweregiven

whenyouinstalledWordPressandclick‘LogIn’.

It’sagoodideatobookmarkthisloginbecauseyou’llbeusingitalot.

Ifyouhaveacomputer-generatedpasswordyoucanchangethistosomethingelseafterwegetstarted.AssoonasyoufeelfamiliarenoughwiththeWordPress

dashboard,gotoLesson17andthatwillexplainhowtochangethelog-inpassword.

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

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

Thewelcomemessages

shownonthisscreenvaryfromtimesodon’tworryifthebodyofyourscreenlooksalittlebitdifferentfromthis.

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

Whatwearereallyinterestedinatthisstageisthevertical

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

We’regoingtobeusingthissetofdashboarddrop-downmenustoaccesstheinnerworkingsofWordPresstobuildawebsite.WheneverIsay‘fromthedashboard…’Iwillbedirectingyoutoclickononeoftheseleft-sidemenu

items.Iwillexplaineachonethatyouneedtouseaswegoalong.

UpdatingWordpressJustaquickdigressionhere.TheWordPressdevelopmentteamhasanon-goingmissiontoimproveandexpanditscapabilitiesandtheyreleasenewversionsofthesoftwareatregularintervals.

SowhenyoulogintoyoursiteandseeamessageabovethedashboardsayingthatanewreleaseofWordPressisavailable,it’sOKtoclicktoupdatethesoftware.

Justfollowthepromptsandtheupdatewilloverwritetheversionyoucurrentlyuse.Youusuallydon’tneedtodoanythingelsebutyoushouldcheckoutwhethertherearenewfeaturesthatyoumight

takeadvantageof.Therewilltypicallybesomethingannouncedinthebodyofthedashboardandyoucanalsocheckoutwww.wordpress.orgfornewsonthelatestrelease.

And,ifyouarewithHostgator,theynowrunanautomaticWordPressupdatewheneveranewversionisreleased.Theydon’talwaysdothisimmediatelybutifyou

don’tupdateyourWordPressinstallation,Hostgatorwilldoitbehindthescenesbydefault.

ViewYourWebsiteAsTheWorldSeesItAnytimeyouwanttoseewhatyoursitecurrentlylookslike,fromthedashboard,hoveryourmouseoverthesitetitleupinthetopleftcornerofthescreenandclick

‘VisitSite’.Thewholesitewillbedisplayedandyoucanviewitasavisitorwillseeit.Youwillhavetoclickthebackbuttontogetbacktothedashboard.

LogOutOfWordpressTologoutofWordPress,lookatthetoprightcornerofthescreenwhereitsays‘Howdy…’,hoveryour

mouseoverthisandclick‘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.TheDesignOfYourWordpress

WebsiteRightthen–here’swhereitstartstogetinteresting…

ThevisualappearanceofaWordPresswebsiteisgovernedbyadesigntemplatecalleda‘theme’.Thethemedeterminestheoverallappearanceandlayout

ofthesite,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.

SketchOutABlueprintForYourWebsiteBeforegoingmuchfurther,itwouldbeagoodideaforyoutosketchoutonpaperroughlywhatyouwantyourwebsitetolooklikeandhowyouwantittobehavesothat,asweworkthroughthetutorial,youcanbeputtingyourdesignintopractice.

Figure4.2showstheoutlineofatypicalwebsiteandonethatTwentyTwelvefollows:

Whatyouneedtosketchoutiswhatyouwanttogowhereandapproximatelywhatyouwantyoursitetolooklike.

Atthisstage,Isuggestyou

designthelayoutofyourwebsitetobeassimpleaspossiblebecause,ifyoucanlivewiththesimpleTwentyTwelveWordPresslayoutfornow,youwillfinditquickertobuildyourownsite.

TheTwentyTwelvearchitectureprovidesmanyofthetypicalfeaturesthatarefoundonmostwebsites:

Theheaderisatthetop

ofthepageandthiscanbeanimage,orablockoftext,orboth.Thetextwouldconsistofthesitetitlewithanoptionalextratagline.Theheadernormallyappearsatthetopofeverypage.

Belowthetitleisthe‘menu’whichisahorizontalbarcontainingtabswhichlinktothevariouspagesinyour

website.TwentyTwelveactuallyputsthemenuabovetheheaderbutmanythemesputitbelow.

Themainbodyofeachpagecontainsanarticle(pageorpost)withatitleatthetop.Thebodyofthearticlecancontaintextorimagesoramixtureofboth.

Thesidebarontherightsideofthepagecontains‘widgets’(seeLesson8)whichtypicallycontainnavigationallinkstoguidetheusertootherpartsofyourwebsite.Widgetscanalsocontaintextorimages.

Thefooterisatthebottomofthepage.Thefooterisoptionalandcanalsocontainwidgets.

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

Whatpagelinksdoyouwanttogoacrossthetophorizontalmenubar?Again,thiswill

usuallyremainthesameasusersclickfrompagetopage.

Nowthinkabouttheheader.Doyouwantaheaderimage?Doyouwanttouploadyourowngraphicorlogo?

Whatdoyouwanttoseeinthesidebar?Notethatthesidebarisgenerallyusedtoprovidenavigationtootherpartsofyourwebsite(ormaybeotherwebsites).

Doyouwanttousefootersand,ifso,whatdoyouwantinthem?

Asyoucanprobablyappreciate,themoreworkyoucandoatthisstagetoplanthelayoutofyourwebsite,theeasierandquickeritwillbetoactuallybuildit.

AtthisstageyourWordPresswebsiteisemptyexceptfor

thesamplecontent(‘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.Now

clickon‘SiteTitle&Tagline’.Hereyou’llenterthetitleandtaglineofyourwebsitethatwillbedisplayedatthetopofeverypage.

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

Youcanseethatthistextwillnowappearintheheaderofeverypageofyoursite.

SelectAColorScheme

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

Inthesamedialogueboxyoucanalsochangethe

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

‘SaveandPublish’buttonatthetopleft.

AddABackgroundImageAsyoucansee,thereisalsoa‘BackgroundImage’dialoguewhereyoucanuploadanimageinsteadofhavingaplainbackgroundcolor.Thebackgroundimagewilldisplayintheemptyareaaroundandoutsidethepage

borders.Whatevergraphicyouusewillrepeatitselfacross,aroundandbehindyourwebpages.

Ifyouaregoingtocreateaparticularlyjazzysitewherethedesigngraphicsareanintegralpartoftheimageyouwishtoportraythenyoumightwanttoexplorethisoption.

Itendnottousebackground

imagesbecauseIthinktheycanmakethescreenlooktooclutteredandcandistracttheuserfromreadingmysparklingprose(!)–butthefacilityisthereifyouwanttouseit.

AddAHeaderImageIfyouwantyoursitetohaveaheaderimageyoucanuploadithere.TheTwentyTwelvethemedoesnot

provideanyinbuiltheaderimagesand,bydefault,willnotdisplayone.Butifyouhaveagraphicthatyouwanttodisplayacrossyourwebsiteasaheaderyoucaneitherresizeitto960pixelswidthby250pixelsheightonyourcomputer,oruploadagraphicofanyothersizeandcropitwithinthisscreen.(Ignorethereferencestothe‘MediaLibrary’fornowbecausewewillbecomingontothatin

Lesson9).

Touploadanimage,clickonthe‘Browse’buttonandnavigatetotheimageonyourcomputer.Thenclickon‘Open’and‘Upload’.Iftheimageisnot960x250pixelsyouwillbegiventheopportunitytocropithere.Thenscrolldownandclickon‘SaveChanges’.Youmightwanttonoteherethatyoucanuploadaseriesof

headergraphicsandtellWordPresstodisplayadifferentheaderoneachpage.Thiscouldbeagreatideaifyouwantaparticularlyvisual-lookingwebsite…

IuploadedaheadergraphictomydemositeandFigure4.4showswhatthesitenowlookslike:

Canyouseehowthesiteisbeginningtotakeshape?Afewsimpletweakswillenableyoutobeginmakingyoursitelookhowyouwant.

Isuggestthatyouexperiment

withalltheoptionsinthislessontoseehowyoucanchangethethemetomakeitlooksuitableforthesortofwebsiteyouwanttobuild.Anythingyouchangeherewillbeeffectiveimmediatelybutyoucanchangethingsasoftenasyoulike,sonothingiscastinstone.

Whenyou’vefinishedcustomizingyoursettings,clickonthe‘Close’buttonin

thetopleftandthiswilluncoverthedashboardmenuitemsdowntheleftsideofthescreen.

I’mgoingtoillustratetherestofthetutorialbyusingthisthemeanditwillmakeiteasierforyoutofollowifIkeepitassimpleasthis.AndforthesakeoffurthersimplicityIhaveremovedtheheaderimageabovebecauseitwillmaketheillustrations

inthistutorialeasiertofollow.

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

FAQIcan’tdecidewhatIwantmywebsitetolooklike!HowcanIgetstarted?

Onewayofgettingsomecreativeideasissimplytolookatotherwebsites.Findawebsitethatyoulikethelookofandhaveagoodbrowsearound.Notethecolorschemeandthefonts.Checkouttheheader.Seehowthe

sitenavigationworks.Howdoesthesiteusepictures?Doesthesitehaveads?

Notewhatyoulike(anddon’tlike)andseewhetheryoucanorganizeyourideasintoasimplestructureforyourownsite.Warning–donotcopyotherwebsitesoryoucouldbeintrouble.Anddon’tgettoocomplicatedtobeginwith.Asyoursiteevolvesyoucanaddmorebellsand

whistlesbutwhenyouarestartingouttheKISS(‘KeepItSimpleStupid’)principlecertainlyapplies!

Lesson5.FirstStepsToAPerfectWebsiteThere’sonefinaljobtodobeforeyoucanstarttocreateawebsitethatisallyourownandthat’stodoabitofhousekeepingandconfiguration.YouneedtodothisbasicsettingupsothatyouclearoutthesamplecontentandconfigureWordPresstoworktheway

youwantit.

Atthisstagedon’tworryifthedetailslookunfamiliarandpuzzling,justfollowalonganddoitanditwillallmakesenseeventually,Ipromise.

Thiswon’ttakelongandthenwecangetonwiththeinterestingstuff.

DeleteTheJunk

(SampleContent)Foreverynewinstallation,WordPressprovidessomesamplecontentwhichyoudon’treallyneedandwhichwe’regoingtodelete.

Whenyoulookatyoursiteyou’llseethatWordPresshasprovidedthefollowingitemsonthesite:

Recentcomments:Mr

WordPressonHelloworld!

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.(Hello

Dollyisaleft-overfromtheWordPressbloggingdaysandisofnousetous).

We’lldealmorewithPluginsinLesson15but,fornow,that’sallyouneedtodo.

ConfigureWordpressToBehaveHowYouWantFinally,here’swherewecheckoutafewsettingstobe

surethatWordPressisgoingtobehaveaswewant.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.AddYourFirstWordpress

PageNow,beforewebeginthislesson,letmejustgiveabriefoutlineofhowyoushoulduse‘Pages’asopposedto‘Posts’,whichwewillgetintoinLesson7.

Pagesareintendedtobethe‘static’elementsofyour

website,containingcontentthatyoualwayswanttobeavailabletoyourvisitorsandwhich,typically,areaccessibleviaatabonthehorizontalmenubar.Thinkofthisasthe‘backbone’information.Youwouldtypicallyhavean‘AboutUs’page,possiblya‘Welcome’page,preferablya‘ContactUs’pageand,alongwiththat,a‘Privacy’page.Pagesdonotchangeverymuchand

youmayonlyneedoneortwopages.

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

AddAn‘About’PageLogintoyourWordPresswebsiteandfromthe

dashboard,clickon‘Pages’,‘AddNew’.Figure6.1showswhatyou’llsee:

Enter‘AboutUs’(orsomethingequivalent)inthetopblankboxwhereyoucanseethecursorflashing.Then,intheblankboxheadedbythe‘Visual’tab,typesometextthatdescribesyouoryourwebsiteoryour

business.Don’tcopyandpastethetextfromsomewhereelsejustyet(I’lltellyouwhylaterinthislesson)–justmanuallytypeinsometextsothatyoucanseehowthisallhangstogether.Asyoutypeyou’llseethatthewordswrapround,justlikeawordprocessor.Ifyouhit‘Enter’,you’llgetanewparagraph.Justkeeptypinguntilyou’vegotenoughtexttoplay

aroundwith.Don’tworryabouthowperfectitis,youcaneditthepagelater.

Afteryou’veenteredabitoftextit’sagoodideatoclickon‘SaveDraft’.Thisishandywhenyouaresettingupacomplicatedpagebecauseitenablesyoutosaveyourworkwhenyougetsomethingrightandreturntothelastdraftif(when!)youfoulitupatalaterstage.I

encourageyoutousethisfeature,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.See

Figure6.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.YoushouldalsonoticethatWordPresshasmagicallyaddedthepagetabtothemenubaraboveyour

siteheader,whichiswhereitshouldbelong.

Inowencourageyoutothinkaboutandaddasmanypagesasrelevanttoyoursite.Asyouaddeachpageyouaregraduallyfillingoutyoursiteandmakingityourown!

Ifyourwebsitewillconsistofasmall,finitenumberofpagesthenyoumightbetemptedtoleaveitatthatand

notmakeuseofposts.Butthatcouldseverelylimittheeffectivenessofyourwebsite,particularlyinrelationtosearchengineoptimization(SEO).PostshaveanumberofveryusefulfeaturesthatPagesdon’thave.

Beforewegoontothenextlesson,here’stheusefultipIpromisedyoutohelpwhencopyingandpastingtext:

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

canhaveunintendedconsequences.

Thisisbecause,whenyoucopytextfromyourcomputertoyourclipboard,youroperatingsystemwilloftencopynotonlythetextbutalsotheformatting(includingfonts)aswell.MicrosoftWordcontainsalotofcomplicatedformattingbehindthescenesandthiscanconfuseWordPressbecauseit

wantstoformatthetextaccordingtothethemeyouhavechosenandcopyingunwantedformattingcanmakeitappearallscrewy.

So,typeupyourtextofflinehoweveryouwantandcopyittoyourclipboardasusual.Then,whenyougetintoyourWordPresspage,clickononeofthetwolittle‘T’or‘W’iconsinthetoolbar(‘PasteasPlainText’or‘PasteFrom

Word’)andapop-upwindowwillappear:

Pasteyourtextintothisbox,click‘Insert’andthetextwilldropinjustlikeyoutypedit.ThisfeatureappliesbothtobothPagesandPosts.

Andthere’sonemorefeaturethatyoumightliketotake

advantageof:ParentandChildpages.

MakingUseOfParentPagesAndChildPagesIfyouhavealreadypublishedatleastonepageyouwillseethat,under‘PageAttributes’,youhavetheoptionofselectingapreviouslypublishedpagetobethe

parentoftheoneyouarecurrentlyaddingorediting.Thismeansthatyoucanhaveahierarchyofpagesthatyoucannesttoseverallevels.Ifyouareplanningonbuildingawebsitewithmanypagesrangingoverawiderangeoftopicsthisisafeatureyoumightwanttouse.Parent/childpagesappearassuchindrop-downnavigationmenusandcanbeaneasywayofcreatingahierarchical

structuretosteerusersaroundyoursite.

That’saboutitforPages;let’sfindoutallaboutPostsinthenextlesson.

FAQIwanttostopanyonefromseeingmywebsitewhileI’m

stillsettingitup.HowdoIdothat?

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

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

CreateAn‘UnderConstruction’Page

Theeasiestwaytodothisistouseaplugincalled‘UnderConstruction’.IdealwithhowtoaddpluginsinLesson15,socomebackherewhenyou’vecompletedthatlesson.

Afteryou’veinstalledtheplugin,fromthedashboard,click‘Settings’,‘UnderConstruction’.Set‘ActivateorDeactivate’to‘on’,andleavealltheothersettingsasdefault.Thenclick‘Save

Changes’.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.Youcaneditapageas

oftenasyoulike.

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

websiteovertime.

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

TheEssential

DifferenceBetweenPostsAndPagesWhatI’mgoingtodointhislessonispointoutafewofthedifferencesbetweenpostsandpageswhichmighthelpyoumakeupyourmindhowthetwodifferenttypesofentriescancontributetoyourwebsite.

Postsaredesignedtobeamorechronological,dynamic

waytopresentcontenttoyourvisitors.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’pageasthe

frontpageand,inyoursidebar,youcouldhaveaseriesofnavigationlinksfilteringyourpostsbycategory.

Categoriesareawaytoclassifyyourcontentintotopicssothatyourvisitorscanaccessallthepostsyouhavewrittenonaparticularsubject.Totakemychickensiteasanexample,Icouldwriteanumberofpostson

broadcategoriessuchas‘chickenfood’,‘chickenhouses’,‘breedsofchicken’etc.

AsIwriteeachpost,Iwouldchooseoneormoreappropriatecategoriesforthesubjectmatter.Thiswouldthenautomaticallyprovideafilterofallthepostsinthesamecategorysothatmyvisitorscaneasilyfindtheirwaythroughthesitewithout

havingtoreadpostsontopicsthatdon’tinterestthem.

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

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

inthenextlesson.

BeforeIleavethesubjectofposts,letmeshareanotherneatfeatureofWordPress:theabilitytopre-andpost-dateentries.

HowToGoBack(OrForward)InTimeIfyousimplywantyourposttobedatedatthedateandtimeyoupublisheditthen

justleaveit.Butifyouwanttobackdateanentry,youcanchangethedateofpublicationtoapriordate.

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

website.

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

andthenitwillautomaticallypublishitasifyouhadhitthebuttonyourself.Magic!

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

Youcanquicklyaddanew

postwithtitle,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.AllAboutWidgets

Nowthatyouhaveyourwebsiteloadedupwithsomecontent,it’stimetoaddafewrefinementstomakeyoursiteappearusefulandwell-designed.Youcandothisbyinsertingwidgetsinthesidebarofyourwebsite.

Whatare‘widgets’?Widgetsareveryhandylittlechunks

offunctionalitythatperformcommontasks.You,thewebmaster,choosewhichwidgetsyouwanttousetoperformadditionaltaskstoimproveyourwebsite’sappearanceandperformance.

Examplesofwidgetsinclude:

Listofcategoriesinyourwebsite

Linkstoyourlatestposts

Custommenus

Allthesewidgetsareclickablehotlinksthatguideyourvisitorsaroundyourwebsite.

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

asyoucansee,therearealotofwidgetstochoosefrom.

Oneoftheprimaryfunctionsofwidgetsistoprovidedifferentwaysofnavigatingyoursite.Butyoucanalsoaddtextwidgetsthatnotonlydisplaytextbutwhichcancontaincomputercode.We’ll

coverthesetextwidgetsinLesson11.

Thenumberandpositionofthewidgetsyoucanusewilldependonthethemeyouareusing.TheTwentyTwelvethemeallowsyoutoinsertwidgetsintoyoursidebarand,optionally,inuptotwofooterareasacrossthebottomofastaticfrontpage.

Otherthemesmayallowyou

toputwidgetsinyourheaderareaoratthebottomofindividualpages.

Here’showtosetupwidgets:

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

AddSomeSidebarWidgetsInthepreviouslessonwediscussedusingcategorieswhenwritingposts.Youcangroupallyourpostsintocategoriesbyplacinga

‘Categories’widgetinyoursidebar.Whenavisitorclicksonacategorytheywillbeshownonlyyourlatestpostsinthiscategory–theywon’tseepostsinothercategoriesthatdonotinterestthem.

Thereallyneatthingaboutthiswidgetisthatitallworkscompletelyautomatically.Youdon’thavetodoanythingexcepttocodeyourpostswiththerequired

category:WordPresstakescareofallthesortingandfilteringforyouandthewidgetwillupdateautomatically.

Iencourageyoutoexperimentforyourselfandseewhatthewidgetsfitinwithyourideasforyourownsite.

Toinsertawidgetintothesidebarsimplyclickanddrag

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

Ifyouwanttorearrangethe

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

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

anythinguntilyouhaveactuallyaddedsomepoststoyourwebsite.

Theeasiestwayforyoutofindoutwhatwidgetscandoforyourwebsiteittoexperiment.PlayaroundbyclickinganddraggingwidgetsintotheSidebarandFooterAreasandseehowitlooks.Youcanaddanddeletewidgetsasmuchasyouwish.

DeleteUnwantedWidgetsIfyouwanttodeleteawidgetfromyoursidebar,simplyclickonitandthenclick‘Delete’anditwilldisappear.Youcanalwaysaddthewidgetbackinagainifyouchangeyourmind.

FAQCanIhavedifferentsidebar

widgetsoneverypage?

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

Butsomethemesdoenable

youtodesignmorethanonesidebarandthenchoosehowandwhentodisplaythem,sothisisnotcastinstone.

Ifyourthemedoesn’tprovidethisandyouhaveagoodreasonforwantingtodisplaydifferentwidgetsinthesidebarondifferentpagesofyourwebsite,thereisausefulplugincalled‘CustomSidebars’thatyoucanusetoachievethis.Pluginsare

coveredinLesson15.

WhatifIdon’twantasidebaronmywebsite?

Thenjustdeleteallthewidgets.Ifyoudon’thaveanywidgets,nosidebarwillbedisplayed.

That’sitfortheQuickStartGuide.Haveyoumadeastart

onyourwebsiteyet?NO?Lessons1-8areallyouneedtogetyourwebsiteupandrunning,albeitinaverysimpleformat.SoIurgeyoutogobacktoLesson1,makeastartandjustdoit.Itgetseasieronceyoumakeastart,Ipromise.

Buildingawebsitemayseemanuphillchallengebut,actually,it’squitegoodfunandyou’llgetagreatsenseof

achievementwhenyouseeyourveryowndomaincometolife…

Ifyouhavemadeastartonyourwebsite,thencongratulations–welcometothecommunityofWordPresswebmasters!TheIn-DepthGuidewilltakeyourwebbuildingskillstothenextlevel.SeeyouinLesson9!

IN-DEPTHGUIDE–DRILLDOWNTOTHEWONDERSOF

WORDPRESS

Lesson9.AddImagesToYourWordpress

WebsiteWordPresshassomeverypowerfulandflexiblewaysofhandlingmediaonawebsite

and,inthislesson,wearegoingtolookatseveralwaysofdoingso

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

youhaveuploadedforuseinyourwebsite.

Mediafilesarelabeledeither‘Attached’or‘Unattached’,dependingonwhetherornotyouhaveactuallyusedthemediabylinkingtoitfromoneofyourpostsorpages.

Addingapictureintoapostorpagetoillustrateyourtextisonewayofmakingyourwebpagelookattractiveandrelevant.IfyouuploadthepicturewhenaddingapostorpageWordPressautomaticallyloadsitintotheMediaLibraryanditbecomesan‘attached’image.

Ifyouwanttoaddanimageforuselater,youcanuploaditdirectlyintotheMedia

Libraryasan‘unattached’imageandthencallitwheneveryouwantit.

Toaddanimagetoapageorpost,youneedtohavetheimagefilestoredonyourcomputerasaJPEG,GIForPNGfiletype,sizedinpixelsthatwillfitonyourpageandgenerallylessthan8megabytesinsize.

WordPressisquiteflexiblein

handlingimagesandwillhappilyresizeyourpicturetofittheavailablespaceinapostorpage.Butit’sworthjustcheckingoutthedefaultsettingsforimagesizesbecauseyourwebsitewilllookmoreprofessionalifyoupresentyourimagesinconsistentshapesandsizes.

Todothis,fromthedashboard,goto‘Settings’,‘Media’(Figure9.2)and

checkoutthepixeldimensionsthatWordPresswillusewhendisplayingyourpictures.Thestandard‘medium’sizeismaximum300pixelsheightandwidth.Ifyourthemeiswiderthanabout1000pixelsyoumaywanttoincreasethisto400or500pixelstodisplayyourimageslarger.

IfyouchangetheMediaSettingsbeawarethatthesettingswillapplyonlytoimagesyouinsertafterthis:WordPresswon’tretrospectivelyapplythesettingstoanyimagesyou

havealreadyinsertedonpostsorpages.

AddAPictureToAPostOrPageToaddanimagetoapostorpage,firstclickonthepointinyourtextwhereyouwanttheimagetoappear.Thiscanbeanywherewithinthetext:rightatthebeginning,orinthemiddleofatextblockoraftertheend.Theimagewill

beembeddedexactlyatthepointyouselecthere.

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

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

Clickon‘SelectFiles’andnavigatetowhereyouhave

storedtheimageonyourcomputer.Clickonthefileyouwanttoupload,andthenclick‘Open’.AscreenasinFigure9.4appears:

HereyoucanseethatthescreendisplaysalltheimagesIhavealreadyuploadedtomyMediaLibrary,withthelatestonecheckedontheleftandthe‘AttachmentDetails’forthelatestimageontheright.

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

Beneaththisisthe

‘AttachmentDisplaySettings’.Hereyoucanspecifythealignmentoftheimage–left,right,centerornone.Iencourageyoutoexperimentwithalignmentsbecauseyoucangetsomeverystrikingeffectswiththerightimageintherightplace.

Youwillalsoseethatthereisa‘LinkTo’box.Thisiswherethevisitorwouldbetakeniftheyclickedonthe

image.Youcanchangethislinktoanythingyoulike:ifthiswasaproductyouweresellingyoumightreplacethiswithalinktoyourorderpage.

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

Finally,youcanchoosethesizeoftheimagewithinthepostorpage.Youroptionsherearedeterminedbythesettingsyouspecifiedearlierinthislesson.Again,experimentwiththistogettheeffectsthatyouwantforyourwebsite.

Thenclickon‘InsertintoPost’andFigure9.5showswhatthepagewilllooklike:

Nowlet’shavealookatuploadingimagesdirectlyintotheMediaLibraryforuselater.

AddAMediaFileToTheMediaLibrary

Sometimesyouwillwanttoaddanimage(orsomeothermedia)tobedisplayedsomewhereonyourwebsiteotherthanapostorapage.Inthatcase,youneedtouploadittotheMediaLibrarybeforeyoucanuseit.

Forexample,IhaveagraphicfileonmycomputerthatisactuallyalittlebannerthatIwanttoplaceinmysidebartoadvertiseaproductthatI

wanttopromoteonmywebsite.IwillcoverhowgettheimageintothesidebarinLesson11buthereI’llbrieflyshowyouhowtouploadtheimagetotheMediaLibrary:

Fromthedashboard,clickon‘Media’/‘AddNew’.

Clickon‘SelectFiles’anduploadtheimageasbefore.

Asbefore,itisgoodpracticetoenteratitle,alternatetext

anddescription,whichwillhelpwithSEO(seeLesson18)thenclickon‘Saveallchanges’.That’sit.ThefileisnowstoredonyourWordPressMediaLibrary,readyforwhenyouneedit.

AddAFeaturedImageThisisarelativelynewWordPressfacilitywhichletsyouassociateanimagewitha

postorpage.Atthetimeofwriting,featuredimagesarenotusedineverythemeanddifferentthemesusethemindifferentways.However,TwentyTwelvedoesusefeaturedimagesandthisishowtousethem:

Essentially,thefeaturedimagefacilityinTwentyTwelveenablesyoutoinsertanimageabovethepost/pagetitleandbelowtheheader

image(ifpresent)andsitetitle.Ifyoudonothaveaheaderimageforyoursiteandyouuploadasimilar-sizedimage(960pxx250px)asafeaturedimagetoapostorpage,itwilleffectivelybecometheheaderforthatpost/pageonly.

Inthescreenwhereyouaddorupdateapostorpage,youwillseeatthebottomoftheright-handmenuabox

labeled‘FeaturedImage’.Click‘Setfeaturedimage’andyouwillbetakentoascreensimilartotheonesillustratedabove,whereyoucaneitheruploadanimageoruseonefromyourMediaLibrary.Clickon‘Setfeaturedimage’andyouwillseetheimagethumbnailappearonyourpost/page.That’sall–save/updateyourpost/pagebutdonotinsertthesameimageintoyour

post/pageoritwilldisplaytwice!

Whenyouviewthepageyouwillseeyourimageatthetop.

AddAPictureGalleryIfyouareaphotographeroranartistoranyonewhowantstodisplayalotofpictures,youmightwanttoaddagalleryofpicturestoapage

orpost.A‘gallery’isawayofdisplayingthumbnailsofimagesonapageinarectangulargridandwhenavisitorclicksonanimagetheycanseeitfullsize.

Inthiscase,itispreferabletopreparetheimagesfirstonyourowncomputer,sothattheyareallthesameorientationandsize(inpixeldimensions).Thatwaythegallerydisplaywilllook

professional.

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

WordPresswilldisplaythumbnailimagesonyoursite.

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

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

ThenSaveorPublishyourpostorpageandyoucanthen

viewthepagetoseethegallery,asinFigure9.6:

Asyoucanimaginefromwhatyou’veseen,thereareactuallyagreatmanyoptionsfordisplayingimagesandothermediainWordPress,someofwhicharerather

specializedandwouldbeofinteresttopeoplelikephotographersandgraphicartistsetc.

Also,thereareanumberofveryfancypluginsyoucanusetodisplayimagesinaslideshoworgallerythatgowaybeyondthebasicfacilitiesshownhere.Andsomethemesoffera‘slider’functionthatcanincludesomeverydramaticeffects.

InthislessonIhaveshownthebasicmethodsofaddingimagesandmediathatyouaremostlikelytouseinaregularwebsite.Asever,Iencourageyoutoexploretheoptionsfurtherforyourselfifyouwanttobeabitmoreadventurous.

IaddedanimagetomypostbuthowcanImoveittoadifferentposition?

Inthe‘EditPost’page,clickontheimagethatyouwanttomoveanddragittowhereyouwantit.Ifthatdoesn’twork,clickontheimageandthenclickonthesmall‘EditImage’iconthatappearsinthefartopleftofthepicture.Thisdisplaysapop-upwhichallowsyoutoeditthe

alignment,link,title,captionetc.Makewhatchangesyouwantandthenclickthe‘Update’button.

Or,ifyouwanttostartover,clickontheimage,hitthedeletekeyonyourkeyboard,insertthecursorwhereyouwanttheimagetoappearinyourtextandinserttheimageoveragain.

Thenclick‘Update’toupdate

thepostorpage.

HowcanIgetoneofthosemovingslideshowsonmywebsite?

Thereareanumberofverygoodpluginsthatwilldisplayaslideshowofimagesanditisworthexperimentingwithseveraltofindtheonethatsuitsyou.Someslideshowpluginswilldisplaythegallery(seeabove)associated

withapostorpagewhileotherswillrequireyoutouploadyourimagesseparately.

OneslideshowpluginthatIcurrentlylikeiscalled‘PortfolioSlideshow’becauseitisrelativelyeasytosetupandthereisalsoalow-cost‘pro’versionofitavailable.SeeLesson15forhowtofindandinstallplugins.

Lesson10.AddAVideoToYour

WebsiteVideosarenowapopularfeatureofmanywebsitesandWordPressmakesitquiteeasytoincludetheminpostsorpages.

ForreasonswhichIexplainintheFAQbelow,Idonotrecommendthatyouupload

videostoyourMediaLibrary.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.

WordPressknowsthatthisisanapprovedvideositeandwilltranslatetheURLintoanembeddedvideo.Magic,orwhat?

WhenyouviewthepageitwilllooksomethinglikeFigure10.2:

Theframeofthevideoisshowninthecontentofthepost/pageandwhenthevisitorclicksonthe‘Play’

buttonthesoundandpictureplaysfromYouTube.

FAQHowcanIaddavideothatIrecordedmyself?

ItispossibletoembedyourownvideofilesintoaWordPresswebsitebutyoudoneedtobeawarethatvideoscanbeverylargefilesandthereisafilesizelimitof

8megabytesthatyoucanuploadviaWordPressintoyourMediaLibrary.Thisrestrictionseverelylimitsyouroptionsfordisplayingself-hostedvideos.

And,becausevideofilesareusuallyverylargeandeatupbandwidth,ifyouhaveabasichostingplanyoumayfindthatyourhostingproviderwillwanttochargeyouextraifyouwanttohost

yourownvideosonyourownwebsite.

TheeasiestwaytoshowvideosonyoursiteistouploadthefiletoYouTubeorFlickr(oranyofthemanyotherfreevideohostingsites)andusethecodethattheyprovide(asexampleshownabove)toembedthefileintoyourpostorpageasshownabove.Butifyoureallydoneedcommercialvideo

hostingthereisalwaysAmazonWebServices(aws.amazon.com)who,forafee,willprovideapowerfulvideoservingfacilitythatisusedbymanyoftop-namewebmasters.

Ifyoudon’twanttodoitthiswayandyourfilesizeislessthan8mbthenIsuggestyousearchforpluginsthatwilldothejob(seeLesson15).Iwon’trecommendany

particularpluginbecausetherearenewonescomingoutallthetimeandtheyalldifferinwhattheycandoandhow.Butspendsometimeexperimentingwithpluginsuntilyoufindwhatyouwant.

BeawarethatyoumayneedtouseHTMLtodothisjobandsoyoushouldalsostudyLesson19whereIshowyouhowtodothis.

Inthenextlessonwe’llbelookingathowtoenhanceyourwebsitewithtextwidgets.Thiscoolfeaturegivesyouendlessoptionsofaddingmorefunctionalityandmakingyoursiteunique.

Lesson11.ThePowerOfText

WidgetsWelookedatthebasicsofWidgetsinLesson8butthereareanumberofotherthingsyoucandowithwidgetsthatwillprovidemuchmorefunctionality.

Thebestwaytoseewhatwidgetsingeneralcandois

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

Butthereisonewidgetthatwillprovidealmostendless

variationsandpossibilitiesandthatistheTextWidget.

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

renderstheresultswhereyouhaveplacedthetextwidget.

Thisfacilitycan,forexample,enableyoutodisplaygraphicsandadsinyoursidebarandhereI’llshowyouhow.

AddAnImageUsingATextWidgetThereisn’t,asyet,asimpleWordPresswidgetthatlets

youplaceapictureinthesidebarbutitcanbedoneeasilyenoughwithabitofHTML.ThisexamplewillincludeaneasypieceofHTMLcodethatyoucancopyandeditintoatextwidgetthatwillplaceagraphicinyourownsite.

ThefirstthingyouneedtodoisuploadtheimagefiletoyourMediaLibrary(seeLesson9)andcopytheFile

URLoftheimagefiletoyourclipboard.

TheeasiestwaytoconstructtheHTMLforthistotypeitintoatexteditorsuchasNotePad.Sotypethispieceoftext(exactly!)intoNotePad:

<imgsrc=““/>

andthenplaceyourcursorbetweenthetwoquotationmarksandpastetheFileURL

youjustcopiedtotheclipboardintothatspace.Thisiswhatthislookslikeformychickenkeepingsite:

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

Now,goto‘Appearance’,‘Widgets’anddragatextwidgettothesidebarwhereyouwanttodisplaythatfile.Thencopyandpastethe

snippetofNotePadtextintothetextwidget,‘Save’and‘Close’.

Viewyoursitetoseetheresults.Figure11.1showswhatmysitenowlookslike,withalittlegraphicimageinthesidebar:

UseATextWidgetToDisplayABannerAdOneofthingsthatwebmastersliketodoisto

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

Ifyouareadvertisingathird-partyproduct,themerchantoragentwilloftenprovidethecompletecodetodisplay

thead.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.Betweenthesecondsetofquotation

markspastetheFileURLoftheimageinyourMediaLibrary.

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.

YouhavetohaveacompletedwebsitewhichisgettingsometrafficbeforeGooglewillallowyoutosign

uptoAdSense.Butonceacceptedyoucandisplayadsonanysiteregisteredtoyou.

GoogleprovidessnippetsofJavascriptcodeforyoutodisplaytextandimageadsinvariousshapesandsizes,dependingonwhereonyoursiteyouwanttodisplaytheads.A‘skyscraper’orothernarrowverticalformatwouldbesuitableforasidebar.

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

Nowlet’sgetontoanother

vitalelementofasuccessfulWordPresswebsite:CustomMenus.

Lesson12.CustomMenusAndWhyYouShouldUseThem

CustomMenusarearelativelynewfeatureofWordPressbuttheyaddalotofflexibilityandpowertothedesignofaWordPresswebsite.

WhatIsACustomMenu?

Ifyoulookatmostwebsitesyouwillseethattheyhavesomewherearowoftabswhichconsistoflinkstopagesorareaswithinthesite.Thisrowoftabsiscalleda‘menu’.

AsshowninFigure12.1,menusareofteninaprominentpositionatthetopofthepageandtheirlabelsprovidecluesastowhereyouwillbetakenifyouclickon

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

Theproblemwasthat,ifyouhadalotofpages(orpageswithlongtitles),yourmenuwouldbecomeverycrowdedandcouldevenconfuseyourvisitors.

Bydefault,thisishowWordPresswillstillbehave.IfyouhaveonlyafewpagesinyourwebsitethenmaybethisissufficientandyoumaynotneedtohaveCustomMenus.

Butifyouwanttochoosewhatgoesinyourmenuand/ordecidewhethertohavemorethanonemenu,thenyoushouldmakeuseofcustommenus.

HowToCreateAPrimaryMenuA‘PrimaryMenu’isonethatyourthemehasalreadyconfiguredintoitsdesign.TheTwentyTwelvetheme

hasbuilttheprimarymenuintothehorizontalmenubaratthetopofthepage,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,postorevena

pictureinsideyoursite,oralinktoanotherwebsite.TypethefullURLofthelocationyouwanttolinkto,enterthe‘Label’,whichisthetextthatwillappearonthemenutabandclick‘AddtoMenu’.Youcanaddasmanyoftheseasyouliketothemenu.

‘Pages’enablesyoutopickandchoosefrom

thepagesyouhavesofarpublished.Thebeautyofthisoptionisthatyoucanputsomepagesinonemenuandsomeinanotherandyoucanalsoorderthemhoweveryouwant.Checkthepagesthatyouwanttoincludeonthismenuandclick‘AddtoMenu’.

‘Categories’referstothe

categoriesrecordedonPosts.Ifyourwebsiteconsistsmostlyofpostsyoucanhaveamenuthatenablesyourusertobrowseselectedcategoriesfromyourmenu.

Asyoucansee,youhavetochecktheitemsthatyouwanttoincludeonthemenuandclick‘AddtoMenu’.Youcanmixandmatchthedifferent

typesofmenuitemsinonemenuifyoulike.

Ifyouwant,youcanalsochangethe‘NavigationLabel’toadifferenttitlethantheonethatwouldappearasdefault.Expandthemenuitembyclickingonthedownarrowtoseetheboxwhereyoucandothis.

Theitemswithinthemenucanbedraggedanddropped

intotheorderyouwantthemtoappear,andanotherneatoptionisthat,ifyouhavealotofitemsinthemenu,youcanarrangethemintoahierarchybysimplydraggingpagesslightlytotherightandtheywillnestbeneaththeonesabove.

Whenthemenuitemsareassembledhowyouwant,justclick‘SaveMenu’andit’sdone.

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

HowToCreateA

SecondaryCustomMenuInadditiontothePrimaryMenu,youcancreateasecondarymenu(andadditionalmenus)thatyoucandisplayinthesidebarorotherareasofyoursite.Whenyouhavealotofpages,orcategories,orotherdestinationswhereyouwanttosendyourvisitors,thiscan

beausefulwayofdividingthenavigationofyoursiteintomoremeaningfulsections.

Forexample,youcouldhavethemoreimportantandinterestingpagesinthePrimaryMenuupatthetopbutother,lessimportant,pagessuchasPrivacyPolicy,TermsofService,andSiteMapasasecondarymenuinlessvisiblelocationssuchas

thesidebarorfront-pagefooter(seeLesson13).

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

Thenenteranothermenuname,asbefore,andclick‘CreateMenu’.Youcanthenpopulatethatmenuwiththe

pages,CustomLinksorcategoriesthatyouwantandclick‘SaveMenu’.

PositionYourCustomMenusUsingWidgetsWhenyouhavecreatedasecondarycustommenuyoucanpositionitwhereyouwantitbyusingthe‘CustomMenu’widget.

Todothis,fromthe

dashboard,click‘Appearance’,‘Widgets’anddragaCustomMenuwidgetintothesidebarorotherwidgetareaprovidedbyyourtheme,asshowninFigure12.4:

Selectthemenutoappearinthatspaceandthenclick‘Save’.

Asyoucanimagine,thepossiblecombinationsandvariationsonhowyoucanusethisareendless.

IhopeIhavedemonstratedsomeofthewaysyoucanuseCustomMenus,butyoucanexperimentforyourselfanddiscoverhowyoucanusethisfeaturetomakeyourwebsitelookandbehavethewayyouwant.

FAQHelp-Ihavejustchangedthethemeonmywebsiteandmycustommenuhas

disappeared!What’shappened?

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

Ifyourthemedoessupportcustommenusthenreadon.

WhenyouchangeyourWordPress

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

Lesson13.SetTheHomePageOfYourWordpressWebsite

OneofthedifferencesbetweenbuildingaWordPresswebsiteandcreatingoneusingtraditionalHTML-typetoolsisthatWordPressletsyouchoosewhichpageyouwantasyourfront(home)page.Thisisthefirstpagethatvisitorswillsee

whentheylandonyourdomain.

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’.Thispage

willthenbecomeyourhomepage.Notethatifyouhaven’tcreatedthispageyet,itwon’tappearinthedrop-down!

2012FrontPageTemplateThe2012WordPressthemeprovidesanoptionalspecialtemplateforyoutouseforyourfrontpage.Thisdoesnothaveasidebarbutinsteadhastwoseparatefooterwidget

areasbeneaththemainarticleonthepage.

Whatthismeansisthatyoucould,forexample,constructa‘welcome’-typepageandthenshowasub-setofnavigationlinksinthetwolowerwidgetareas.Youcanthenleadyourvisitorintotheareasofthesitethatyouwouldlikethemtovisitfirst.

Ihavedonethisonthefront

pageofmychickenkeepingsiteasshowninFigure13.2:

GroupYourPostsOnToTheirOwnPage

There’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,thelatestpostwilloccupythespaceatthetopof

thepostspageandallolderpostswillscrolldownbeneathit.Becauseofthisitisagoodideatodecidejusthowmanypostsyouwanttoseescrollingdownthepage.Ifyouwantyourwebsitetolookmorelikeaconventionalwebsitemaybeonewillbeenough.WordPressinitiallysetsthisnumbertotenwhichisprobablytoomanyformostpurposes.

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

Again,thisisillustratedinFigure13.1whereyoucanseethatIhavesetmy‘News’pagetodisplaythreeposts.

Thissettingwillbeappliedwhetherornotyouhaveastaticfrontpage.

Whenyou’redone,clickon‘SaveChanges’.

SetAStickyPostAnotherusefulfeatureofpostsisthatyoucandesignateoneofyourpoststobe‘sticky’,whichmeansthatitwillalwaysappearabove

otherpostsofalaterdate.Thiscanbeveryhandyifthereissomepermanentinformationthatyoualwayswanttodisplay(‘HowToOrder’…)onthetopofyourfrontpagebuttohavelaterpostsscrollingbeneathit.

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

showninFigure13.3.

Whenyoupublishorupdatethepost,itwillalwaysappearonthefrontpageofyourposts.

FAQIwantafancyfrontpage

witharectangulargridshowingexcerptsandlinkstomysite’sfeaturedposts.HowcanIgetthat?

Youaretalkingaboutwhatisknownasa‘magazine’theme.Thisletsyouselectaparticularpagetemplatetouseonyoursite’shomepagewhichpresentsexcerptsandthumbnailstoselectedposts.Magazinethemesusuallycomewithmanyoptionsto

configureandcustomizehowyouwantthecontenttoappearandtheyoftenusesomeadvancedWordPressoptions.

TherearesomegoodfreemagazinethemesavailableonWordPress:checkoutBombax,PurelineandBirdSITE,althoughtherearemanymore.

Ifyouwanttogodownthisroute,Irecommendthatyouexperiment

withfreethemestostartwithbecausetherecanbealearningcurveinworkingoutthebestwayforyoutodisplayyourparticularcontent.Whenyouknowwhatyouwantyoucaninvestigatesomeoftheavailablepremiummagazinethemeswhichcanprovidesometrulyimpressiveresults.

Lesson14.ChooseAndChangeYourWordpressTheme

WordPressthemesarethedesigntemplatesthatdeterminetheappearanceofthewebsite.Therearehundreds(thousands?)offreethemestochoosefromandyoucan(usually)switchthethemequiteeasilyifyouchangeyourmindaboutwhat

youwant.

YoushouldbeawarethattheTwentyTwelvethemethatwehaveusedtoillustratethistutorialonlyoffersasub-setofthepossibleoptionsthatWordPressprovidestopresentyouronlinecontent.

Forexample,somethemesoffermorethanoneheaderwidget,othersprovideslidersandgalleries,andsomehave

built-infunctionslikeopt-inboxeswhileotherscanformatyourcontentinamagazine-likeview.

So,ifyouthinkthatyourrequirementsaretoocomplexforWordPresstorender,Iurgeyoutothinkagainandexploresomeofthemorefeature-richthemesthatsomeverycleverdesignershaveprovidedforyou.

WordPressoffersmanyfreethemesonitswebsitethatyoucaninstallwithafewclicksofthemouse.Othersareofferedbythirdparties,someforfreeandsomeforsale.

Youcancommissionaprofessionaltocreateauniquethemejustforyouoryoucanevencreateyourownthemesbytheuseofdrag-and-dropsoftwaresuchasArtisteer.

SeetheConclusionofthistutorialtofindoutwheretoreadmoreabouttheseoptions.

Buttoillustratethe

possibilities,wearegoingtogototheWordPresssiteandpickafreetheme.

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

You’llseeamenuwhereyoucansearchforavailablethemes:

Ifyouknowwhatshapeandcolorofthemeyouwant,thenclickontheappropriatecheckboxesandthenclickon‘FindThemes’toseewhatcomesup.

Alternatively,youcanbrowse

thelatestoffers.Youcouldclickonthe‘Featured’tabbecausethesethemesareusuallyverystrikingandwilloftensuggestideasforhowyoumightbuildyoursite.

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

originaldesignsthatIhappentolike.Ifyouknowthenameofthethemeyouwantyoucansearchforitintheboxatthetopoftheabovescreen.

Whenyoufindathemethatyoulikethelookofyoucanclickon‘Preview’toseehowthethemewilllookonthescreen.Thiswillpopupinanewwindowwhichyoucanclosewhenyou’veseenenough.It’salsoagoodidea

toclickonthe‘Details’linkstoseehowmanystarsthethemehasbeenawardedbyotherusers–themorethebetter.

Whenyou’vefoundathemethatyoulike,clickon‘Install’andthenon‘InstallNow’inthepop-upwindow.Thiswillautomaticallyuploadthethemetoyourwebsite.Youcannowpreviewthethemeagainasit

willlookonyourownwebsiteand,ifyoulikeit,click‘Activate’andyou’redone–you’vechangedthetheme.

YoucanchangethethemeofyourWordPresswebsiteasoftenasyoulike,butitisagoodideatodoyourexperimentingearlyoninthedevelopmentofyoursite.Whatyouideallywantistofindathemethatfitsthestyle

andpersonalitythatyouwanttoportrayandthensettledownwhenyouarecomfortablewithit.Yourvisitorswillsooncometorecognizethelookandfeelofthewebsitewithyourparticularstyle.

Ifyouchangethethememorethanonceyouwillprobablyendupwithseveralnon-activethemefilesinthebackground.Youcan,ifyou

wish,gobackandre-activateathemethatyou’vepreviouslyinstalled.But,whenyouknowthatyoudon’twanttomakeuseofapreviouslyinstalledtheme,it’sagoodideatosimplydeleteitbecauseitwilljustbetakingupspaceonyourwebhostingserver.

Afterinstallinganewtheme,havealookattheoptionsitgivesyouforchangingthe

header,widgets,colors,orwhatever.Thetheme’sauthormayprovidealinktotheirwebsitewhereyoucanfindoutmoreaboutthisthemeorothersthattheymayhaveonoffer.

InstallAThird-PartyThemeFromAZipFileIfyouhaveathemethatyou

haveobtainedfromathirdparty,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)andthendecidetochangeyour

theme,thenewthememaynotautomaticallypickupallyourcontentanddisplayithowyouwant.

Itmaybejustfine,butbeawarethatthisisapossibilityandyoumayhavetoreinstallyourwidgetsand/ormenus.Thisisnotusuallyabigdealbutitmayjustcauseabitofunexpectedwork.

WordPressissuesnew

softwarereleasesfromtimetotimeandsometimesthesearemajorupgradeswhichrequireathemetobeupgradedaccordingly.Mostreputablethemedesignerskeeptheirthemesuptodatebutbeawarethatyoumaybeforcedtochangeyourthemeifyourdesigner’sthemegetsoutofsyncwiththelatestWordPressrelease.

FAQHowcanIdesignmyowntheme?

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

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

ConclusiontofindoutmoredetailsofArtisteer.

What’sa‘childtheme’?

Childthemesareratherbeyondthescopeofthistutorial,butIwillbrieflyexplainwhattheyareandhowtheycanbecomeuseful.

Essentially,achildthemeenablesyoutocreateathemethatinheritsmostofitscharacteristicsfromanother

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

Youdothisbycreatingasmallstylesheetfile(style.css)thatcontainsthe

changesthatyouwanttooverridethecorrespondinglinesintheequivalentparenttheme’sstylesheet.

Theprincipleisthattheoriginalparentthemeremainsunchangedandcanbesubjecttoupdatesandenhancementsbutthechildtheme’sstylesheetwillalwaysbelinkedintotheparentandthechangeswillstillapplyatrun-time.

ThisisarelativelynewattributeofWordPressandtheirdevelopmentteamhasstatedthatchildthemeswillbecomemoreimportantasfutureWordPressupdatesoccur.Attheveryleast,itwillprobablymeanthattoolswillbecomeavailablefornon-techuserstotweakandpersonalizetheirthemeswithouthavingtoriskcompromisingthefunctionalityofthe

underlyingtheme.

So,watchoutformoreannouncementsfromWordPress

aboutchildthemes.

Lesson15.ThePowerOfPlugins

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

Theyarecalled‘plugins’

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

TherearethousandsofWordPresspluginsavailablebut,inthislesson,we’rejust

goingtoinstallafewoftheonesthatIconsideressential.Theyareallfree.Iwillexplainwhattheydoandhowtousethemaswegoalong.

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

HowToInstall

PluginsFromthedashboard,click‘Plugins’.YoushouldseethelistofcurrentlyinstalledpluginsasinFigure15.1:

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

Youwillprobablyseesomeoftherecommendedpluginsstraightaway.

Toinstallaplugin,allyouhavetodoisclickon‘InstallNow’onthatplugin’slistingandconfirmthatyoureally

dowanttoinstalltheplugin.ThenWordPresstakesover,installsthepluginonyourwebsiteautomaticallyandthenallyouhavetodoisactivateit.

Youshouldrepeatthisstepforalltherecommendedpluginsthatyoucanfindonthefirstpageof‘Popular’.

Ifyoucan’tfindthepluginonthe‘Popular’page,thenthe

otherwayoflocatingapluginistosearchforit.Insteadofclickingon‘Popular’,usethe‘Search’boxonthe‘InstallPlugins’page.TypetheexacttitleofthepluginintotheSearchboxandclick‘SearchPlugins’.Youmaybepresentedwithmorethanonechoicesobesuretopicktheonethathastheexacttitle,andtheninstallthepluginasabove.

RecommendedPluginsSo,thepluginsIrecommendare:

GoogleXMLSitemaps

ThispopularpluginprovidesaGoogle-compliantsitemapforyourwebsite.

What’sasitemap?Well,itisafilecalledsitemap.xmlthatsitsinthebackgroundon

yourwebsiteandwhichcontainsacompletelistofallyourwebsite’spagesandpostsanddocumentstheconnectionsbetweenthem.

Thesitemapfileisthereforthebenefitofthesearchengines,tohelpthemfindtheirwayaroundyoursiteandindexitaccordingly.Sitemapsarenotreallyforhumanvisitors!

MostprofessionalwebsiteshaveasitemapandthispluginisconsideredtobeessentialforeffectiveSEO.

Thepluginupdatesthesitemapautomaticallyeverytimeyouadd,deleteoreditsomethingso,onceinstalled,youdon’thavetodoathing.

AllInOneSEOPack

This,inmyopinion,isanotheressentialSEOplugin.

Itprovidesallthefeaturesyouneedtooptimizeyoursite’spagestorankinthesearchenginesforyourchosenkeywords.

Whenyouinstallthe‘AllInOneSEOPack’pluginandactivateityouwillseearedwarningpromptatthetopofthescreenaskingyoutoconfiguretheplugin.Seebelowforinstructionsonhowtodothis.

ContactForm7

Havingsomewhereonyoursitewhereyourvisitorscancontactyouisconsideredgoodpracticeandmakesyoulookseriousandtrustworthyinyourcustomers’,andthesearchengines’,eyes.

Simplystickingupanemailaddressonyourwebsiteisnotagoodideabecauseitwillquicklybeharvestedbythe

spamphishersandyouremailaddresswillrapidlybecomeunusable.

Thispluginprovidesasecurewayforpeopletocontactyouprivatelyandwillprovidethecredibilityyouneedtopresentaprofessionalfacetotheworld.LaterinthislessonIwillshowyouhowtocreatea‘Contact’page.

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

ConfigureAllInOneSEOPackClickonthelinkontheredpromptmessageatthetopofyourwebsitepageandyou’ll

gettotheoptionspageforthisplugin,asshowninFigure15.3:

First,clicktheradiobuttonnexttoPluginStatus,‘Enabled’.Thenlookatthethreeboxesbelowentitled‘HomeTitle’,‘HomeDescription’and‘HomeKeywords’.Thesearetheboxesthattellthesearch

engineswhatyoursiteisallabout.

Thetextyouenterherewillshowuponthesearchresultswhenyoursiteappearsontheirlistings.Figure15.3showswhatIenteredformywebsite.

Enteryourtextandscrolltothebottomofthepageandclick‘UpdateOptions’.Therearealotofothertechnical

optionsavailableonthispageanditissafetoleavethedefaultsastheyare.

NowthatyouhaveinstalledthispluginyouwillnoticethatithasaddedsomesimilarboxestotheindividualPagesandPostsscreens:

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

webpageandisprovidedsolelyforthesearchengines;yourhumanvisitorswillnotseethisinformation.

Itisgoodpracticetofilltheseeachtimeyouaddyourpagesandposts.IwillcoverthistopicagaininLesson18.

ConfigureContactForm7Fromthedashboard,click

‘Plugins’andclick‘Settings’for‘ContactForm7’.

Thereisnothingreallytochangehere,butitwouldbeagoodideaforyoutocheckthattheemailaddressquotedonthispageistheemailyouwantyourmessagestobesentto.Thiswillnotappearonthecontactpageandwillnotbevisibletoanyoneotherthanyou.Ifnecessary,changethisemailaddressand

thenclickon‘Save’.

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

AddAContactPageNow,let’squicklyadda‘ContactUs’page.Fromthedashboard,click‘Pages’,‘AddNew’.Enteratitlesuch

as‘ContactUs’andthenpastetheshortcodeyoujustcopiedintothebodyofthepage.Youcanaddsomesurroundingtextifyoulike,andthenclick‘Publish’.Easy–youjustgotyourselfa‘Contact’page.

Whileyouaregoingthroughthisexerciseyoumaywellseeotherpluginsthatlook

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

Youcanfindoutmoreaboutapluginbyclickingon‘Details’againstthatpluginonthe‘InstallPlugins’page.

Therearemany,manymorepluginsthatyoucanuseandIleaveyoutodiscoverandinstallthemyourself.ButaquickwordofadviceifthisisthefirstWordPresswebsiteyouhaveeverbuilt.Don’t

overloadyourwebsitewithpluginsifyoucannotjustifythattheyarenecessaryforthefunctionalityofyoursite.

Pluginscanclutterupyoursiteandslowitdownandcan,fromtimetotime,conflictwithoneanother.And,aswiththemes,pluginscanbecomeoutofdateandcanstopworkingiftheplugin’sauthorhasnotkeptuptodatewiththecurrentversionof

WordPress.So,takeitstepbystepandbealittleself-disciplinedinyouruseofplugins,atleastatfirst.

FAQWhatisthebestpluginforkeepingtrackofthenumberofvisitorstomywebsite?

‘GoogleAnalytics’isthesystemusedbymostprofessionalwebmastersand

thisprovidesanextensivebreakdownofhowmanyvisitorsyoursiteattractsandwheretheycomefrom.

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

WhenyouhaveaddedyourwebsitetoyourGoogle

account,youareprovidedwithasnippetoftrackingcodewhichyouhavetoincludeonyourwebsite.ThisoperatesinthebackgroundandinvisiblymonitorsyourvisitorssothatGooglecanpresentyouwithadetailedbreakdownofyourwebsitetraffic.YoucanseethedailyresultsofthisbyloggingintoyourGoogleAnalyticsaccount.

TherearevariouspluginswhichenableyoutoaddthetrackingcodetoyourwebsiteandtheoneIcurrentlyfavoris‘GoogleAnalyticsforWordPress’.Searchforthispluginasexplainedabove,installitandcopyandpasteyourtrackingcodeasdirected.

Havingsaidallthis,whenyoufirstgetstartedGoogleAnalyticsmaynotbevery

usefulbecauseyoumaynotactuallybegettingmanyvisitors.So,youdon’tneedtorushintothisuntilyouhaveyoursiteupandrunning(say,afteramonthorso).

Lesson16.Comments:StartADialogueWithYour

VisitorsYoumayrememberthat,inLesson5,Icautionedyouaboutallowingpeopletocommentonyourpostsandpagesbecauseofthenuisanceofspam.Leavingopentheopportunityforvisitorstoadd

theirowncontentcanturnyourwebsiteintoamagnetforspammersaroundtheworldtopostgarbageand,attimes,someseriouslyoffensivematerial.

EnableCommentsHowever,ifyouhaveagoodreasonforinvitingyourvisitorstoleavecommentsonyourwebsite,andifyouarepreparedtomoderateit,here

iswhatIrecommendyoudo:

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

Allowpeopletopostcommentsonnewarticles

Commentauthormustfilloutnameandemail

Anadministratormustalwaysapprovethe

comment

Commentauthormusthaveapreviouslyapprovedcomment

AsyoucanseefromFigure16.1,thereareothersettingsonthatpagethatareself-explanatoryandyoucandecideforyourselfwhatelseyouwanttocheck.

Thenclick‘SaveChanges’.

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

Tosetupselective

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

Whereitsays‘Showonscreen’makesurethe‘Discussion’boxischecked.

Whatthiswilldoistoadda‘Discussion’boxonthescreenwhereyouaddanewpage.Youcanthencheckoruncheckwhetheryouactuallywantacommentboxonthatpageatthetimethatyouaddorupdatethatpage.

DothesamewiththeScreenOptionsonthe‘Posts’,‘AddNew’.

ModerateComments

ToBanishSpammersNotethatIrecommendthatcommentsmustbeapprovedbeforeappearingonyourwebsite.

Thewaythisworksisthat,whensomeonepostsacommentviaapageorpostonyoursite,theadministrator(you!)willreceiveanemailinformingyouthatanewcommentisawaiting

moderation.

Youthenhavetoapprovethecommentbeforeitispublished.Whenyouapproveacommentitwillappearonthepagewhereitwasoriginallyposted.Butifthecommentisspamyoucanmarkitasspamanditwilldisappear.

Ifavisitorpostsacommentandyouapproveit,then,if

thatvisitorevervisitsyoursiteagainandusesthesameemailaddress,theycanpostanothercommentwhichwillbeautomaticallyapproved.That’sbecauseWordPressassumesthatyoutrustthisvisitorandthattheirfuturecommentsaregoingtobeOK.

Thisisgenerallytruebutafewpeopledoabusethissoit’sagoodideatojustkeep

aneyeoncomments.Youcaneasilytrashanythatareunwelcome.

Moderatingcommentsyourselfwillprobablybeallyouneedtodointheearlydaysofyourwebsitebecausethevolumeofusercommentswilllikelybemanageable.Butwhatifthespammersfindyouandyouaresuddenlyoverwhelmedbyhundredsofspamcomments?

Theansweristouseaplugintofilterthecommentsbeforetheyevengetthroughtoyoursite.Theanti-spampluginsIuseandcanrecommendare:

Akismet

SpamFreeWordPress

Youwillonlyneedtouseoneofthesepluginstofilterspam.Akismetisthemost

popular(and,inmyopinion,themostreliable)butyouwillhavetopayasmalllicensefeeifyourwebsiteisforcommercialpurposes,otherwiseitisfree.

Atthetimeofwriting,eachofthesepluginsisavailableandup-to-datebutIrecommendyoucheckthemalloutandselecttheonethatseemsmostappropriateforyou.Tofindoutmoreabout

eachofthem,searchforthembynameasdescribedinLesson15.

FAQIfsomeonepostsacommentonmywebsite,canIpostmyownreplytothatcomment?

Yes.Youcan,ineffect,enterintoadialoguewithyourcommentingvisitors.Whenanyoneaddsacommentto

yoursiteandyouapproveit,a‘reply’linkwillappearalongsideit.Toenteryourownreplytothatcomment,displaythepost/pagewherethecommentappears,clickonthe‘reply’linkandanothercommentboxwillappearforyoutoaddyourreply.

Help-Ihavesetmysitetoallowcommentsbutno-onehaseveraddedacomment!

WhatamIdoingwrong?

Relax–intheearlydaysofawebsiteyouwillprobablynotbegettingmanyvisitorsandthosewhodovisitmayjustbepassingby.Andevenwhenyoudogettraffic,inmostcasesonlyaverysmallpercentageofvisitorswillactivelycontributetheirowncomments.

Giveittime.Postregularlyto

yoursiteandtrytobuilduparegularreadership.

Whynotaddsomecontroversialtopicandaskyourreaderstohavetheirsay?Youcouldeveninviteyourfriendstochipinandstartoffadiscussion.Justkeepatit!

Lesson17.UsersAndTheirCapabilities

Bydefault,WordPressassignstheroleof‘administrator’totheuser(you!)whocreatedtheWordPressinstallation.Theadministratoristhepersonwhohasthecapabilitytodoeverythingwiththewebsite–add,amend,deletepages,postsandmedia,changethe

theme,setpasswords,installplugins,managewidgetsandaddordeleteotherusers–andmore.

Asauser,youhaveaprofile.Toseeyours,fromthedashboard,click‘Users’,‘AllUsers’andyouwillseeyourusernamelisted.Hoverthemouseoveryourusernameandclick‘Edit’whenitpopsup.You’llseealltheinformationthatWordPress

knowsaboutyou,asshowninFigure17.1:

Youdon’thavetoaddanymoreinformationifyoudon’twanttobut,ifyoudo,someoftheinformationmaybevisibletovisitorstoyoursite.

Notethathere,atthebottomofthepage(Figure17.2),is

whereyoucanchangeyourpassword.ThisisthepasswordyouneedtologintotheWordPressdashboardandyoucanchangethiswheneveryouwantto.

Justtypeinthenewpassword(twice)andthenclickon‘UpdateProfile’.

Ifyouarethefounderofyourwebsiteandyouwillbetheonlypersonwhoeverworksonit,thenyoucannowsafely

skiptherestofthislesson.

Butiftherecouldbemorethanonepersonworkingonthesitethenyouwillneedtoknowhowtocreateotherusers.

AddAnotherUserToaddanotheruser,fromthedashboard,click‘Users’,‘AddNew’.Asyoucanseefromthescreen,thefieldsat

thetopofthescreen(Username,E-mail,FirstName,LastNameetc.)areself-explanatory.Enterallyouneedtoidentifythatuser.Atthebottomofthescreenisadrop-downboxmarked‘Role’.ThiswilltellWordPresswhatthatuseris,andisnot,allowedtodoonthesite:

Administrator-somebodywhohas

accesstoalltheadministrationfeatures(thesameasyou!)

Editor-somebodywhocanpublishandmanagepostsandpagesaswellasmanageotherusers’posts,etc.

Author-somebodywhocanpublishandmanagetheirownposts

Contributor-somebody

whocanwriteandmanagetheirpostsbutnotpublishthem

Itisuptoyoutodecidehowtoallocatetheroleandcapabilitiesofeachusertosuityourorganizationandteam.

Whenallisfilledin,click‘AddNewUser’andyou’redone.ThatpersoncannowlogintotheWordPress

dashboard(seeLesson3)withtheusernameandpasswordthatyouhaveassignedandwillbegiventhecapabilitiesthattherolepermits.

FAQIsetmyfriendupasauseronmywebsitesothathecouldbeacontributor,buthe’sforgottenhispassword.HowcanIretrievethe

passwordforhim?

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,the

othersfollow.

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

Googlechecksitsindexandinstantlydisplaystenresultsonthefirstpage,asinFigure18.1:

Iftheuserseeswhattheywantthey’llclickonasite.Iftheydon’t,theymightjustmoveovertothesecondpage,butrarelybeyondthat.

So,ifyourwebsitedoesn’tshowuponthefirstcoupleofpagesofthesearch,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-scenescodeforcesthesitetobeneat

andtidy,withoutbrokeninternallinks,andwithaspider-friendlystructurethatmakesiteasyforthemtocrawlthesite.So,choosingWordPressisonebigplusforyou!

BasicWordpressSEOThesefewsimplestepswilloptimizeyourWordPresswebsitesothatGoogleandtheothersearchengineswill

haveeveryincentivetoindexyoursiteefficientlyandthushelpyouattracttargetedtraffic.Allthesetipsstartfromthedashboard:

‘Settings’,‘General’

‘SiteTitle’isveryimportant.AsshowninFigure18.2,itshouldcontain(preferablystartwith)themainkeywordthatyouwanttooptimizefor.Forexample,‘Keeping

Chickens’ismuchmorepreciseanddescriptivethan‘Joe’sBackyard’.

Onceyoursitebeginstoattracttrafficdon’tchangethisunlessthereisagoodreasontodoso.

‘Posts’/’Pages’,‘AddNew’

Thepostorpagetitleisalsoimportant.Again,thisshould

containoneofyoursite’smainkeywords.Makesurethatthepermalinkaccuratelyrecordsthat.Edititifitdoesn’t.

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

includedinthetextafewtimesbutnottoanexaggeratedextent.

OneofthelatestfeaturesthatGooglelooksforiswhetheryourpageisusefulandinteresting.Oneofthewaysitmeasuresthisisbylookingathowlongyourvisitorstaysonthepage,howmanypagesofyourwebsitetheyreadandwhethertheysharethecontentwithothers.Ifpeople

tweetorlikeorshareyourwebpagesonsocialnetworkingsiteslikeTwitterandFacebookthenthatboostsGoogle’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.You

mustcommunicateeffectivelynotonlywithyourhumanvisitorsbutalsotothecomputerrobots(spiders)thattrytoworkoutwhatitisthatyouaretalkingabout.

AllinOneSEOPackplugin

ThispluginisimportantforSEObecauseitspecificallyaddswhatisknownas‘metadata’totheinternalcodingofyoursite.Thisis

notvisibleonthepagetohumanvisitorsbutit’sthere,behindthescenes,forthespiderstogobbleup.

Intheplugin’sboxesonthePagesandPostspages(SeeFigure15.4inLesson15),enterthepost/pagetitle,asummaryofthepost/pagecontentinthedescriptionandthreeorfourkeywords.The‘description’boxisthetextwhichwillbedisplayedby

thesearchenginesonthesearchresultspage(seeFigure18.1)soyouneedtowritethisinplainlanguage,withkeyword(s)appearingnaturallyinthetextand,preferably,acalltoaction.(‘Findouthowtobuildachickencoophere!’)

IfyouwanttoknowmoreaboutthispluginandthewaysinwhichitcanhelpwithyourSEOhavealookat

thedocumentationprovidedontheplugin’swebsite.

That’sthebasicsfrommeonthistopic,butIencourageyoutoexploremoreforyourselfbecauseSEOisimportantforallwebmasterstounderstand.

FAQWhat’sa‘keyword’?

AkeywordisoneormorewordsthatmighttriggeramatchintheGoogleSearchEnginedatabase.

Here’showthisworks.Whenyoufirstbuildyourwebsite,Google(andalltheothersearchengines)findyourwebsiteandtheirsoftwarerobotsread(‘crawl’)thewordsoneachpage,especiallytheheadingsandanythingyou’vemadeapoint

ofemphasizing.ThebotsignoretheentireHTMLandtechnicalstuff–allthey’reinterestedinistheactualwordsthatyouhavewritteninyourpagesandposts.

TheydeliverthisdatabacktoGoogle’sindexingsoftwarewhichthenanalyseswhatyou’vewrittenanddecideswhatyourwebsiteisallabout.Thisisverypowerfulsoftwareanditgenerallydoes

aprettygoodjobofimpersonatingahumanreader.

Googlethenstorestheinformationaboutyourwebsiteinitsvastdatabase,waitingforsomeonetositdownattheircomputerandtypeaqueryintotheirsearchpagewhichmightmatchwhatyourwebsiteisallabout.

So,ifyouwantyourwebsite

tobefoundbyyourtargetaudiencethenit’simportantthatyouoptimizeyourcontentforthekeywordsthattheymightusewhensearchingforinformation.Andthat’swherewecometotheothersideoftheequation.

Theterm‘keyword’alsodenotesthewordsthattheusertypesinastheirquery.

Googlesaveseverystringof

wordsthatuserstypeintofindsomethingandtheirsoftwarecalculatesthefrequencywithwhichthesephrasesorcombinationsofwordsoccur,overallthesearchesmade.Therefore,theycancalculateveryaccuratelyhowpopularaparticulartopicorphraseis.And,asyoucandeduce,themorepopularthekeyword,themoredifficultitistogetyourwebsitetocomeupon

pageonebecausetherewillbetoomanycompetingwebsites.

Forexample,golfisaverypopulartopicthatpeoplewanttosearchfor.Butsimplytypingintheword‘golf’isusuallyawasteoftimebecauseitistoobroad.Millionsofpeoplesimplytypeintheword‘golf’andGoogledoesitsbesttocomeupwithsomethingrelevant

buttheusercouldbelookingforanythingandtheresultstheygetwilllikelybetoobroadtobeuseful.AnditwouldbevirtuallyimpossibleforyoutogetyourwebsitetocomeuponthefirstpageofGooglewhensomeonesimplytypesin‘golf’becausetherearejustsomanyotherwell-establishedwebsitescompetingonthesamesubject.

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

It’smuchbettertolookfor‘men’sgolfshoes’oreven‘men’sbluegolfshoes’or‘men’sbluegolfshoessize10’.Thatnarrowsdownthe

searchandtheuserismorelikelytofindwhatthey’relookingfor.

So,ifyou’resellinggolfshoes,itwillbeeasierforyoutorankyourwebsiteinthesearchresultsifyouoptimizeoneormorepagesforveryspecificwordsandphrasestodescribeexactlywhatproductsyouhaveforsale.

‘SportcoMen’sBlueLeather

GolfShoesSize10’tellsGoogle,andyourpotentialcustomer,preciselywhatyouhaveforsale.Andyouwillhaveamuchbetterchanceofcominguphigherinthesearchresultssimplybecausethereismuchlesscompetitionforthesekeywords.

Butwhatifyouareasmallbusinessororganizationandyoujustwantyourwebsiteto

publicizeyournameandbrand?

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

ButthatpresupposesthatyouhavedoneenoughpublicitytogetyournameknownoutsideofGoogleinthefirstplace–andthat’squiteanothertopic!

Lesson19.BehindTheScenesWith

HTMLRightatthestartofthistutorialIsaidthatyoudon’tneedtoknowHTMLtouseWordPress.Thisistrue,butyoucanseefromacoupleofthepreviouslessonsthatitcanbehandytoknowhowtoinsertHTMLifyouneedtouseittodisplaysomething

notcoveredbyWordPress.

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

ThebeautyofWordPressisthatitshieldsyoufromallthisinitsuserinterfacebut,behindthescenes,WordPressgeneratesallthenecessary

codeforyou.Anditdoesit(mostly)veryefficiently.

I’mnotgoingtoteachyouHTMLherebutI’mgoingtoshowyouhowtouseitifyouhavewrittenanyofyourowncodeorifyouhaveacodesnippetprovidedforyoutoperformsomefunctionnotsupportedbyWordPress.

AddHTMLCodeToAWordpressPage

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

WhenyouclickonthatyouaretakentotheHTMLwindowandWordPressexpectsthattherewillbesomeHTMLorothercodeincludedinthetext.

YoucanwriteanytextasnormalandWordPresswill

displayitasnormal,butwhenitencountersanyHTMLitwillexecuteitratherthandisplayingitastext.

Figure19.2showsthetextboxwithHTMLcodeinit…

…andFigure19.3showswhatthatpagelooksliketothevisitor:

WhenyouusethisTexttabtherecanbeoccasionswhenWordPressdoesn’trendertheHTMLcodeasyoumightexpect.Thisisbecauseitdoesafurtherlayerof

verificationbeforeacceptingthecodeandthiscanmeanthatitstripsoutanythingthatitdoesn’tlike.

Thiscanbeannoying,butyoucanforceWordPresstoacceptyourcodeifyoutemporarilychangeyourUserprofile.

DisableTheVisualEditor

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

Checkthe‘Disablethevisualeditorwhenwriting’boxandthenscrolldownandclick‘UpdateProfile’.

Nowyoucanenterthecodeyouwantintoyourpostor

pageanditshouldretainthecode‘asis’whenyoupublishit.

Ifyoudothis,youwillhavetogobacktoyourUserprofileanduncheckthisboxifyouwanttore-enablethevisualeditorforuseinfutureposts.

Butyou’llhavetoremembertorepeatthedisablingifeveryouwanttogobacktoedit

theoriginalpostbecause,ifyoudon’t,WordPresswillstripoutallyourcode!

IsupposeIoughtnottoleavethislessonwithoutahealthwarning.InsertingHTMLcodeintoaWordPresspostorpagecanhaveunintendedconsequences.ThiscanbebecausetheHTMLcodemaycontainanerror,ormaybe

somethinginthecodeclasheswiththesite’stheme,orsimplythatyouaretryingtodosomethingthatWordPressconsiderstobeinvalid.

IfyougetproblemswithHTMLyouhavetwochoices:removetheoffendingcode,orcallforhelpfromsomeonewhoknowswhattheyaredoing.

I’matotalnon-techieandallthisstuffgivesmeaheadache.DoIreallyneedtoknowaboutHTML?

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

Lesson20.HowToBeAWinningWordpressWebmaster

OK,thissectionofthebookisforwhenyouhavecompletedLessons1-19andyouhaveaworkingwebsiteupandrunning.Peopleinthissituationoftenaskme,‘Right,I’vedonemywebsite,

nowwhatnext?’

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

BuildUpYour

WebsiteSo,youshouldembarkonascheduleofconstantlyaddingnewpagesand/orpostsandfine-tuningyoursitenavigationsothatvisitorscaneasilyfindtheinformationtheyarelookingfor.

Themoreworkyoudo,themoreskilledyouwillgetatitandyouwilleffectivelylearnonthejob.And,trustme,you

willfinditveryrewardingtoseeyourwebsitecomingtolife.

GetFeedbackWhenyou’reready,askotherstogiveyouanhonestappraisalofyourefforts.Findoutwhatelsetheywouldliketoseeonthesiteandwhethertheycanofferanypositivesuggestionsforimprovements.

PromoteYourWebsiteDon’tforgettheexternalpromotionofyourwebsite.

YouneedtoleteveryoneknowaboutyourwebsitebyaddingyourdomainURLtoallyourpublicitymaterialandyouremailsignatureandyourbusinesscardsandyourprofileonforumsetc.,etc.

IfyouareonFacebookor

TwitterorGoogle+orLinkedIn(oranyothersocialmedia),makesurethatallyourfriends,followersandcontactsknowaboutthewebsite.

Wherepossible,askotherswithwebsitestolinktoyoursasthiswillhelpyoursearchenginevisibility.

ExpandYourSkills

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

GetHelp

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

WordPresshasitsownself-contained,contextual‘Help’system.Lookatthetoprightofeachofthepagesinthe

dashboardandyouwillseealittle‘Help’tag.Whenyouclickonthatyouwillseeadrop-downboxthatcontainstextandlinkstoprovidemoreinformationaboutthetypeofpageyouareonandhowtouseit.

InadditiontoWordPress.org,therearemanyotherwebsitesofferingusefulinformationaboutWordPress.

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

Youmaybesurprisedathowmuchinformationthereisoutthereforfree.Youwillunderstandalotmorefromthatmaterialafteryou’vebeenthroughtheselessonsthanyouwouldhavedone

before.

ButonewarningaboutpickingupWordPresstipsfromexternalwebsites.CheckthedateofthepageorarticlethatyouarereferencingbecauseWordPressinformationcanquicklygooutofdate.

Ifwhatyouarereadingismorethanoneyearold,becarefulthattheinformation

youarereadingisstillcurrent.

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

That’sthewaytobecomea

winning,WordPresswebmaster!

ConclusionWordPressisahugetopicandIhopethatyouhavefoundthistutorialausefulguidetogettingyoustarted.Ihavedeliberatelykeptthingsassimpleaspossibleand,forthatreason,Ihavenotventuredfurtherthantheessentialfirststeps.

Thousandsofpeoplewithnopreviouswebexperiencehave

usedthistutorialsuccessfully-andIlookforwardtoyoujoiningthem!

Ifyou’vereachedthispagebutyouhaven’tyetmadeastartoncreatingyourownwebsitethen,please,gobacktothebeginningofthisbookandworkthroughitagain.Ifitallseemsabitconfusingthefirsttimethrough,thenthedetailswilllikelyallbegintoclickintoplacethe

secondtimearound.Giveitanothershotandyou’llsoonbewellonyourwaytogettingyourveryownwebsite.

Ifyouhavefollowedtheselessonsandcreatedyourownwebsiteonyourowndomainthencongratulations–youdidit!Youhavemadeastartingettingyourownonlinepresenceandyouarenow,officially,aWordPress

webmaster.You’veachievedyourobjective,andyou’reentitledtofeelproud.

FurtherResourcesAsIhavementioned,theWordPressscenechangesallthetimewithmorenewupdatesandfeaturesthanIcanpossiblyincludeinthisbook.Ihavetriedtocovertheverybasicsinthistutorialbutyoucanfindmoretoolsand

tipsonmywebsitewhereIaddanyinformationthatIthinkwillbeuseful.

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

siteandIwilldomybesttoanswer.

AlsoonmywebsiteIhavelistedsomeoftheplacesyoucangotofindmoreWordPressthemes,otherthanthefreeonesavailablefromWordPress.Ihavealsoprovideddetailsofsomeofthetools,freeandpaid,thatIhavefoundusefulinbuildingmyownwebsites.

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

PleaseReviewThisBook!Finally,pleaseletmeaskyouafavor.Ifyouhavefoundthisbookuseful,pleasewouldyougobackto‘WordPressToGo’on

Amazon(http://www.amazon.com/dp/B0072V4EYSandleavemeareview?SatisfiedreadersprovidetheverybestadvertisementforaproductandIwouldvalueyouropinion.

Weallliketoseehelpfulreviewswhenwearelookingtobuysomethingandit’sgoodforeveryoneifcustomersarewillingtosharetheiropinions.

Again,thankyouforusingthisbook.Goodluckwithyourwebsite!

AboutTheAuthorSarahMcHarryisawebmaster,programmerandwriter.Shehasworkedasadeveloperforbusinesseslargeandsmall,onbothsidesoftheAtlantic,formoreyearsthanshecarestobragabout.

ShebuiltherfirstWordPresswebsitein2008and,asaprofessionalwebmaster,accustomedtobattlingwith

theintricaciesofHTML,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.

wordpress to go1.droppdf.com/files/ro1jr/wordpress-to-go-mcharry-sarah.pdf · covering lessons 1...

Documents

go1 moodle plugin - support.ecreators.com.au · add a go1...

wordpress custom theme designer, wordpress customization,...

panduan install wordpress localhost - blog.ub.ac.id ·...

nutrition with sarah - congenital...

improving skills for workplace practice through mentoring...

go1 brochure 12april

go1 - miek gieben · learninggo go1 author: miekgieben...

wordpress + docker - reusable wordpress development...

go1 teacher's resource book · it's a . ten. four. seven....

sarah – statistical analysis for resource allocation in...

wordpress seo basics - melbourne wordpress meetup

folic acid, dietary patterns and perinatalhealth the ......

go1-3rd-325-mx4501-ps@sce.com 20090612 145519 · 6/12/2009...

curso wordpress 4.4.2 gratis — tutorial wordpress!!

wordpress | wordpress(cms) | best cms for beginners |...

คู่มือ...

directions chayei sarah.pdf

sarah, plain and tall - arvindguptatoys books...

proeeedings of go1/ers{met{t of karnataka sub:...

wordpress – un site utilisant wordpress