WordPress Basics

This page contains directions for basics of WordPress editing and standard WordPress blocks.

Adding a page or post

Adding a page or post can be done in a number of ways. In the dashboard there is a “+ New” button that lets editors add a new page or post. Additionally, each post type in the sidebar has an “Add New” option. Finally, each page or post section in the dashboard has an Add New button at the top. In additions to pages, the country site theme has a number of different custom post types: Stories, News, External Link Messages, Alerts, Testimonials, and Personnel. More information on pages and posts can be found here.

Adding and using blocks

The WordPress editor is a block based system. Some blocks, like regular paragraph text, are standard to WordPress. Others are custom built, and were developed specifically for Merck’s corporate websites. You can find these blocks under the MCC section of the block menu.

Updating pages

Some page updates need to go through legal review before being published. In order to do that, we use the Clone process and make changes in a draft state.

As all content is synced from production to preprod and development every week (Wednesdays at 4 p.m. CST) all content must be developed in a production environment to ensure it is saved. The Duplicate Post plugin lets us do this in a draft state so it is only accessible to logged in users.

Make sure Duplicate Post is installed and enabled on your site in the production environment. You can do this by visiting Pages in the WP dashboard, and hovering over a page name. Clone should be one of the options that appears there.
Clone the page you wish to make changes to. It will appear in the page list as “Copy [Page name]” in a draft state. This clone page will have all the same relationships to parent pages and the same permalink as the original version.
Make changes to the draft version of the page and save draft. Do not publish the draft page. Do not make changes to the published page while the cloned page is in a draft state.
To share the draft page with another user, use the preview function on the draft page. Copy the link from the preview and remove “&preview=true”. The link should now be in the format of “exampledomain.com/?page_id=0000”. This link can be shared with another user with WordPress access. For all other users, share screenshots to validate content.
When the new content is approved, hover over the old page in the WP dashboard and click Trash. Then hover over the new draft page and click Quick Edit.
Remove the “Copy” from the page title, and change the page status from Draft to published, then click Update.
The cloned page should now replace the old version of the page at the same URL. Check the page on the frontend to confirm the permalink is correct. Confirm whether the page needs to be added to any menus in the site header or footer.

For pages using a reusable block, the process is slightly different:

If no changes need to be made to the content in the reusable block, follow the steps laid out above.
If changes do need to be made to the reusable block, visit /wp-admin/edit.php?post_type=wp_block and open the old block, and select “Copy all content.” This is found on the vertical ellipsis menu on the upper right corner of the block editor. Then choose “Add New” Block and paste the content into the editor.
Make any changes necessary to the content.
In the cloned version of the page, add the new reusable block and follow the steps above to get approval.
When it is time to publish content, if the only content changes are within the reusable block, simply follow the steps to copy all content back into the old reusable block and hit Update. This will update on all pages that use the block. Delete the cloned draft page and the new duplicate reusable block.
If other changes need to be made, you will instead need to add the new reusable block to any cloned draft pages that will be updated, following the steps above to clone and replace the old page. Once you have completed all steps to update the cloned pages you may delete the old reusable block if it is no longer in use.

Reusable blocks

Reusable blocks can be used for content that should be exactly the same on multiple pages. Any block can be converted to a reusable block by clicking More Options on a selected block and choosing Convert to Reusable Block.

A reusable block can be added to a page by selecting the Add Block option in the upper right corner of the page editor, then choosing Reusable. At the bottom of the list of the reusable blocks there is an option called Manage Reusable Blocks that allows editors to update the content in the reusable blocks.

Adding images

Any image added to a block should be high quality, with the focal point in the center of the image, and lots of negative space around the focal point. This will make sure the image works in the block on desktop, tablet, and mobile.

If a block has the capability for an image, you will see an “Add Image” button in the block editor. Clicking this will open up the Media Library. From there you can either drag an image in from your desktop, or choose from the images that have already been uploaded.

Adding links

Links can be added through blocks, or to ordinary paragraphs. In a block, you will see a “Select Link” option if there is a CTA. On ordinary text, you can highlight a section of text and choose the Link option. Then you can either search for a page on the site and select from the results, or paste a URL to an external link.

CTAs

The recommended character length for CTAs is 25 characters. Most blocks have an option to add a CTA, either for an internal link to a page on the same site or an external link.

CTAs can also be added to regular paragraph text. To add a CTA, we first add the text of the CTA, and then add a link to it. Then we edit the HTML to add a class to the linked text. We can add either the class “btn” or “btn secondary”

Primary CTA

<a class="btn" href="#">Primary CTA</a>

Secondary CTA

<a class="btn secondary" href="#">Secondary CTA</a>

We can also use a shortcode to add a download icon to a CTA. The shortcode is mco_download_button.

Download

[/mco_download_button url="#" text="Download" secondary="true"]
Note: remove / when adding to page

Menus

Only Administrators can update menus. Menus are edited by hovering over Appearance in the sidebar of the WordPress dashboard and selecting Menus.

Helper classes

These are added in the block settings under Advanced in the right sidebar.

Margins

Sometimes the built in spacing can be too much or too little between blocks. There are some helper classes that allow u to adjust the spacing between blocks. These classes change the margin of a block. The largest margin of two adjacent blocks is the one that is displayed. For example, if a block has a bottom margin of 96px, and the block below it has a top margin of 24px, the space between these blocks will be 96px. So it might sometimes be necessary to add a helper class to both adjacent blocks to appropriately adjust their spacing.

The classes are:

Bottom Margin:
mb-2
mb-1
Top Margin:
mt-2
mt-1
Left Margin:
ml-2
ml-1
Right Margin:
mr-2
mr-1

Device Specific Bottom Margin:
mb-2-desktop
mb-2-tablet
mb-2-mobile
mb-1-desktop
mb-1-tablet
mb-1-mobile

Device Specific Top Margin:
mt-2-desktop
mt-2-tablet
mt-2-mobile
mt-1-desktop
mt-1-tablet
mt-1-mobile

The higher the number of the helper class, the greater the space between blocks.

Borders

You can also use a helper class to add a border above or below a block. This is most commonly used in the B15 block. Those classes are:

border-top-1
border-top-2