This is a pretty big guide so don’t be overwhelmed. I thought it was better to be exhaustive than to assume knowledge. Feel free to skip to the bits that interest you if you are comfortable with installing Wordpress themes.
These instructions are based on Wordpress 2.8, please note that in previous versions of Wordpress, some of the labels for the Wordpress Admin Panel have changed:
- Appearance used to be called Design
- Settings used to be called Options
To start off with…
You will need:
- Hosting with a Wordpress installation (see the Toolbox for recommended hosts that do one-click installations)
- A program to unzip the compressed Zip file. This should be in built with your computer (try right clicking and looking for an “Extract…” option or double clicking the .zip file’s icon) if not a couple of good programs are 7-Zip (Win) and The Unarchiver (Mac).
- An FTP Program. Filezilla is free and brilliant and is available for Windows, Mac and Linux. (You can also use your webhost’s WebFTP features if they have them but it will be easier in the long term to learn to use an FTP program.)
- Your FTP (or WebFTP) login details: get this from your hosting provider if you don’t already have them.
Get your Theme’s Files
1. Choose your theme variety from the Themes page.
2. Go to that variety’s homepage and look for the Download section.
3. Click on the download link to download the current theme Zipped folder.
Basic Installation
1. Extract the file “NotificationLister[variety].zip”, on your desktop computer, i.e. with WinZip or similar.
This will create a folder named “NotificationLister[variety]“.
For example, with Notification Lister Original version 1.0 – you will have a file called “NotificationListerOriginal1.0.zip” that extracts to a folder called “NotificationListerOriginal1.0″.
2. Inside the NotificationLister[variety] folder you will find some instructions and the theme’s folder – notification-lister[variety] (note the hyphen!).
(If you plan to change your favicon image then now would be a convenient time to do it – see the instructions further down this page. Don’t worry you can change it any time you like afterwards too!)
3. Upload the notification-lister[variety] folder to your theme directory – this should be /?/wp-content/themes/ where “?” is the name of the folder which holds your Wordpress installation.
For example, if you installed your blog is at http://www.example.com/blog/ then it is most likely that your theme directory is http://www.example.com/blog/wp-content/themes.
3. Go to your Themes page in Wordpress.
Your Blog -> Site Admin -> Appearance -> Themes
4. Find your Notification Lister theme in the list (it’s ordered alphabetically) and click on the “Activate” link.
5. Don’t be too worried that your homepage looks a bit funny. You haven’t set up your theme yet. Go to Notification Lister Options to configure your page
Operating the Notification Lister Options Panel
Your Notification Lister Options allows you to customise many parts of your landing page.
You can find your options here:
Your Blog -> Site Admin -> Appearance -> Notification Lister Options
There a few tips to be aware of:
- If you delete an entry and hit “Save Changes”, it will repopulate the field with the default option the next time.
- Hitting Reset will fill all fields with their default options.
- Changes will not applied until you have hit “Save Changes”.
- If a change has not been applied, check your entry and hit “Save Changes” again.
- Remember to refresh your browser, sometimes an old version is stored in your browser’s cache and served up to you. To be particularly careful, you can do a “hard refresh” by holding down the SHIFT key when you press the refresh button.
- Included in this theme folder is an image labelled notification-lister-blueprint.png – this illustrates how the various labels in the Options panel correspond to the theme’s design.
- The best way of learning is just playing around with entering content and seeing what happens.
- Have fun!
Set up Basic Information
1. In your Notification Lister Options (in Admin/Design or Admin/Appearance), you can enter the text for the following:
- Title
- Tagline (or subtitle)
- Copyright Notice
You don’t need to fill in anything for the tagline or the copyright notice but you should probably have the title there.
2. “Save Changes”
3. Refresh your blog to see the changes.
Note that the text in your title bar in your web browser is set to <<Blog Title:(blog)Tagline>> this is so that you can put in different keywords or descriptions to what you have on your front page if you wish (of course they should still be similar if you want Google to like you).
To change these you need to go to:
Your Blog -> Site Admin -> Settings -> General
Edit the “Blog Title” and “Tagline” fields. “Save Changes” and refresh your browser.
Set up Featured Content Section
This the section that will explain why you are building an email list. What’s the incentive for your potential subscriber?
1. Create a page (not a post) and call it whatever you like. (Make sure you check that it is published and not draft.)
2. Go to your Reading Options in you Wordpress Admin panel
Your Blog -> Site Admin -> Settings -> Reading
3. Look for “Front page displays”, select “A static page”
4. In the -Select- drop down choose the page that you created before.
5. Don’t forget to “Save Changes”!
6. Refresh your front page, the page should now show up.
7. If you need to edit your front page feature content, you should just edit the that page in Wordpress.
Set up your Notification List Code
There are two ways of setting up your Notification List code for your Sign up form. You can either do it via the Notification Lister Options panel or do it through a Wordpress Widget. If you do both, the widget will prevail.
Via the Options Panel
1. Get your form’s code (look for an embed code or “embed HTML” – it usually looks like code encased in <javascript> or <iframe>) and copy this. See “Instructions for specific services” for service based instructions.
2. Go to the Notification Lister Options panel and look for the text box that is labelled “Notification List Code” and paste your code from step 1 here.
3. Hit “Save Changes” and refresh your browser window – your sign up form should now be showing on the front page.
Please note that Wordpress plugin form managers like Contact Form 7 may not work via this method. If this is what you are using, you need to use the Widget method below.
Via the Widget Panel
This method is preferable if you are using Wordpress plugin form managers like Contact Form.
1. Get your form’s code (look for an embed code or “embed HTML” – it usually looks like code encased in <javascript> or <iframe>) and copy this.
2. Go to your Widgets panel
Your Blog -> Site Admin -> Appearance -> Widgets
You will notice that you have one widget area called “List Code Goes Here”.
You may need to click on the downwards arrow to open up the widget area.
If you had widgets installed previously, they could still be here. Drag them out of this “List Code Goes Here” widget area. (If you drag them into the “Inactive Widgets” area, this will not delete them and you can use them later when you launch or relaunch your site).
3. Drag the widget labelled “Text (Arbitrary text or HTML)” from the “Available Widgets area to your “List Code Goes Here” sidebar.
4. Go to this text widget. You may need to click on the downwards arrow in the top right of the text widget to open up your widget’s options if it is not already open.
You can leave the “Title” field blank (most forms have their own titles).
Paste your form’s code from step one into the blank field below the “Title” field. Leave “Automatically add paragraphs” unchecked.
5. Hit “Save” and refresh your browser window – your sign up form should now be showing on the front page.
Instructions for specific services
Instructions (with illustrations) for specific services will be added here as they become available.
Set up Google Analytics Tracking Code
Only set this up in one place. If you have a plugin that manages your Google Analytics code, do not set this up too – you are likely to get inaccurate analytics results or it could cause complications.
1. Go to your Google Analytics account and copy your Google Analytics tracking code.
For how to sign up to Google Analytics: http://www.mahalo.com/how-to-use-google-analytics-for-beginners
For how to find your tracking code: http://www.google.com/support/analytics/
2. Go to the Notification Lister Options panel and look for the text box that is labelled “Google Analytics Tracking Code” and paste your code from step 1 here.
3. Hit “Save Changes” and refresh your browser window. You shouldn’t see anything different because it should be invisible on your front page. But if you want to check straight away you can right click on your front page and select “View Source” or “View Page Source” – the code should be there in your source file just above the </body> tag.
4. You can check back at your Google Analytics account to see if your code is working using the Check Status link. For more info check the Google Analytics intro guide.
This should work with other similar tracking codes despite its name.
Set up a Favicon
Your current favicon (the little mail icon that shows up in your browser’s tabs and address bar depending on your browser settings) is from the Silk icon set, you can go there to find more: http://www.famfamfam.com/lab/icons/silk. (Note that these are not in .ico format, you will need to use an online favicon generator, see below.)
If you wish to change favicons, follow these steps:
1. Create your favicon file and make sure it is called “favicon.ico”
An easy way to create a favicon is by uploading a graphic file to an online favicon generator: http://www.htmlkit.com/services/favicon
2. Go to your images folder inside your theme folder (“notification-lister”).
3. Swap the old favicon.ico for the new favicon.ico file
You can do this before you install your theme if you wish. Or if you have already installed your theme then you can use an FTP program to overwrite the original favicon.ico file. (If you need a free FTP program, Filezilla is great: http://filezilla-project.org )
4. Refresh or hard refresh (SHIFT+Refresh) your browser to see the new favicon on your site. Sometimes you need to restart your browser to clear its cache (favicon caching is particularly persistent). You can check whether your favicon is valid using this validator: http://www.html-kit.com/favicon/validator
Change your theme’s colours and more
Notification Lister has PLENTY of colour customisation options.
1. Go to the Notification Lister Options panel.
2. Have on hand the Notification Lister Blueprint (notification-lister-blueprint.png image) in your theme’s folder.
You will notice there are plenty of fields that you can change. These fields are illustrated in the notification-lister-blueprint.png image that is in the same folder as these instructions. This is your guide to the different parts of your front page that you can change.
3. Note that each field in the Panel has mini instructions, for example:
* Body Background Colour: This is the colour that is visible at the base of your page, under the footer – the default is the same colour as the footer to create one continuous strip at the base. You can use any valid CSS value. Default value:#84c5c6
4. Experiment, playing around with different inputs. You can always hit “Reset” and then “Save Changes” to go back to the default entries (note that this will get rid of all entries – if you only want to get rid of certain entries, just delete the content in that particular field and hit “Save Changes” to bring it back to the default entry, hit “Save Changes” again to apply it).
5. To customise your colours, you need to use valid CSS colours. You can use some common names like “white” “red” “blue” “yellow” “black” etc and this is good for testing and experimenting. But it is safest to use hexidecimal colours – that is in the form #ffffff (that’s white) as these can be interpreted by more browsers. Remember to include the “#” sign or it won’t work.
For colour inspiration and getting the hexidecimal colour name, here are some hexidecimal colour pickers you can try out:
http://www.pagetutor.com/colorpicker/index.html (this also shows you text and links colours on your chosen background)
http://www.quackit.com/css/css_color_codes.cfm
http://html-color-codes.com/
http://design.geckotribe.com/colorwheel/
Also check out the theme variety’s homepage where I will be adding colour schemes that you can copy and paste. (You can suggest some to me there too.)
6. Some notes on links:
- If you set up a visited link colour that is different to your normal link colour, it indicates to the user that they have previously been to that link destination. By default it is set to the same colour as a normal link.
- If you set up a different colour for a hover link to your normal link colour, this colour will show up when a user places their mouse over (ie hovers) over the link.
7. If you want to find out more about Border Styles and see what the options look like, W3 Schools is a great learning resource.
8. Don’t forget to have fun!
