Upfront really shines when it comes to creating beautiful content for your site. Whether you want a uniquely styled blog post or a gorgeous contact page, Upfront will let you control every detail of every piece of your content. Let’s walk through creating new posts and pages, step by step.

8.1 Create A New Post

Link to chapter 1

Start by clicking New Post in the Upfront editor panel.

upfront_create_new_post_button

 

Writing Mode

Important to note: Everything that you create using writing mode (i.e. posts and pages) is stored in your WordPress website’s database. The title and content areas are essentially the same as the ones available in the WordPress admin, and any content created with those areas will be stored in the database and made accessible across all and any themes.

When writing mode is active, the Upfront sidebar will be hidden and non-post elements faded out to provide a distraction-free writing experience.

Writing is simple: Give your post a title, add a feature image (optional) and start writing your post in the main content area.

upfront_post_example

Inserting Images

Images can provide a powerful way to help illustrate ideas in blog posts. Upfront image inserts provide more control and flexibility for the placement of images into your blog posts, allowing you to create stunning image layouts.

In order to add an image, simply add a double-return and move the blinking text cursor to the empty paragraph that is created. An insert icon will appear. Click on it and select the image you want to insert. Each theme comes pre-packaged with a collection of images designed to work best with that theme.  You can also use standard WordPress image inserts by selecting WP Defaults option in the media manager, which will then display the different image sizes that are available.

In the video above, you can see the process of inserting an image into a post, as well as the many image variations available to you.

Once you’re happy with the layout of your image, complete your post by adding any tags and categories. Then update the URL slug for your post.

Post Settings

In the Upfront editor panel, you’ll notice an extra drop-down section to address the settings for the current post.

upfront_post_settings

In the first tab, you can edit the title, URL, and meta description (for theme designers). You can also save, change the post status, and preview the post.

upfront_post_settings_cat_tags

In the second tab, you can manage the post’s categories and tags.

8.2 Create a New Page

Link to chapter 2

Creating pages in Upfront is slightly different than how you would otherwise to it with WordPress. When you click New Page, you’ll be prompted to choose one of three options: page name, permalink, or page template. If you create a new page without a template, you’ll find it’s a similar experience to creating a new post, with dynamic content that uses writing mode.

Creating a page from a template allows you to replicate and use an existing page template design. Currently, all page templates contain static Upfront elements, meaning any content and layouts created with them will only be available to the currently active theme.

Modifying Post Template

Upfront 1.1 introduced a more intuitive single Post experience. Instead of the imposing post block used in older versions of the platform, version 1.1 introduced the concept of dynamic elements, breaking up post blocks into a number of smaller, de-coupled elements. This change provides greater control over the single post template.

Altering the Look of the Post Template

Let’s explore the potential of the new single post experience with an example that modifies the post template for the Panino theme.

Panino single post screenshot

The image here shows the original Panino post layout (left) and modified layout (right).

In the default layout, the Title, Date & Content parts are contained within the post data element. As such, they all constitute one block. You can, however, break it up. Here are some of the steps required to create the layout on the right:

  • Delete the feature image element
  • Select the Post Data element, create a new preset and call it Title and switch off the date and content parts
  • Add a feature image element just below the Title
  • Create another preset for post data called Date, and switch off the title and content parts
  • Add an author element and position it to the right of Date

In comparison, the original layout the structure included:

  • A feature image region
  • Post sata Default { Date, Title, Content }

The new layout structure is as follows:

  • Post data — Title
  • Feature image
  • Post data — Date
  • Author
  • Post data — Content

We have separated the layout into smaller, re-usable parts. There are a few other embellishments that we’ve made, such as re-sizing the author gravatar to 50px, making it a circle and positioning it inline with the author name. Each dynamic element has its own settings, which can be explored like any other element in Upfront. They also come with a template, which is an HTML template you can edit to further customize the look of your site. For example, the author text by default says By Author Name, but in the updated Panino design we have modified the template and removed By. Of course, much like other aspects of Upfront, data elements also allow users to add custom CSS, making them extremely flexible.

Get help and support for ANY WordPress problem for FREE

Want expert help and support for ANY WordPress issue for free?

Sign up for a free trial now and let us help you out!

No obligation and super easy to cancel.

100+ PREMIUM PLUGINS & THEMES FOR FREE?

That's right! A WPMU DEV membership gives you access to 100+ premium plugins & themes, 24/7 WordPress support, a whole bunch of cool services and a private community of awesome WordPress developers.

Try a WPMU DEV membership today, completely for free, no obligation!

No thanks

Awesome! Let’s get you set up with your free month


Example: John Already have a WPMU DEV account? Log In