WordPress is an content management system (CMS) that allows people who do not write code to edit and manage a web site. It stores all its information in a database, operates on a framework of code produced by WordPress, and the presentation layer is determined by the web designer. This last piece is called the “Theme”. That controls how the web site looks and how the pages extract and present the information stored in the database.

The client (the non-coder) can log in anywhere that has a web connection and a browser and edit the site. Editing requires some basic wordprocessing skills but no coding. The editor has all the same buttons you would see in Word or another word processing program (bold, underline etc.). You can apply heading styles through the editor that make use of the typographical style guide developed by the web designer.

The client can easily upload images, video, audio, pdfs from a computer via the editor.

The magic of this CMS system is that beyond just online editing, WordPress organises information in a very powerful way through using categories and tags. Code written for the theme by the web designer instructs the system to retrieve content tagged or categorized in a certain way automatically. This is very flexible and efficient. Through just a few lines of code edits a page can be changed to show 100 posts categorized “photos” instead of “images”. Previously to change a page in this way all the content had to be cut and pasted accross and organized by a human (time-consuming and expensive). WordPress can sort everything automatically, according to your code, e.g. by date ascending or descending, by categories such as “landscapes”, “portraits”, “monotypes” and so on.

If the categorizing/tagging guide is followed the client ends up with a well-organized database of information that is efficient and flexible. For example you could decide to add a category list to your sidebar which would be easy to do later on if all the content is categorized correctly per this user guide.

The client may add users to the web site editor. These users can be assigned roles such as admin (can change everything) through to a contributor (who can write new content that must be approved by an admin before it can go live).

Plugins are added and configured by the web designer to add extra functionality and extend WordPress’s capabilities. One example would be “Light SEO” a plugin that adds a field at the bottom of each page for the unique page description. Previously that kind of “meta” information could only be seen in the code and was hard for a client to read and edit. Having a well-written sentence that describes the page in this box will improve SEO “Search Engine Optimization” which means that the web site should appear higher up in Google searches and be easier to find.

General Editing

1. When editing it is recommended that you open at least two tabs in your browser, one for the editor and one for the live site so you can refresh the latter to see changes without having to leave the editor. You might even want to open a third tab and keep the style guide page up there for quick reference (style guide link below). On a Mac hit “command+T” to open a new tab in your web browser.
2. For a new paragraph hit return
3. For a new line hit shift+return
4. Use the buttons to format your text (bold, underline, bulleted list, numbered list etc.) per a regular word processor.
5. If you are pasting content in try to do so from a .txt (unformatted plain text file) all computers can save documents as .txt and it helps avoid formatting conflicts when hidden code is pasted in from a program like Microsoft Word. If you do paste from Word or another program, use the “preview” button to check that the content looks right before publishing.
6. Format headings using the dropdown box in the second row of formatting buttons. (To see the second row click on the dotted button far right on the first row that will then reveal them). To see how these headings will publish please refer to the style guide page.

Style Guide

Visit this page for a reference of the different heading styles for the BSS web site: http://www.beachstreetstudios.com/style-guide

go to Media/Add New
Select files to upload from your computer – you can select more than one
click on “show” for each photo and add text to the box “alternate text” – this is good for SEO – it should be a short description of the photo including keywords if possible – e.g. “Photograph of Nantucket Harbor by North Shore Photographer Barby Almy”

Add a piece of work to Kathy or Barby’s portfolios

1. Get the original image file. Open it in Photoshop. Go to the image menu in the horizontal nav bar and select “image size”.
2. Uncheck “Resample Image” set resolution to 72ppi check “Resample Image” and now set the height of the image to 500 PIXELS. The width will change automatically to preserve the proportions. Click OK.
3. Save the image as a JPG using “save for web and devices”, use the 2up option to see before and after and check for quality issues on the optimized version as you adjust the quality slider. Try to get the file size as low as possible without compromising the quality. Use the naming convention “artistinitials-imagetitle-idnumber.jpg” e.g. “kc-winterbreak-m301.jpg” being consistent with file names will help you in the long run.
4. Resize and save any other images you are adding at this point per the instructions above.
5. Log in to the wordpress site editor and navigate to Media/Add New via the side menu.
6. Click on the “select files” button and navigate to the location of the resized, optimized & renamed image(s) on your computer via the file browser pop-up. Select one file or more (a list by selecting the first in the list, then holding down shift and clicking on the bottom file in the list, or cherry pick multiple images by holding down the command key as you select individual files) and press “select”. The files will be uploaded to the wordpress database for the site.
7. Click on “show” for one of the files and highlight&copy the path to the file – from the “File URL”box. This is the location of the image on the server.
8. Navigate to Posts/Add New and write the title of the piece and by Artist Name in the top title box – this will be the title of the piece/caption/label so e.g. Winter Break by Kathy Connolly.
9. Scroll down until you see the box labeled “image URL” paste the path to the image here (that you copied in step 7). Examine the last piece of the path – this is the individual file name. You will need to make sure it matches the image name for the piece you are creating the post for. I like to size my screens so I can see the filename on my computer and this box at the same time then I can check that the name is exactly right. This is important because if it isn’t it will either show the wrong piece of art or an error message.
10. Now scroll up and look to the right hand side of the editor page. In the Categories box check ONE box – the category in which it should appear. In our current example (Winter Break) we check the box for Monotypes that we can see is a subcategory of Kathy Connolly. No need to check the artist name too, just the immediate category it should be in – so here, “Monotypes”.
11. In the top right hand corner you will see the Publish box. Click on Publish to make the page go live, or “update” to update the post if you are editing one that has already gone live.
12. nb. you may also write in the main content box for your artwork posts – this text will show if a user clicks on that specific piece so it’s a good place to put pricing, inspiration info, where exhibited etc. etc.

Add/Change an Accordion Slide on the Homepage

1. Open the photoshop file “bss_accordion_production_file.psd”
2. Make edits to the layer groups to get each slide looking the way you want it. You are basically editing the text labels, adding in art, and changing the opacity of the vertical color bar as needed.
3. Save the image as a JPG using “save for web and devices”, use the 2up option to see before and after and check for quality issues on the optimized version as you adjust the quality slider. The first place the quality will degrade is around the text label on the optimize image – look carefully using the 2up view and keep the quality high enough to avoid “artifacting” around the text label. It’s important these look good as they are an indication of the quality of your work. Use the naming convention “artistinitials-accordion-date.jpg” e.g. “ba-accordion-051010.jpg” being consistent with file names will help you in the long run.
4. If you are creating more than one new accordion slide now, save the others out now per step 3.
5. Log in to the wordpress site editor and navigate to Media/Add New via the side menu.
6. Click on the “select files” button and navigate to the location of the new accordion image(s) on your computer via the file browser pop-up. Select one file or more (a list by selecting the first in the list, then holding down shift and clicking on the bottom file in the list, or cherry pick multiple images by holding down the command key as you select individual files) and press “select”. The files will be uploaded to the wordpress database for the site.
7. Click on “show” for one of the files and highlight&copy the path to the file – from the “File URL”box. This is the location of the image on the server.
8. If you are editing an existing slide navigate to the relevant post via Posts/Edit. The post will have “featured image” in the title e.g. “Kathy Connolly – Featured Image” or “Beach Street Studios – Featured Image”. Scroll down to the Image URL box and edit that path so that the image name at the end is the name of the new slide you want to see on the homepage. Click on update. Go to the web site (in a new tab) and refresh the home page to check it has worked as intended.
9. If you are adding a totally new slide, go to Posts/Add New and title it “Slide Name – Featured Image”. Scroll down to the Image URL box and paste the path that you copied in step 7. Scroll up and check the category “Featured” in the categories box. N.B. there can only be 4 posts/slides categorized as “featured” at any one time. This is because that’s what we have space for on the homepage. So if you are adding a new slide and want to remove an old slide your next step, after checking “featured” in the category box and then “publish” in the publish box, will be to go back to Posts/Edit and click on the old slide post name (the one you don’t want to see on the homepage any more). Once in that post, go and uncheck “featured” in the categories box and then click “update”. So now you have just 4 in the featured category – you added one and removed one. No need to delete the old post though. You can keep it here and it won’t show up on the homepage (because it’s no longer in the featured category) but if you ever want to put it back on the homepage you just go and check the featured box again (and make sure you uncheck it for the one you are replacing). The overall idea is to make sure there are only 4 posts in the featured category.
10. To make the slide image on the homepage link to a specific part of the web site (recommended) follow these steps (Barby & Kathy slides are already set up to link to their respective artist pages):
    1. Go to the relevant post via Posts/Edit – it will be called “something – featured image”.
    2. Scroll all the way down once you are in the editor view until you see a box in the middle column titled “Custom Fields.”
    3. Click on “add new custom field”
    4. From the dropdown box (which starts off with “select” in it) select “link”
    5. In the “value” box to the right enter the link you want the image to click through to. So if you are promoting an event with a slide, find the url of the event description page (I would have the web site open in a different tab – just click through until you get to the page you want the user to land on then copy the address from the address bar in the browser. It will look something like this: “http://www.beachstreetstudios.com/category/artists/barby-almy/” – that will land on Barby’s Artist page for example.)
    6. Click on “add custom field” to save what you just entered.
    7. Scroll up to the top and click on “update” or “publish” to go live.

Add an Event

1. Go to Posts/Add New.
2. Type in the title of the event.
3. In the main area type in all the relevant details, be sure to add the time (the date will show up automatically if you follow the rest of these steps) you can also add images/links etc. as normal.
4. If you are writing a long post you should break it up so that it displays well on the master list of events. Place your cursor after the first one or two paragraphs and click on the “insert more tag” button which looks like two boxes with a line going through the middle in the editing button bar. This will mark the point where the “read more” link will show on the master events list page.
5. On the right hand side in the Publish box click edit next to the publish date. Enter the date of the event and the time as 23:00hrs.
6. On the right hand side in the Categories box check the box for Event. This is important, if you don’t mark it as an event it won’t be picked up by the event page/homepage widget. Do not mark it as an event and as news. This breaks the code. It must be either/or.
7. Click to publish (top right box).

Where is it???

• The text that appears on the home page is in a PAGE called “welcome to beach street studios”
• The text (and images/links) for Contributing Artists is in a PAGE of the same name. The info is automatically duplicated in the Artists section so no need to edit anything there.
• The text for the Artists page – what you see if you just click on “artists” in the top menu is in a PAGE called “artists”
• The text that appears at the top of Kathy and Barby’s Artist section pages (the ones which have the text blurb at the top and show an image for each category below) is the EXCERPT from the PAGE named per that artist. So if you want to edit that blurb, you need to go to the PAGE for that artist and then scroll down to the “excerpt” box and edit the text in there.
• Each piece of Barby and Kathy’s art exists in a POST (image url dictates the image that is shown, category dictates where it is placed).
• Events are POSTS.
• The text for the services page is in a PAGE.
• To update the text in the two column layout sidebar please send edits to Alice.
• To update CTA buttons on the home page please send edits to Alice (this can be set up to be something you can edit but will require more coding).

Add an Image into a Page

1. Place your cursor at the point on the page you want to place the image.
2. Click on the “insert/upload” button above the editor window. Navigate to the image you want to use – either on your computer or in the media library if it is already uploaded.
3. Choose “none” for the link, and “align none” for alignment. For good SEO type in a keyword-rich title in the title box. Then click “insert into post”.

SEO – Search Engine Optimization

To make your site more Google-friendly you should enter a description for the page in the “LIGHT SEO” “description” box located at the bottom of the edit page for a post or page. Don’t worry so much about the title or other boxes. Description is the important one. The description you enter should be unique to and descriptive of the page/post you are on and should ideally contain your target keywords. So a description for Kathy’s artist page might be “Kathy Connolly paints portraits, monotypes and glicees as an artist-in-residence at Beach Street Studios, a fine art gallery in Manchester, MA”. If you can write unique descriptions like this in the Light SEO box for each page and post on the web site you will be in good shape for Search Engine Optimization.

Upload A PDF

1. Select the page you want to add the PDF to by going to Pages/Edit or, if you want to add the PDF to a new page go to Pages/Add New from the admin panel.
2. Click on the “add an image” icon next to Upload/Insert
3. Click the “select files” button next to Choose files to upload
4. Browse for the PDF you wish to upload, when you find it click it to select it then click “open”
5. Type the name of the link to the the “title” field. This is the linking text you will see on the finished page
6. Next to the “Link URL” field click the “File URL” button
7. Select “Open in new window (_blank)” from the target drop down options
8. Click “Insert into Post” button

Things to Avoid

Doing any of these things might cause code errors that need to be fixed by the web designer (on an hourly rate) so try to avoid them. If in doubt contact the web designer.

• Don’t change the names of images/videos/pdfs in the media library. The time to name them is when they are first uploaded. Changing their names in the image library can cause them to disappear on pages where they were already supposed to show up.
• Don’t edit the PAGE called “events” this contains code that tells the site to look for the event posts. To add events, add them as POSTS per the instructions above.
• Don’t try to add or upgrade plugins without contacting the web designer. This can cause the whole site to break.
• Don’t try to change or edit the Theme.
• Don’t edit anything under Settings or Tools.
• Don’t add links to the links tab.

Guide to Writing for the Web

• All internal links should open in the same window. All external links should be set to open in a new window (so the user doesn’t leave your site then).
• Keep your copy short and sweet. Web users scan read quickly and will not read huge blocks of copy.
• Because web users scan read so much try and break up your info into bite size chunks. Use short paragraphs, bulleted lists and make the most of the formatted headers so that the information follows a logical hierarchy and is easily readable.
• Try to direct your readers to an action or a piece of information or link. Avoid bolding too much text or making everything a header 2. The reader won’t know where to look.
• Use contextual links. That’s the beauty of the internet over print. If you mention another part of your web site, link to it. Especially if it is a link you want them to go to such as buy/join/donate.
• Fill out the all in one SEO box at the bottom of the editor, below the main editing window. Your entry here needs to be one sentence that accurately describes the unique content on the page. This is how Google and other search engines determine what your site is about so that they can list it correctly.
• Add images where possible for visual richness.
• Be careful about using mailto: links – these attract spam. It is better to direct people to your contact form page.
• Keep things fresh. Nothing turns away visitors faster than a latest news item dated last year or pages that sit there with “coming soon” on them.
• Try not to publish a page with “coming soon” on it. Better not to show the page at all if you don’t have content, then promote it from the home page when it is up and full of good info.

This guide was last updated on 05/10/2010 by AW.