Co-Lab User Guides: Getting Started with WordPress and Page Builder
A guide for teaching new users how to create content using the native WordPress authoring interface and the Page Builder add-on
Overview of the WordPress Authoring Interface
Some Preliminary Notes ...
myECDA Project Types
*myECDA accounts come with 7 premade project types. They all make use of the same features, but are intended to help you organize and manage your project content pages. You can build as many pages under each page type as you wish. And there are mechanisms built into the WordPress and Page Builder author interfaces that allow you to associate pages to each other where desired.
Say, for example, you created an exhibit homepage (myExhibits), composed an essay on the exhibit topic (myEssays), and created a timeline of events (myTimelines) and a map of all archival items discussed (myMaps) using the DRS Toolkit Shortcodes feature. You could associate all of these materials via the Page Builder feature. Learn more about how to do this and more by visiting our Co-Lab Guide:Building an Exhibit: A Basic Template and Overview
Standard mECDA project types include,
myProjects: a general post content type that could be used for managing content that doesn't fit neatly into the following types
myExhibits: a post type for building and managing your project content that is intended as scholarly curations of archival materials
myEssays: a post type to produce, store, and draw on compositions that are more akin to the scholarly or academic essay
myTimelines: a post type for building and managing your Timeline projects
myMaps: a post type for building and managing your Mapping projects
(curricular page types)
mySyllabi: a post type for educators to compose, manage, and share early Caribbean related course syllabi
myAssignments: a post type for educators to compose, manage, and share assignments and activities related to the teaching and learning of the early Caribbean
Creating a New Project Page
Step 1: Log into your myECDA account
Step 2: Choose a project type (see myECDA Project Types above for more info) and "Add New"
Before we go into the details of the authoring interface, let's go ahead and
Step 3: Give your post a Title and Save it
YAY! you've created your first project content page!
* You will now see your new project page listed under the "All" of your chosen myECDA post type (e.g., myExhibits = All myExhibits)
** You can "Preview" your page, but not much there yet ... so let's create something
Quick Overview of Basic Post Handling Components
Before we start adding content, let's cover some basics of managing your post itself:
Title and Slug You can update the title of your page at anytime. On your initial page save, WordPress will rewrite your title as a unique slug. A slug is a page's url extension of the site's domain, and is basically the direct link to your page from the front-end. For example, if you titled your page "Ben's First Exhibit Page (A Test)", WordPress would automatically rewrite this to "/bens-first-exhibit-page-a-test," stripping out all special characters to hyphens. You are free to leave whatever WordPress translates as your slug for you. But you can always edit the slug (by selecting "edit" then "okay"), which can help you and your visitors recall the unique extension of your project pages.
*You cannot alter the "ecda.northeastern.edu/" prefix, as that the primary site domain. All myECDA project content is an extension of the ecda project domain. You are free to export and republish any content you create through our project into your own current or future project sites.
Saving and Publishing: In WordPress you have a few options for managing the privacy of your web content.
The general public can access your page content when you select "Publish." We do not promote any myECDA user created content without request or permission by the owner of that content. But when a page is published, it is public and anyone with the direct URL can view it. If you are creating content you don't wish anyone to see from the front-end (e.g., your composing personal research or in the drafting stages of a larger project), you have a few helpful options:
(A) Save your pages as "Drafts" by selecting "Save Draft" button under "Publish" widget (will return "page not found" on front-end.
(B) Publish your pages but make the page "Private" (will return "access denied" on front-end, unless "author" of page is logged into her myECDA account)
or "Password Protected" (will return the page with content hidden behind a password field)
At any time, you may alter these settings to suit your needs. If you cannot access your password protected content because you've forgotten your password, please contact support
*We do not assume, advise, nor take responsibility if you choose to publish sensitive or personal information in your project pages. You can control who sees your content from the front-end following instructions above. However, ecda Admins can see, restrict, and remove any content added to the ecda's project site. If you have more questions about managing content privacy or terms of privacy and content redistribution, please contact our team
Author / Admin: WordPress pages are automatically associated with the logged in myECDA user who initially creates the post. However, you are able to edit ownership (say for collaboration or classroom scenarios) by scrolling down to "Author" and selecting the myECDA user.
*the author must be registered user of the ecda project site
**once this is down, the previous author will lose all access privileges to the admin / author view of the post. Be careful!
Discussion, Comments, and Trackbacks: You can enable or disable front-end readers from leaving comments on your exhibit pages. Readers must have myECDA accounts and be logged in to leave comments.
Trackbacks refer to when someone pastes the URL of your content into their web pages, and the system will notify you of this.
Categories: Categories are used on our project site to promote your content to the front-end. Please refrain from assigning your content to Categories unless you wish to have it promoted.
We are working on having a smarter setup to disassociate myECDA user generated categories from our project site categories. Stay tuned!
Features You Can Ignore:
Featured Image: All pages can support a featured image, which will be displayed on the front-end when using the Page Builder post loop feed. The ecda team may make use of a featured images on myECDA user page items when promoting their projects and content to front-end site feeds (w/ user approval of course). Because we do not make much use of featured image feature, you can ignore this, designing your exhibit pages to present a featured image using the page builder widgets as it suits you.
Excerpt: This can be ignored as well, we don't make use of it and Page Builder doesn't either. Use same approach as Featured Image to produce your own custom "excerpts" on your exhibit pages.
Custom Fields: This is an advanced feature we make use of on our project site pages, but have not hidden as there may be future opportunities for myECDA users to make use of this feature. Ignore this widget for now.
Post Attribute: Ignore this widget for now. Eventually we will update the admin pages manager to allow you to create parent and child relationships across your project pages for better management from the admin interface.
WP Composition Space
Now let's cover some basics of building content using WordPress and Page Builder...
The Composition Space
Our WP composition space offers three possible views for composing your exhibit: Visual, Text (HTML), Page Builder
The visual tab is native to WordPress and allows you to compose content without having to write HTML. The Toolbar options include formatting functions that are common across most WYSIWYG (what you see is what you get) interfaces.
The text tab is also native to WordPress and allows you to compose using HTML and inline CSS.
*It's not recommended that you toggle between the Visual and Text views as this may remove applied formatting across views. We do, however, recommend learning some basic HTML and CSS as this can help you design more complex and dynamic content, and allow you to work across the limitations of both views more effectively, creatively.
Code Academy and W3Schools are two terrific resources online for getting started with coding on the web
Page Builder supports both Visual and Text composing methods in its drag-and-drop interface for structuring, and inserting content into, your exhibit pages. In the Page Builder section below we will cover content creation with assumption user is composing with the Visual method. You can follow the section even if you plan to write HTML, but we will not be addressing specifically options/restrictions for using Text HTML method.
Two Features for adding Media Content
Add Media: WordPress natively supports a Media Library for uploading and embedding media files into post types (covered later in this guide). The media library is a store space for the myECDA user's media that is not (yet) stored in our central repository. You can still use the Toolkit Shortcode features on items in the media library (say, build a nice image gallery or timeline of smaller media files you've added via the Media Library uploader). Please contact us to contribute materials you'd like permanently stored in the ecda's repository and accessible via the DRS Toolkit connector rather than the personal media library.
Add (DRS)Toolkit Shortcodes: The DRS Team has created a custom connector to our archival materials stored in the central repository (view item from our archive browse page) that allows myECDA users to create galleries, timelines, maps and more and embed this content into exhibit and project pages using shortcodes. Shortcodes are used to represent more complex pieces of code wrapped in brackets. You can learn more about how to use this feature in our next Co-Lab guide on Building Exhibits.
Page Builder for Creating Exhibits
Page Builder is a powerful tool and can help you build really cool exhibits. We cannot cover all aspects of Page Builder. The goal of this section is to get you started with some of the basics. You will probably have questions not addressed. You should of course contact our support team with any questions or issues you encounter. You should also read through the Page Builder documentation materials .
Let's get started!
*You can create an exhibit (or other page builder content) using "Prebuilt Layouts" feature. This feature allows you to "clone" format and content of existing projects using page builder. Overtime, the ecda team will generate templates for myECDA users to copy for building exhibits, maps, timelines, and other types of project pages. This feature can also be used by you to build templates that you can reproduce with ease across your projects (e.g., you may have a template for how you compose your exhibit pages, and can "clone" and customize these as you choose).
You can jump to our Exhibit Homepage Template (Basic) to see a sample template using Page Builder.
In the following exercise we will start from scratch.
Rows and Columns: Let's Design a Basic Content Structure
The key components of page builder are Rows/Columns and Widgets.
Create A Row
Step 1: toggle the "Page Builder" tab at top right of composition frame
Step 2: Add your first row: page builder options bar > "Add Row"
*Rows are the parent containers of your content widgets that you can arrange into flexible row-columns.
** You can write out the desired percentile division of each row's child column, or you can move the grid by click on the dividing lines between each column to readjust.
Step 3: Adjust row to enable 3 columns
*when you create a new row, it gives you option decide on number of columns
**you can edit row column number afterward by selecting "edit" (wrench icon) > "Set Row Layout"
Step 4: Change the background color of this row: row settings (tool icon) > Edit Row > Design > Background Color
*you can just click the wrench and it will toggle settings view
**we will select a bright orange color for the example. We will change this later, but it will help you see when you save and preview that your row container is there even though we haven't added any content yet.
Now you've created your first row. If you save your post and view it from the front end you will probably see something like this:
We've created a content container, told that container to have a background color, but we haven't yet added any content. We will now do this by adding Widgets into our row-columns.
Widgets: Now Let's Add Some Content !
Step 1: Add the Visual Editor widget: page builder options bar > "Add Widget" > "Recommended Widgets" > Visual Editor
* Widgets are the primary content containers of our project pages
** there are a range of available widgets to add and display custom content. We will not cover all widgets and options in this guide. For now, we will focus on the "Recommended Widgets" > Visual Editor in widgets menu. As you will see below this widget reproduces the WordPress composition view and constitutes a basic mode for adding and composing content.
We now have a widget for adding some content into our row. Let's now add some more widgets to fill out our available columns and move them into place
Step 2: Move your new widget to the middle column by dragging it
Step 3: Duplicate widget to create enough widgets for each column: hover over widget > select "Duplicate"
Step 4: Drag your widgets so we have one widget per column
Step 5: Add some text "Hello World!" to a widget (Visual / Text modes): hover over widget > select "edit"
*the Visual Editor widget reproduces the basic WordPress composition view, with Visual and Text modes, the "Add Media" and "Add Toolkit Shortcodes" features, and "Widget Styles" customizer options
If we update our post, we will see our "Hello world!" text. Not much to look at yet, but we're getting somewhere.
You'll note -- if you gave your row a background color -- the width of the row leaves a margin on both sides. You can edit the width of your rows to full width by selecting row settings > "Layout" > "Full Width"
We can also remove the row-background color to make our text more readable by selecting row settings > "Design" > "Background Color" > "Clear"
You can also leave or adjust your row-background color and edit the widget itself:
(Option 1) the widget background color (widget > "edit" > "Design" > "Background Color") *you may need to adjust your widget padding so text doesn't sit too close to edge of widget (widget > "edit" > "Layout" > "Padding") or (widget > "edit" > "Attributes" > "CSS Styles" > "padding: 10px;")
(Option 2) the widget font color (widget > "edit" > "Design" > "Font Color") or (widget > "edit" > "Attributes" > "CSS Styles" > "font-color: #474747;")
Media Library: Let's Upload and Embed our Custom Media Files
Some Notes on Media Library ...
Our media library is a personal store space for myECDA users to upload and embed images, pdfs, video files into their posts without having to have this media ingested into our central repository. It is a native WordPress feature. In our context, you can think of the Media Library as your personal archive space that's not connected to the central repository, but can be used in Toolkit Shortcode feature . We'll cover the basics of Toolkit Shortcodes and crossover with Media Library in next section.
Outcome for Adding Media Library Content:
*for this example I will recompose my widgets to reflect the following desired front-end format:
Left widget to a media file image (add "project image" text to widget-left > "Title" field)
Middle widget to a Page Title (add "project title" text to widget-middle > "Title" field)
Right widget to an "About Me" statement (add "about me" text to widget-right > "Title" field)
Now let's add some media to our "Media Library" and embed this into a widget.
Step 1: Add media to one of your widgets using the "Add Media" button
Overview of Add Media View
"Media Library" tab will show you all media in your library
"Upload Files" allows you to add a single or multiple media files at once, after which you can select the media item you wish to embed
"Create Gallery" allows you to build a gallery view of multiple media files (we won't cover this, but it's a great WordPress feature)
"Featured Image" makes selected media file as the featured image of entire post (not supported site-wide in our project, so ignore)
"Insert from URL" allows you to add media that lives elsewhere on the web
Step 2: Select your newly uploaded media item to add into your widget
Step 3: Adjust image to desired placement (none, left, center, right) and dimensions (dragging adjust border to desired width/height)
*you may edit or change out this image at anytime by selecting the pen icon
Step 4: Save post and view the results
Step 5: Add a title to your middle widget title block
Step 6: Add a bio pic (using above method) for your right widget and some text
DRS Toolkit Shortcodes and Live Editor (Page Builder)
Outcome for Adding Media using Shortcode via the Live Editor:
For the following demonstration, I used the live editor to edit my second row of content to create,
Row 1: Same as above exercise
Left Widget: Removed!
Middle Widget: Made a "Project Description" container; expanded to 70% of row
Right Widget: Made into a "Related Links" container; takes up remaining row width
Some Preliminary Notes ...
One of the coolest features of Page Builder is its "live editor" option. This feature let's you simultaneously edit your page builder content and view the front-end result.
You can select Live Editor whenever you wish.
"Duplicate" Rows/Widgets to develop out your page
You can easily continue to build out your content by Duplicating preexisting rows or widgets, changing out content and editing Styles as necessary. (this is where wire framing comes in handy, knowing what your basic architecture will be at the start so you can generate templates and quickly reproduce them)
Step 1: Open Live editor: page builder options bar > Live Editor
Step 2: Duplicate Row 1 to create Row 2
Step 3: Delete left column of Row 2
Step 4: Adjust Row 2 column width to enable left column a 70% width
Step 5: Name "Title" of left column and add some description text
Step 6: Name "Title" of right column "Related Links"
Step 7: Add your html links to right column using the link icon in Visual editor toolbar
Step 8: Save post and preview