Create a Blog or News Post in WordPress

Introduction

JSOM Perspectives and Inside Jindal used to be published through custom applications developed by JSOM Web Services. For simplicity, we’ll refer to these as Blog and News posts. As of early 2022 these publications have moved within the Jindal School website, which is built in WordPress.

Below is a guide on how to create these posts. We will refer to the JSOM Perspectives blog post “My Journey From Boots to Business” throughout this article.

Log in to WordPress and Create New Post

Log in

You will need to log in to WordPress by going to https://sites.utdallas.edu/jindal/wp-admin/ and using your NetID and NetID Password to sign in. If you don’t have access, contact jsomweb@utdallas.edu for assistance.

Upon successfully logging in, you will see the WordPress Dashboard. Your user level is “Editor,” which gives you access to a lot of features that you should not touch, as this is the admin area of the main Jindal Website. The two areas that you will work in are Posts and Media.

Create Post

There are so many ways to create a new post!

In the upper left corner of the Posts admin area, you can click the “Add New” text in the left column, the “Add New” button to the right of the “Posts” heading, or you can hover on “+ New” in the top admin bar and click “Post.” All of these methods open a clean, new post.

Add Title

Add the title of your post in the Title field at the top of the new post.

Add Content

The large white rectangle below the title is the Content field. This is where the blog or news article content goes. This section uses HTML, so it is good if you have some basic familiarity with HTML markup. The good news is that posts in the JSOM Perspectives and Inside Jindal categories have a standardized format, so you can go to a recent post, copy everything from the content field and paste the HTML into the Content field of your new post.

Below are the three major components of a Blog or News post.

1. The Figure Element

The first element will usually be an image, something lively, engaging and appropriate to the topic.

The basic template for including an image on a post follows. The HTML comprises a figure element with an img element (and sometimes a figcaption element) inside. Figcaptions are not always needed, but they are often used to identify people in a photo.

<figure class="fullwidth"> <img src="/jindal/files/YYYY/MM/[filename]" alt="[descriptive alternative text]"> <figcaption> [descriptive caption, not identical to the alternative text] </figcaption> </figure>

fullwidth images in a post should be 630px wide by 420px tall. The width is required but the height is optional, so the image can be taller or shorter than 420px. JPG format is preferred for photographs, and sometimes PNG is appropriate for graphic images.

Use Adobe Photoshop to size images. When you export the image for web, JPG images need to be set to Quality: High, which is also 60/100 on the quality slider. This quality setting is a good balance of image quality and efficient file size. (PNG files do not have a quality option.)

By default the figure has a class called fullwidth, which makes sure that the image takes up the full width of the article column without spilling outside of it. There are other classes you can use if you want to make the image smaller and align to the left or right of the column. left50 and right50 will be the most likely classes you would use besides fullwidth. See all available classes for sizing and placing an image on Structure a Page in the Jindal site.

The img element needs two attributes, src and alt. You get the src value when you upload an image to the Media Library. Click “Add New” and either drag the image from your local computer into the Media Library window or navigate to the file by clicking “Select Files.

After you add the image to the Media Library, click the thumbnail of the image to open its details. In the attachment details, the “File URL” is at the bottom right. Copy the text from “/jindal…” onward. This gives you the relative path for the src. (The full “File URL” is not necessary because the post and the image are in the same website.)

Every img needs a brief, descriptive alt value.

The alt value should describe the photo for someone who can’t see it.
If a photo is captioned with the figcaption, still add a alt value to ensure web accessibility.

FYI: for an img element in the Content field of your post, you do not need to put the alt value in the Alternative Text field of the attachment details because you are already adding the alt value manually in HTML.

You may want to add more images to a post. Just add the image to the Media Library and copy this first figure element and paste the HTML where you want another image to appear. Update the src and alt (and figcaption and figure class, if needed) and you’re set!

2. The Table of Contents

When writing for the web, including headings in a story helps the user by making the article more scannable and visually organized. Headings can also benefit an article’s SEO value by including important keywords that support the major ideas that should be present in the article’s title.

Not all Blog or News posts will have headings, but if they do, you should include a table of contents.

The available HTML elements for headings are h1, h2, h3, h4, h5, h6. h1 is the title of the post; there is only one h1 per page. h2 is a major subtopic of h1. These are great for organizing your content! Every h2 in your post will be one of your table of content items. Below is how you link from the table of contents to the matching h2 element.

Note that you assign the h2 element an id then use that id with “#” in front of it for the href value in the corresponding a element in the table of contents.

<div class="smallblock toc warm-gray-0"> <p class="sub-heading">Contents</p> <ul> <li><a href="#content1">Heading Text 1</a> </li> </ul> </div>

h2 element with id

<h2 id="content1">Heading Text 1</h2>

3. The Content

After the image and table of contents, the rest of your post is HTML. The HTML elements you will be using most often are:

p – the paragraph element, wrapped around every paragraph;
h2 – the subtopic heading of your posts major topic;
a – the anchor element, which creates links, both internal (linking to another part of the current post) and external (linking to pages or documents outside of the current post);
strong – the strong element, which makes text bold;
em – the emphasis element, which makes text italicized;
cite – the cite element, used for titles. cite looks just like em, but they have different semantic meanings for web browsers and assistive technology;

Author

If you are the author of the post, you will automatically be assigned authorship by WordPress, because you are creating the post. If the author is someone else, you need to manually assign authorship and remove yourself.

Under Authors, go to the “Search for an author” field start typing their first or last name. If they are in the system already, they will appear as an option and you simply click on them.
If the Author is not available, make a SOMWEB Atlas ticket and including the following:
1. Name, first and last
2. Photo, high resolution
3. Brief bio (including title, if appropriate)
If you are not the Author, remove yourself after you have added the correct author.

Excerpt

Go to the Excerpt field and enter 1-2 sentences, wrapped in the p element. These sentences are displayed, along with the Featured Image, when the post is used across the website.

The Excerpt should make the reader want to click on the post and read the whole thing in one breathless sitting.

Featured Image

The featured image is used when we display the post across the website and also when someone shares the post on social media or elsewhere on the web. Featured images have the following requirements.

Image saved for web in Photoshop at 630px x 630px, quality High (60/100)
Alternative text added to the media details; remember that alternative text briefly describes the image for someone who can’t see it
- In the WordPress Media Library, when adding the featured image, type the text into the Alt Text field and press “tab” to commit the text to the field. You will see “Saved.” appear above the Attachment Details, which means the text has been saved.
Image filename should be “simple-descriptive-lowercase-separated-by-hyphens-and-end-with-featured-630-630.jpg”

Save Draft or Publish

As you work, WordPress will automatically save your work, but it is a good idea to click “Save Draft” as you go.

Any time you want to see how your post is looking, click the “Preview” button, which opens a new tab and shows you (and only you) how your post currently appears.

You can start a new post, work on it, save the draft and return to it later. No need to start and publish in the same sitting. You can even have several drafts going, save them, and then publish them when it’s time. Just go to the Post Drafts section of the website to find a draft.

The “Publish” button does what it says. If you publish a post by mistake, you can change it’s status back to “Draft” and click “Update.”

Ask the Owl