Overview

Austin’s site is powered by WordPress and the following plugins:

• Button Checkbox: easy buttons in the WordPress editor.

• Categories Images: allows images on categories (for the sidebar)

• Page Builder: an easy way to add columns and layouts to pages (for all pages)

• Simple Page Ordering: re-order projects by dragging & dropping (for the menu)

• SiteOrigin Widgets Bundle: provides extra widgets like a WYSIWYG editor (for all pages)

• Toolset Types: this is how the projects custom post type was created

• W4 Post List: provides a list of all posts (for the sidebar)

We are using a custom theme. There is no parent or child theme.

How to manage posts

To create a new post, navigate to Posts » Add New.

To manage existing posts, navigate to Posts » All Posts or click the top-level item, Posts.

When you are creating or editing a post, you will see page like this:

These fields are covered in the next section, How to manage pages.

How to manage pages (including the home page)

After logging into the WordPress dashboard, navigation to Pages » All Pages or click the top-level item, Pages. There you will see a list of all pages, including the home/front page and blog/posts page which are labeled as such. To create a new page, click Add New or navigate to Pages » Add New.

Clicking on one of the pages will bring up the editor and a few configuration options.

Title and permalink

This is where the page title goes. Below the page title you can edit the permalink, or URL at which the page can be visited. This is auto-filled if you don’t set it.

Editor

There are three options for the editor, located on the top right of the text box: Visual, Text, and Page Builder.

Visual

The default mode, Visual, allows you to format text without touching code using the buttons above the editor. This is useful if you just need a page with text and images in one column.

Text

This is how you see and work off the HTML source code of the post.

Page Builder

Page Builder allows you to create layouts with widgets (blocks of dynamic or formatted content). The first step to building a layout is to create a row by clicking the Add Row button above the editor. From there, you can configure how many columns the row has by clicking the wrench above the row. You can drag & drop the rows into the order you’d like by grabbing the handle next to the wrench.

To add a widget, click Add Widget.

The widget you’ll be using most of the time is SiteOrigin editor. This is a Visual editor widget.

Once you click the widget you want to add, it will appear on the page in the last row you added.

Double-click or hit Edit to edit the widget. You’ll see a screen like this:

The content is the important part. The title of the widget is not required. I recommend putting the title inside the content using a heading tag. On the right, you’ll see some options for Attributes, Layout, and Design. You don’t have to fill these in, but there are some options available that will be covered in How to manage projects.

Click the Done button on the lower right when you are happy with the content. (Don’t forget to hit Save (for drafts) or Update (for publicly published pages) on the main editing page to save the entire page.)

Hero

The top banner for the pages can contain text. I recommend a Heading One and a short paragraph for each page.

Publish

Depending on the status of the page, you’ll see two different Publish sections. The left one is when the page is in draft mode. The main actions are Save Draft, Preview, or Publish. When the page is Published, you can Preview Changes (if you made changes) or Update.

Page Attributes

Here you can set the Parent for the page. The relationship will show when you are editing pages and setting up the menu. It will also be visible in the URL of the page, e.g. if the page Dog is a child of the parent Animals, the page URL will be domain.com/animals/dog.

You can also set the page order here, which is not applicable to pages and will be covered in How to manage projects.

Featured Image

The featured image for pages shows up at the top banner with a gradient overlay.

How to manage projects

Navigate to Projects » All Projects to edit existing projects, or Projects » Add New to create a new project.

Much of the editing options are the same as the Pages editing options. You can set the order in which the projects show up in the mobile menu by navigating to Projects » All Projects and clicking Sort By Order above the list of projects. Drag & drop to order order the projects.

There are various widgets available for projects.

Text

For text, use the SiteOrigin Editor, I recommend padding a row with 10% width on each side. This is so the text doesn’t stretch for the whole page width, making it harder to read.

Full-width image

To create a full-width image, use the SiteOrigin editor. To configure the background, do the following:

Click to edit the widget. On the right-hand side, there are three Widget Style sections, Attributes, Layout, and Design.

In Attributes, set the Widget Class as full-width-section.

In Design, upload your background image and set the Background Image Display as Cover. This makes it so the image is responsive.

Quote

To create a quote, use the SiteOrigin Editor.

Click the quotation marks above the editor to make something a blockquote. Then add the author name, prepending it with [cite] and ending with [/cite].This stylizes the citation.

Call to action

For the call to action section, use SiteOrigin Editor. In the Attributes section of the widget, add the classes full-width-section gradient-section cta-section, separated by spaces. To create a button, click “Make it a button” when you add a link by clicking the link button above the editor.

This will create the primary button (currently a teal color). Any other link you add to this section will automatically be turned into a secondary button (currently a mauve color).

Related blog posts

This is a section that fills itself in automatically. To connect or link posts and projects, place them into the same Category when you are editing them.

How the blog sidebar works

The blog sidebar includes a search, category listing, and blog post listing. The search has no configuration options. To add/delete/manage categories, navigate to Posts » Categories. To manage the post listings, navigate to W4 Post List and edit the list there.