This Website is built on WordPress, a Content Management System designed to make managing your company’s website easy to do so.
After you’ve logged in you will have extended information in the FOOTER of the website. Typography shows all the available styles and this page, Tutorial, will get you situated with this custom installation. Please refer to this page for all the basic information. The following items are found through the dashboard area:
Pages are what you would expect to find: All the page content is located here. Getting used to how to edit pages will help out with the next sections as these items all are basically designed the same and have the same or similar layouts and terminology.
Creating and editing a page: Add New will create a new page. A new page will not show up in the menu and will only be accessible with a link. The first step is to write a page title at the top. Next, the permalink (or URL) will auto-populate a name, which is not relevant for this website because the website is HASH dependent. More about Hash marks in a minute. The main content area is yours to add or edit text and images. The Add Media button will reveal a library of images already included, or you can add more images of your own (click the button and view options). Once you have included the content for your page you need to add 2 custom fields. First, is bigPageTitle which is the text that will show up as the big page title text. Second is nextPage the arrow link inline with the big page title (>): simply add the page you want that arrow to take the view to: no spaces, no capitals, no slashes and it needs to match that page permalink that is highlighted in yellow (or the last /location/). To save, click Update. In Page attributes, parent and template are not important with one exception. The home page needs the template to be “Simple One Page” or the site won’t work. Lastly, the Featured Image is the background image associated with that page. When adding a featured image for pages, the image should be no smaller than 1800 px wide but not larger than 400Kb to keep load time fast.
Hash Marks Explained
Hash marks dictate what is visible on this website. When you click on ABOUT, the url adds /#about, or simply #about. That hash mark is the last part of the permalink, which is most likely the page title, and which needs to entered in the nextPage custom field for an arrow to link to that specific page. That hash mark also makes the menu item selected (black background). For example, the home page has the nextPage custom field as “home” and will add #home to the url, and the menu item for Home will aslo become highlighed. More on the menu below.
Staff Profiles (About Page)
The About page has a shortcode that looks like this: [custom_posts type='staff_profile'] . Don’t deleted or edit this link of code or the staff members section will not load. To add staff members use the Staff Profiles section from the Dashboard menu. Here you can add, edit or delete staff members. To edit click a name or Edit. Like the Pages layout, add the name as title: the popup name in red, then add content, what shows up on the mouse click. Under Attributes the order determines which names show up first. John Stava has order number 1 and will show up first. If two staff profiles have the same order number, it then orders alphabetically. The Featured Image is the staff photo… make sure that the photos are edited to match the rest of the staff photos before adding. Also, add only a color image, the grayscale effect is managed in the jquery code, which you don’t have to manage.
Portfolio Items (Client Page)
Please be familiar with the Staff Profiles before reading more about Portfolio items as they are very similar, except there is no sort order number. These items will show up on the site in alphabetical order. Add or edit any portfolio item. Here you only have to add a name and the featured image, where the image is white on transparent PNG format. If you want this item to be a Portfolio Case Study, simply write content in the main content area, place the cursor at the very first character and press the Add Media button, adding at least 2 image thumbnails through the Add Media console: In the Media console, upload or click an image > on the right hand side LINK To The Media file (Important!) AND choose thumbnail 150×150 (also important!). Everything else that shows up on the site is automated.
Working with images and fancybox
If you look at the Client’s section, each client has a grouping of images that when clicked open up a larger image in a layer that covers the website. This is called FANCYBOX… the name of the script engine that this website uses is called Fancybox.
- The NEWS page will automatically create this effect. Whether you place 1 or 10 images in your News Post the fancybox effect will be automatically created.
- For PAGES; however, the fancybox effect is not automatic and a [shortcode] has to be added:
… add images here like normal. Also you will need to log in to see this code in action!
WordPress Video Tutorial links
When in doubt and as part of new website manager training please refer to these video series: http://ecarbonated.com/knowledge-base/wordpress-training/ While not all the features of WordPress apply to this very custom version for Stava.com, this tutorial will help to navigate and lessen the learning curve.