Updating the blog

Broadcasting your article to other Van Polen Group sites

Each site has its own BLOG database, which allows each location to post articles that pertain only to them. Most of the time, however, articles will cover broader topics that are beneficial to more/all of the locations. While writing the blog post it is possible to “Broadcast” the article, which will copy the article to whichever site(s) you select.

A Spa Article being broadcast (copied) to other spa site blogs
A Product Styling Tip being broadcast (copied) to all location blogs.

When posting your article, you will need to choose where to broadcast to by selecting from the broadcast options box:

Broadcast Options:

  • Link this post to it’s children: This allows you to edit from this post, and will continue to update on all other blogs this article is broadcast to. If you deselect this, you will give individual editing control to each location’s site; this may be useful if small portions of the article need to be customized for each site.
  • Custom Fields: Keep this selected. If any custom fields are being called into the post, they will be duplicated on the other sites you are broadcasting this article to.
  • Taxonomies: Keep this selected. Each site uses taxonomies (categories, tags) in order to define what it shows on the site.

Each site uses taxonomies (categories) when looking at the blog database to determine what needs to be shown. When writing your blog post (no matter which site you are logged in to) needs to have the category(ies) selected so that the intended sites know if it is relevant for them to display. If you want displayed on all location sites, you can select “All Locations”.

  • The Valley West Site will display any blog post with a category of: All Locations, or Valley West
  • The West Glen Site will display any blog post with a category of: All Locations, or West Glen
  • The Ames Site will display any blog post with a category of: All Locations, or Ames
  • The Rochester Site will display any blog post with a category of: All Locations, or Rochester
  • The Jordan Creek Site will display any blog post with a category of: All Locations, or Jordan Creek
  • The Coral Ridge Site will display any blog post with a category of: All Locations, or Coral Ridge
  • The VP Men Site will display any blog post with a category of: All Locations, or VP Men VW

If a category is not selected, the post will not show up in any blog feed list, even when a location has been selected through the broadcast options. The article will exist in the database, but not show up in the article list on the News page of the site it was broadcast to.

Note: The article will be shared/accessed/crawled via the direct link to the post.

Example blog post process

This WordPress Mult-Site setup includes a page builder called Visual Composer that comes with a lot of pre-built shortcode widgets to allow you total control of the layout & features of your blog posts.

Let’s walk through an example post to get you up-to-speed on how to use the page builder and broadcast to the other sites in this multi-site build. In this example, I will be logging in under the base account: ser2017, but as mentioned above, you can write & post from any one of the sites.

We’ll start by navigating to Posts > New Post on the left-hand navigation pane.

The New Post editor page opens, and should look like this:

If you are planning to write a post using the standard WordPress page layout, you can just add the Title and Article copy into the provided fields (shown below), then select your categories and choose which sites to broadcast to.

For this example we are going to take advantage of Visual Composer to create our layout. To switch to the VC editor, I’ll click the blue button titled “Backend Editor”.

Visual Composer Overview

The VC Editor default panel is now shown in place of the WordPress wysiwyg editor.

Since we aren’t working with any templates at the moment, I’ll select the “Add Element” button to begin creating the page layout.

You can see in the panel that pops up that VC gives us a lot of tools to work with to add great looking & powerful features to the post. I highly recommend testing a few of these out on a Post Draft to see what all is possible.

Layout Basics: Rows

Since I want to control the layout of the post, I will start by selecting “Row”.

Rows are a base structure for a grid layout. It defines a group that stays together, and the next row is stacked underneath, like so:

ROW 1
ROW 2
ROW 3

Now that I’ve made my first element selection in VC, we can see the editor pane shows us a canvas of our layout so far… our single row.

On the right-hand side of the Row, we are given a few tools to work with:

  • Pencil Icon: Edit row properties
  • 2 Boxes: Duplicate this row
  • Trash Can: Delete this row

On the middle-top of the Row, we are given a couple more tools:

  • Pencil Icon: Edit column properties
  • Trash Can: Delete this column (if only 1 column, deletes row)

In the center of the Row, there is a plus sign that allows you to add new VC elements inside of the row; the same as we did when we added this row to the canvas.

On the left-hand side of the row, we are given the options to:

  • Drag Icon: Drag to reorder this row within the layout
  • Column Icon: Adds Columns within the row
  • Plus Icon: Add another Column to the row; will display under the current columns if not enough space is available

Layout Basics: Columns

Columns fit inside rows and determine how the content is split up. By default, a Row contains 1 column. The content within the 1 column is spread across the entire row. If you want to split up your content by having, say, text on one side and an image on the other, you will need to increase the number of columns.

This site is using a base layout structure that allows for up to 12 columns per row. When you have more than 1 column in a row you can divide that space up so that 1 column takes 2/3 of the row, while the second column takes up the remaining 1/3 of the row.

The easiest way to select the column layouts is to mouse-over the Column Icon on the upper-left and choose from the options there.

I’ve gone with a nice 2/3 – 1/3 column layout. Notice that our Row is now split into 2 columns, and we are given individual options per column to edit its properties or add new VC elements within them.

Adding Content

Now that we’ve got our basic row laid out the way we want, lets start adding the content. I’m going to start by adding some TEXT to the left column, and I’ll do that by clicking the plus button in the center of the column. This will pull up the VC Element selection again, and this time I’ll choose the Text Block element.

The Text Block looks just like most wysiwyg editors, such as the WP default editor, Word, and so on. I’ll add the text I want for this spot on the page.

Next I’ll select the plus sign in the center of the right-hand column to add a new VC element to that section. This time I’ll select the “Single Image” element.

The Single Image options box pops up, and gives us some control over how this image will display. I’ll start by selecting my image, and I’ll do that by clicking the plus button in the image section.

I can choose from any of the images that have already been uploaded to the WP Site that I’m logged into, or I can upload my own image by clicking the “Upload Files” tab in the upper-left of that window, then clicking the Select Files button to find an image on my computer I want to upload.

For this example, I’m going to grab an image that’s already uploaded. Once selected in the selection pane, I can add or edit the image title and alt text to help with SEO.

Now that the image has been selected, I can see a little thumbnail on the Single Image element settings pane.

Under that thumbnail is a section that allows you to control image size.

You can choose default WP sizes by typing:

  • Thumbnail
  • Small
  • Medium
  • Large

This tells WordPress to create an optimized version of the image at one of those default sizes.

You can also type:

  • Full

This tells WP to use the image’s default size, but will scale it down to fit the column’s width.

And lastly you could type in specific dimension size (in pixels), width by height:

  • 250×300

In the example above, WP will change the image to 250px wide by 300px high.

I’m going to type “full” for my example because I want the column to control the size. Then I’ll click “Save Changes”

Now that my first row is done, I’m going to add a new row underneath by clicking the plus button and selecting the Row element from the VC Element pane.

Since I know I want this row to be full width, I don’t need to add any columns. I want this row to contain text, so I will mouse-over the text in the row above until I see the green set of icons. I will select the duplicate option to get another text block element.

Then I’ll mouse over that element until I see the green icon list. I’ll move this element by holding down the mouse button when I am over the drag icon, and I’ll drag it down into the row below – releasing the mouse when it is placed within the row.

I’ll then add additional dummy text to fill out this section by mousing over the text element and clicking the pencil icon; make my edits and save.

Changing a row into a header

I would like the first row to be a heading for this post, and VC gives us some great tools to do that.

To start, I’ll click the upper right hand corner pencil icon of our row to open the options panel.

In the Row Options panel I’ll start on the General tab and select “Stretch Row”.

Options:

  • Default: Set by the theme, currently the content is boxed in the middle of the screen and the page’s background color is seen on either side.
  • Stretch Row: Stretches the row so that it’s background properties go across the full width of the screen while leaving the content (text, images, etc.) boxed in the center so it stays aligned with other page content.
  • Stretch Row & Content: Stretches the row/columns/content to the full width of the screen
  • Stretch Row & Content (no padding): Same as above, but removes the left & right padding so that the content bumps up with the edge of the page. Useful for image sliders and videos.

Then I’ll choose the Design Options tab and set the background color that I want this row to be. I’m using the default dark color used in the Serenity sites: #1b1b1b

Now I’ll go to the Background tab. There are some cool options here, but for now I’m going to be adding a parallaxing background image. Parallaxing is when 1 item on the page scrolls slower than the rest of the items on the page. This effect adds a 3-dimensional depth to the page.

I’ll click the plus button to add my image, just as we’ve done with all of our other images, and I’ll leave the other settings as is, then click save changes.

Since we just made this background dark, I’ll need to go back to our text and change the color so that it stands out. I’ll mouse over the text block until I see the green options list, and I’ll click the pencil to edit.

I’ll select all the text, then I’ll click the font color button and change it to white, then I’ll click the Save Changes button.

I want to add a button under this text, so I’ll click the small plus icon in that column (right under the text block).

This pulls up our old friend VC Elements selection pane. I’ll scroll down and select the Button element.

Again, VC gives us an options panel with plenty of features. I want to duplicate a button I already created for the Serenity sites, so I’ll click the presets drop-down and select “serenity-grad-button”, then clicking the orange “reload” button. This will overwrite the default button with our presets.

I can change the url, button text, and icon, then click save changes.

Preview your work

Ok, that’s enough work to give us an idea of how it’s coming along. To preview the draft, click on the button titled “Preview” in the upper-right of the page. This will open preview of the post within a new tab.

And here’s what we have…

I can see there is too much space at the bottom of the image, so I’ll go back to the VC editor, and select the edit button on my image.

In the Design Options tab, I’ll make sure that the BOTTOM MARGIN is set to 0 pixels by typing 0px into the box, then saving the changes.

Now I’ll click the preview button again to see how it looks…

Perfect. Now it’s time to to do the final prep before I publish/broadcast this article.

Finalizing before publishing/broadcasting

Now for the final steps to wrap this up.

  1. I need to select the Category(ies) to determine whose feed I want this to end up in. For this example I’ll choose All Locations

2. Next I need to set a Featured Image. This is the image that shows when the blogs are listed out. On the Serenity Sites, the most recent 4 blog posts are shown on the home page, and the full list is shown on the News page. This image is the attention getter, so make sure it looks good & fits the topic.

For this example, I’m going to use the same image I used within the article itself. I’ll click the “Set featured image” text, then I’ll select the image the same way we’ve done with our other images.

3. Set the broadcast options. This is where we tell WP which blog databases need to have this post written to it.

4. Now that we’re all set, I’ll click the publish button to publish this article; it will be posted to all of the blog databases we selected.

5. Double-check all of the sites you broadcasted to; you’ll want to make sure they are showing up. In this example, I’ll navigate to the Valley West site to see if it is showing on the home page…

Sure is.

Let’s click to see how the full article looks…

Nice!