Building a Basic Author Website with WordPress By Jeanette Grey

Overview  Author websites  Domains and Hosting  What Is WordPress?  Themes  Graphics  Plug-ins  Widgets  Content Get this handout here: jeanettegrey.com/ workshops/

Do I Need An Author Website?  Yes.  If you’re Pre-published Show agents and editors you’re serious Build your brand Older sites have a leg up in search engines, so the earlier you start the better.  If you’re Published Landing spot for readers

What Should Be On My Website?  At any stage in your career, your website needs to include: a sense of who you are and what you write ○ “About” page ○ Stylistic choices (Branding!) “Coming Soon” – what are you working on? Links to social media / contact information News / Blog

What Should Be On My Published Author Website?  A list of all your books in a logical order Group series together. Help a reader out! Chronological order is nice  Buy links  Mailing list  Call to action

Registering a Domain  Registering a domain is reserving the URL for the website  Pick something professional.com is best If your name is unavailable, try adding ‘author’ or ‘novels’ or ‘writes’ to the end  Costs $10-18/year  Consider adding privacy Whois.net – look up any domain and find out who owns it

Registering a Domain - Beware  Remember who you registered with. Do NOT renew it with someone else.  Domain “Parking” – when the URL you want has a page offering to sell the domain. Beware it will be at a substantial markup.  Allow 24 hours between registering your domain and it working

Website Hosting  A website hosting company rents you computer space on a web server A web server is a computer that delivers website content to anyone on the internet who requests it  Costs $1-10/month  Some hosting plans allow you to host multiple sites – consider sharing with a friend

Website Hosting (cont.)  You get what you pay for in terms of web page loading speed and customer service  Some hosting companies have “goodies”, including one-click installs of WordPress  Registering the domain and purchasing hosting from the same company simplifies the process and may earn you a discount

What About WordPress.com?  Yes, WordPress.com will host your site for free  BUT You can’t use your own URL – must be username.wordpress.com They place ads on your site Limited design options UNLESS you pay additional fees.

What Is WordPress?  WordPress is a Content Management System - a program that runs on the server space you are renting from your hosting company  You use it to create a website Create pages and blog posts as if you were typing them into Word Makes it easy to publish, edit and organize them

Advantages of WordPress  WordPress vs. Blogger, Wix, Weebly, Etc. Wordpress is more customizable and more powerful Well suited to multiple users Maintain ownership of your site  WordPress vs. A Static Site (built with DreamWeaver, GoDaddy’s Site Designer, etc.) WordPress makes it easy to change your site and provides a framework for it to grow

Disadvantages of WordPress  Commonly used and susceptible to hackers Perform updates regularly It pays to have a clueful friend  Learning Curve

Installing WordPress  Easy installation may be included with your hosting package  If your hosting company doesn’t do the installation for you Go to WordPress.org to download a copy of WordPress Follow the instructions You will need an FTP client – a program that allows you to upload files to your web server. ○ Example: Filezilla

A Note on Versions of WordPress  At the time of the creation of this presentation, WordPress version 4.0 was the most current. Future versions may change things.

Welcome To WordPress!  Go to yourdomain.com/w p-admin  Pick a Site Title (usually your pen name)  Username and password  Do NOT use admin  Check “Allow search engines to index this site”

Your Dashboard

“Pages” vs. “Posts”  “Pages” are the meat of your site. Every page will appear in your site’s menu  “Posts” are blog entries. Only the newest ones will appear in your News section.

Your Default Site

Make WordPress Act Like a Website, Not a Blog  You need to have a “Static Front Page” – one that doesn’t change when you add a new blog entry  Go to Pages and “Add New”

Add New Page  Create a page and call it “Home” Add any content you want to appear on your homepage Hit “Publish”  Go to “Pages -> Add New” again and make another page called “News”. Leave the content blank  Come back later to add “About” and “Coming Soon” pages

Optional: Turn Off Comments On Pages  Go to Pages -> All Pages  (While you’re here, delete “Sample Page”)  Hover over “Home” and select “Quick Edit”

Optional: Turn Off Comments On Pages (cont.) Uncheck to turn off comments Change order in which pages appear in site menu Make page appear as a sub-menu under one of the other pages Change the URL for the page Add a sidebar (if available as part of your theme)

Create A Static Home Page  Go to Settings -> Reading  Change ‘Front Page Displays’ to ‘Static Page’.  Set Front Page to ‘Home’  Set Posts Page to ‘News’

Permalinks  Go to Settings -> Permalinks  Sets up how WordPress will assign URLs to your blog posts

Make Your Site Pretty: Themes  A “Theme” is like a skin or a template. It dictates the appearance of the site.  Go to Appearance -> Themes  If your host installed WordPress for you, it may come with themes pre-installed  If not, go to “Install Themes”

Branding, branding, branding Mobile- friendly

Try some themes on for size  Go back to ‘Manage Themes’ Click ‘Live Preview’ to see how your site would look with that Theme Check out the options on the side Click ‘Activate’ to make it so

Same site, different themes:

Customize Your Theme  Go to Appearance -> Theme Options Change colors Change layout (example: add a sidebar)  Different Themes will have different kinds of options

Warning – Do NOT Edit Your Theme’s HTML / CSS files  If you’re comfortable with HTML and CSS, you can change things, but don’t do it in the files for the theme itself, because any updates to the theme will erase your changes  Create a “Child” theme instead.

Graphics: Making a Basic Banner  Most themes will have a suggested Height and Width for the header / banner image that appears at the top of each page Go to Appearance -> Header Look for suggested height and width

Graphics: GIMP  GIMP is a free graphics program Layers Tools Color selector Options for Active Tool To get started, click File -> New Enter desired dimensions

Graphics: Making a Basic Banner  Create a new image. Set size of image to the dimensions suggested in your theme  Use the ‘Bucket Tool’ to fill the background with a color Select a color Click on canvas to fill with color

Graphics: Making a Basic Banner (cont)  Use the ‘Text Tool’ to add your author name and a tagline  Use a cool font (branding!)

Find a Stock Photo  Respect the intellectual property of photographers and protect yourself from lawsuits. Purchase stock photos legally Examples: Veer.com, Dreamstime.com  Pick something that represents your brand  Try It Before You Buy It Save the watermarked image before you buy it and test it out to see if it works

Using A Stock Photo in Your Banner  IF your stock photo has a solid color back ground: Fill your banner’s background in with that color In GIMP, go to File -> Open As Layer and select image Move layer so it lies under your text but above background

Using A Stock Photo in Your Banner (cont.)  If your photo doesn’t have a black background, you need to blend the edge Create a new layer Use the Gradient tool Set “FG to Transparent” (FG = forground) Click off the edge of the canvas and drag to just past the edge of the image.

Get artistic with your banner!  Add texture layers over top of the photo. Play with transparency, and try erasing sections of the texture to highlight the photo.  Add a new layer and try painting over top of everything with black or a contrasting color. Use a large, soft-edged paintbrush and a low opacity

Save your banner!  Save often. The ‘.xcf’ format will allow you to keep editing.  When you’re done, go to File -> Export Click the ‘Select File Type (By Extension)’ + Choose JPG

Upload your banner!  In WordPress, go to Appearance -> Header Upload the image you created Uncheck the “Show header text with your image” box Click ‘Save Changes’ Twenty-eleven theme Customized colors (theme extension plug- in) Custom banner

Plug-Ins  Modules of programming that add functionality to your website  Examples: Akismet - Moderates Comment Spam All In One WP Security BackUpWordPress Image Widget – Allows you to add images to your sidebar/footer areas Jetpack – Website stats, Blog Subscriptions MailChimp – Subscribe to mailing list Social Media Widget – Allows you to add icons with links to social media to your sidebar/footer WP to Twitter – auto-posts blog updates to your Twitter account

Add New Plug-ins  Go to Plug-Ins, then click ‘Add New’  Once you’ve installed a plug-in, don’t forget to go back and activiate it

Widgets  Easily add components to your sidebar / footer Note: Whether you have a sidebar or a footer depends on your theme. Check your theme’s options to turn them on or off.

Adding and Removing Widgets  Go to Appearance -> Widgets Installed widgets Sections of website + List of Active Widgets Drag and drop between the two to add or remove

Suggested Widgets Useful WidgetsLess Useful Widgets  Social Media  Blog Subscriptions (Jetpack) or Mail Chimp  Image Widget – showcase bookcovers  Archives / Recent Posts / Tag Cloud  Twitter Timeline (Jetpack)  Meta – displays login information for you site  Recent Comments

Content? My website needs content?  To add new pages, go to Pages -> Add New  To add new blog posts, go to Posts -> Add New  Post Editor works like a word processor Reveals more options Add images / audio / video

Adding Images  Click ‘Add Media’ and upload image from computer Caption will appear under image on page Alignment: - None: image takes up whole line - Left / Right: Text will flow around image Clicking on image can link to a webpage

Changing Image Properties  Once the image has been added, click on it to change its link / size / alignment / caption Change image Delete image Drag corners to resize (Note: do not resize animated gifs)

Post Options Schedule posts to publish at a specific date/time Add tags or categories to make your posts easier to find

Maintenance  Perform updates regularly  WordPress will you about big updates  It will nag at you about minor ones

Protect Yourself From Comment Spam  Under Settings -> Discussion, select options that require commenters to fill out their name and . Require comments be approved before they will appear on the site  Use askismet or another security plugin to automatically filter our spam comments

Have fun!  No, really.  Don’t be afraid to try things and experiment. Explore!  You can do it.