A new website from scratch in WordPress – An Exploration…

[Note this article is only in draft form at this stage and screen shots need to be inserted, but this is just part of the concept of the project]

My Challenge –  To get a  basic site up in half a day

Motivation – Client migrating from … for small website.  Bought some space asked for advice

Initially looking at Drupal.  Thought the site would be much easier for him to maintain with WordPress.

Although some experience with CMS’s – especially Joomla. Not installed configured WordPress before…

What did I do?

1. Think about requirements…

Looked at existing site:

Image as banner at top

Clickable news ticker (although not working)

Automatically scrolling text with special message

Flat pages including photo gallery and PDF downloads

Separate link to Shop Site

Links to Facebook and Twitter Sites

Used www.aplaceontheweb.co.uk which was a new domain I’ve acquired, as an opportunity to play.

Used enoise as my host (as I’ve used them in the past for a number of projects and they’ve proved both helpful, reliable and reasonably priced)

Realised I would need some content for this site, Quick Mindmap of Basic Structure:

Structure / Pages

Why this site / What’s its purpose

About Me

What’s Here? Find Stuff – Structure Categories and Tags

Free Programs

Contact Me

2. Think about guidance that must already be out there

Didn’t want to re-write what already exists, but did want to find some useful resources that I could use / refer people to

Places I started / initial consideration

WordPress site

Enoise hosting – help sheets

Books – Amazon (especially Kindle)

Friends and other contacts.

Top resources found / used

http://wordpress.org/

1. Find a webhost

2. Download and Install – saw ‘web hosting partners offering 1-click install’ which I know enoise do – so looked no further! (Save the other approach for another day)

3. Read the documentation

Enoise help

http://kb.enoi.se/installing-wordpress-from-the-enoise-hosting-control-panel/

Afte Installer -Start Here?

First Steps With Word Press

http://codex.wordpress.org/First_Steps_With_WordPress

Choose between a Single or Multi Blog Installation???

Thoughts – keep it simple – go for Single?

Flexibility – go for multiple?

http://www.dummies.com/how-to/content/hosting-multiple-blogs-with-one-wordpress-installa.html

then read

“If you choose the single blog option you can change it to the multiple blog option later (how to do this is in the documentation in wp-docs see wp-docs/multiple-blogs.html. It will open in a new window and maybe you want to bookmark it now). But once you have implemented the multiple blog option you cannot revert to the single blog option, short of destroying any secondary blogs.”

So opted for ‘Single’

Logged in:

OK – so now what?!

Thought worth taking a peek at how the main site looks at this stage:

Or logging out – looked like this:

Temped to play… and started to, but thought not going to achieve my objective…

Worth making note of Administration screen / dashboard / control panel url though:

http://www.aplaceontheweb.co.uk/wp-admin/

So to quickly get it up and running

Back to: http://codex.wordpress.org/First_Steps_With_WordPress

What did I need – New Header Image…

Wireframe? – Base on standard template – Could use Pencil, but a quick sketch is enough for me at this stage.

Noticed that Dashboard was saying updated – required – so updated it and it then looked like this:

http://codex.wordpress.org/New_To_WordPress_-_Where_to_Start

 Adding Content:

Pages:

Home

Articles

About

Contact

OK – what is the first thing I wanted to do? Create pages with a single article per page

Adding a Page in your dashboard:

To abandon simply click on ‘Move to Trash’ or ‘Dashboard’ links

Removing the Sample Page

After adding pages, About, Articles and Contact, my Home Page currently looks like this:

What I still want to do at this stage

  • Remove the Sample Page
  • Change the Home Page from Post where people can comment to a fixed home page describing the function / purpose of the site.
  • Add a contact Form to the Contact Page
  • Remove ‘Just another WordPress Site’
  • Add an Image to the header
  • Remove the bottom border / footer to the site (May replace it later)
  • Add my first article  – this one- on how to create a WordPress Site
  • Share my site

Remove the Sample Page

Pages-> Hover over sample pages – Click on Trash

Change the Home Page from Post where people can comment to a fixed home page describing the function / purpose of the site.

Deleting the Post ‘Hello World’

Results in:

Note that still signed in so opened another Browser to see how the site looks from a non-signed in users view / perspective.  This is in Chrome

Searching the Word Press Website for Home Page gave me this result

http://codex.wordpress.org/Creating_a_Static_Front_Page

Used the section ‘Creating a Static Front Page’  http://codex.wordpress.org/Creating_a_Static_Front_Page as a guide.  (My setup meant I couldn’t follow the instructions directly)

Add page as before – entitle it ‘Home’

(Note – use the ‘order’ box in the ‘page attributes’ section to determine the order in the main menu for the home page to appear.  Remember to click on ‘Update’ after making the changes)

I have set my pages with the following orders:

Home – 0

About – 1

Articles – 2

Contact – 3

The key was in the ‘Settings’ – ‘Reading’

Now looks like:

Changing the ‘Tagline’ – Remove ‘Just another WordPress Site’

Settings – General Settings – Tagline

Scroll down to and remember to click on ‘Save Changes’

Add a contact Form to the Contact Page

 http://wordpress.org/plugins/contact-form-plugin/

 Then click on Activate Plugin

 Configure by Clicking on settings

 Select a user to whom the form details should be sent

 Check the ‘ Additional options’ to configure

 If you would like to add the Contact Form to your website, just copy and paste this shortcode to your post or page or widget:

 Add an Image to the header / Change the header image

 Note that this may be theme dependent!  I was using the ‘Twenty Thirteen’ Theme – other themes may change the header image in different ways…

 In WordPress.org I searched for the term ‘Upload new header image twenty thirteen’ and found this

http://wordpress.org/support/topic/twenty-thirteen-custom-header-select-image-not-working

 Far from perfect – but good enough for proof of principle

Remove the bottom border / footer to the site (May replace it later)

 Note the contact form appears on the bottom of each page…

Worth Noting – Child Themes

http://codex.wordpress.org/Child_Themes

If wishing to change a theme – eg removing the titles, changing the image size or footer, general advice seems to be: need to create a child theme 1st, else when the theme is updated, any changes made will be lost.

Perhaps on this basis advice for those starting up with WP should be – find a theme you like and put up with the small bits you don’t until you are prepared for a little learning.  Can still produce stunning and personalized sites in a very short time.

Preventing Comments ‘Leave a reply’ on Pages

 – took me a while

 http://wordpress.org/support/topic/disable-comments-on-pages-1

Look at WordPress Themes and how to apply them

 Look for a theme that re-sizes better across multiple screen resolutions

 1st tried ‘Add New Theme’ from site dashboard

 Checked the following ‘features’

  • Responsive Layout
  • Accessibility Ready

 Then Find themes at the bottom

Resulted in:

 Clicked on ‘Newest’ Tab and got a lot more

 Previewed a few and resized the browser window to get an idea of how the theme might respond to different screen resolutions

Installed

Alice by BlogSynthesis

Wallpapered by SiteGround

Autoadjust by Drewdyeruk

 (but could have installed and played with many more)

 Could take a long time playing here and reinforce the view that you pretty much have to be happy with what the template provides if you don’t want to fiddle around with the css and php files…

 In the end settled with the theme ‘Twenty Twelve’ – especially liked the Widgets in this theme. Maybe just suited what I was looking for (for the moment…)  liked the way it flowed and the image resized well to fit the browser window, would suggest is would work well with smaller screens. Subsequently tested on HTC Desire HD (Liked the way the menu resized here too)

 Question remains now how to undelete all the theme’s I’ve installed for testing, but I’ll leave that for another day… 😉

 Also writing your own WordPress Theme looks like an interesting topic for exploration at a later date…

So all that remains is to publish this Article…

Or publish these notes and work it into an article…  As the main purporse of this experiment is to get a site up rather than worry too much about editorial content at this stage – I can always re-write it later…! 😉

Categories…?

Lets Start with Categorizing the as an IT with a subcategory of websites.  (Other IT subcategories for a later date could include Access, Android, Miscellaneous…)

Click on Posts then Add New

Copy and Paste in my text from Word