WordPress To Go1.droppdf.com/files/ro1JR/wordpress-to-go-mcharry-sarah.pdf · covering Lessons 1...
Transcript of WordPress To Go1.droppdf.com/files/ro1JR/wordpress-to-go-mcharry-sarah.pdf · covering Lessons 1...
WordPressToGo
HowToBuildAWordPress
WebsiteOnYourOwnDomain,FromScratch,
EvenIfYouAreACompleteBeginner
SarahMcHarry
Copyright©SarahMcHarry2013
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!
FAQ
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!
FAQ
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.
FAQ
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
them.
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
GASP
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.
FAQ
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.