Step-by-Step Project Setup

Getting Started with ProjectBlogs

In this guide I will walk you through creating your first project. In the process you will become familiar with WordPress and our ProjectBlog format.

The walk-through will begin assuming the project has already been created and you have just logged into your project space at http://thirtythree.org/projects/wp-admin

 

Step 1: Gather and Organize your Media : Pictures & Video

You will want to have your pictures ordered before getting too far.  Begin by selecting which pictures you would like to be a part of your project.  You will then want to name them in such a way that the order of the media is apparent when you begin to search through the photos to add them to your project.  Ordering in advance will save time and make it easier to find and add your photos.

Step 1 Organize Media

Step 2: Login and become familiar with the admin panel.

Login to your new project space: thirtythree.org/projects/yoursitename/wp-admin

Here are some definitions of the purpose of each link you will see on the left:

Posts: are project after-thoughts, a place for discussion around any given topic you post about.  Here you can create new Posts and manage the existing Posts that will show up under the ProjectBlog section of your project space.

Media: are the photos that you have uploaded to your project space.  They are add/changed/removed from here, though you will have a link to add media to any page of the site while editing it, and the media added when editing a page will be tagged with that page name.

Pages: are the most important area of your project.  4 pages combine to make up your project space.  The way this is done is through a Corona Template that is configured to include each of the 4 pages.   You could add sections to your project space such as a portfolio section by adding a portfolio to your Corona Template.  More to come…

Comments: are user responses to your Posts, you have to approve them.  ProjectBlogs uses a built in anti-spam system called Akismet.

Portfolio Items: are single photo albums which can be created and added to your project page, most easily by adding a portfolio item in your ‘Projects Main Page‘ template located in Corona > Template Builder.  Portfolios are great for featuring a series of single images.

Corona: is the advanced WordPress theme that gives function to this site, and enables the look and feel of your project space.

Appearance: is where you configure your Menu’s.  If you plan to have multiple projects, you will need to go here to add a menu item on the ‘Main Menu‘ for the new ‘Main Project Guide‘.

Plugins are: extensions to WordPress functionality.  Several are in use here at this site, please make a request to the site admin to have specific plugins installed and network enabled.  Otherwise there should be no reason to go here.

Users: are where you set your user options.

Settings: see menu for advanced details.

Step 2 Admin Panel

Step 3: Familiarize yourself with the 4-Pages of the ProjectBlog Space

On the main page of your new project you will see numbered sections 1 through 4.  These designate the four pages of the project that are combined to form a single presentation.  It is in these four pages that you will be writing and adding media.

This is the format of the sections that make up one Project Page

1 – Project Title & Introduction – Introduce your project and the inspiration for beginning and completing it. [P1] Project Page Opening

2 – Materials, Tools & Cost – Where you will outline the materials used, how you obtained, how much you spent or any other information about the materials used in your project. [P1] Materials Tools & Costs

3 – Pictures & Descriptions – Where your (image) – (description) format will go.  You can stay simple or get as fancy as you like in this section, incorporating WordPress Shortcodes to increase the density of information by using tabs, sliding lists, etc to display your sub steps to the reader. [P1] Main Project Guide

4 – Closing, Final Considerations & Lessons Learned – Where you will discuss lessons learned and close out the project.  Put whatever you want here.[P1] Project Page Closing

Step 3 project-pages

 

Do You Have Multiple Projects? 

Add a New Related Project Page to your Existing Site:

You can create new Pages, Posts and Portfolios and link them to your menu.  To add a new Main-Menu item, navigate to (Appearance > Menus) and select Main Menu, and then select the Page you wish to link to.

Create a New, Unrelated Project for Existing Users:

If you intend on creating a new, unrelated project then all you need to do is fill out the application form a second time and we will setup a new project for you that will show up under My Sites in your Admin Panel.  When filling out the form, provide your current username to be linked to your new project space.  You will be able to edit both projects from the same console, your media will be separated and easier to manage, and your new project will be displayed and listed in its own space.

Step 4: Begin writing about your project

Pages are where you will spend the majority of your time creating your project space.  Each project page is made up of several sections which when filled out individually, combine to produce a one page final product.

Open any one of the Pages that are designated [P1] and begin writing or paste materials you have already assembled into the main body of each of the pages.  You will find existing text and images which are there to serve as a prompt to help you begin writing, and explain the format.  Make sure you eventually delete everything that was preexisting, including the media.

  • [P1] Project Page Opening
  • [P1] Main Project Guide
  • [P1] Materials Tools & Costs
  • [P1] Project Page Closing

The [P1] Main Project Guide will require some special formatting for a (picture) – (description) layout in order to work and look best.  This formatting is done via bracketed [shortcodes], and will be explained more in Step 6.

Multiple Pages Note: Consider editing the names of your pages to put your project name in between the brackets.  The naming will be useful if you intend to have multiple related project pages on your project space. e.g. [ProjectName] Main Project Guide

Step 4 begin writing

Step 5: Upload your Media

Click Pages, then select [P1] Main Project Guide.  Click the ‘Add Media’ button at the top.  Select ‘Upload Files‘ under Insert Media and begin adding all of the images you organized in Step 1.

Tip: Adding media from any given page will associate the photos you upload with that page, making it easier to locate images you wish to use for that part of the project space.  e.g. Materials photos should be uploaded from the [P1] Materials Tools & Costs page for your first project, and so on.

Step-5-add-your-media

Step 6: Present your Pictures & Text : Main Project Guide [P1]

The photo walk-through.  The Project Guide; this is centerpiece of your project space.  It will be where your step-by-step write-up is located; where you can detail each photo-step you wish to write about.  The text column next to each photo is where your description will go, and you may choose to simply write in this space or get as fancy as you like with built in text and picture layout options.  Using ‘tabs’ or ‘toggles’ [shortcode] is a good way of increasing text density if you need to show several sub-steps for one photo.

Six Steps to Formatting Pictures and Text: Open the picture up on the right to learn the process of easily creating all sorts of shortcode via the Magic Wand (shown far below).  Initially you will want to become familiar with the ‘column shortcodes’ as displayed below.  You can then use them to add as many photos and descriptions as you need to complete your project guide.

Formatting-Sixstepsaddpictu

Click to Enlarge

Step 7: Configure Corona > Theme Options

Configure the subsections of the Corona Theme Options below:

Theme Options

  • Google Analytics Tracking Code

Styling

  • Change Color Scheme, Link Colors & Heading Fonts

Contact & Social Stuff

  • Add your E-Mail Address to enable the Contact Form
  • Add your Twitter account
  • Add your RSS Feed URL
  • Add your Facebook page

Step 7 configure theme options

Step 8: Update User Options

Change Your Avitar & Password

If you have not done so already, change your password to  one more secure than was provided for you.  You can change both your password and add your users’ avitar from your profile screen.  

Go to: USERS > YOUR PROFILE

  • Update Password
  • Upload Avitar Image

Step-8-User_Options

Featured Image, aka ‘Slideshow’

Slideshow Layout Note

At the very top of your project page can be a single image, a rotating series of slides, or a set of images that slide to the side when hovered over called AviaCordion.  Use this space to display a photo (or series of photos) of your project.

Enable and configure your slideshow towards the bottom of the [P1] Project Page Opening page.

  1. Select and expand ‘Slideshow Options’.
  2. Choose several photos to use by clicking the green + under ‘Add Featured Media’.
  3. Enter captions to be displayed at the bottom of each image.

Slideshow Options

Multiple Related Project Pages on One Project Space

Read this if you plan to have multiple, related projects on your site

The template of this WordPress system has been pre-configured to make it easy for anyone new at WordPress to showcase a single page project. Here we explain how to present multiple related project pages.

We cannot display this gallery

Page Formatting Options

Shortcode Formatting options are available by clicking the   Shortcode Example-Magic Wand

Shortcode Example_Magic Wand Clicked

Shortcode Example-Tab

Shortcode Example-Columns

Tab Shortcode Example:

Name of Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.

Name of Tab 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

1/2 – 1/2 Column Shortcode Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

1/3 – 2/3 Column Shortcode Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

1/3 – 1/3 – 1/3 Column Shortcode Example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Advanced users may also reference the Corona Documentation for information on how to use the built-in features of this WordPress Theme, or view the CoronaReference site for formatting examples and theme capabilities.

Network-wide options by YD - Freelance Wordpress Developer