Logging into the WordPress admin panel

  1. Type in the site url: https://etnortherncalifornia.kaiserpermanente.org/and append the url with /wp-admin
    Example: https://etnortherncalifornia.kaiserpermanente.org//wp-admin
  2. Type in your username and password

Resources

WordPress
KP Brand Photo Library

WPBakery Page Builder – Video Tutorials
WPBakery Page Builder
Gig Press

Adding a new page

  • Page > Add New
  • Name the page
  • Publish the page or save as a draft
  • If you want the page to be child of another page choose the parent page in Site Attributes in the right sidebar
  • Paste your content into the editor and do any necessary formatting such as adding headlines, sub-headlines paragraph breaks links and images.
  • After any other edits click the Update button to save changes
  • To view the page click View Page in the top menu bar. To go back to editing click Edit Page.

Managing Pages
Pages can be edited and deleted under the Pages menu in the Dashboard

Adding Links

  • Select the text you would like to link and click on the link icon in the text editor
  • If the link is going to another website, edit the link (see image) to open in a new window (see image)
  • Links to other websites, pdfs and mp3s should open in a new window

Uploading and inserting images

There are two ways of uploading images and documents to your site.

  1. Add your image to the Media Library: Media > Add New
  2. Within the page edit view
    Upload/Insert > choose file location >choose image > click Use this image

Image sizes

  • Homepage program slider: 1600 x 1200 pixels
  • Mobile homepage program slider: 768 × 510 pixels
  • Homepage program: 600 x 360 pixels
  • Program banner: 1350 x 500 pixels
  • Page banner (not program): 1350 x 390 pixels
  • Video thumbnail: 500 x 281 pixels
  • Cast: 740 × 504 pixels

Naming Conventions

Images

Always adhere to a naming convention. At some point you will have thousands of images in your Media Libary and it can become very difficult to manage

Homepage slider: slider_programabbreviation_description_slidernumber_monthdayyear (when image was taken).jpg (slider_tbm_cast01_01_03.03.18.jpg)
Mobile homepage slider: slider_mobile_programabbreviation_description_slidernumber_ monthdayyear (when image was taken).jpg (slider_mobile_nops_cast2_02_03.03.18.jpg)
Program banner: banner_programabbreviation_description_monthdayyear (when image was taken).jpg (banner_ps_cast_03.03.18.jpg)
Video thumbnail image: vid_tn_programabbreviation_video_name (vid_tn_nops_ask_questions.jpg)

Videos

Video: vid_programabbreviation_video_name (vid_nops_am_ normal _episode 003.mp4) and (vid_tbm_educator_preview.mp4)

Audio

mp3: aud_programabbreviation_audio_name (vid_nops_am-i-normal_episode_002.mp3)

Closed Captioning

Video: vid_programabbreviation_video_name (vid_nops_am-i-normal_episode_002.vtt)

Transcripts

mp3: aud_programabbreviation_audio_name_transcript (aud_nops_am-i-normal_episode_002_transcript.mp3)
podcast: pod_programabbreviation_podcast_name_transcript (vid_nops_am-i-normal_episode_002_transcript.mp3)

Uploading and linking to documents

  1. See instructions above for adding images to the Media Library and adding links
  2. Convert all documents to pdf
  3. Add document to the Media Library
  4. Click on Add Media above the content editor, select document and click the Insert into Page/Post button. Edit the link to change the link text.
  5. Append document links with (pdf). Example: documentlink (pdf)

Naming conventions

Like images, always adhere to a naming convention:
program_doc-name.pdf (TBM_Good Food Lyrics.pdf or KPET_Parking and Directions.pdf)

Page Builder

Pages are built with the WPBakery Page Builder

WPBakery Page Builder – Video Tutorials
WPBakery Page Builder

  • To add or edit content hover over each content box and click the pencil icon in the green contextual menu box (see image)

Menus (Navigation)

The site navigation can be added/edited under Appearance > Menus

  • Select the menu you wish to edit under the top drop down menu
  • You can add pages, move pages, rearrange the page structure or rename pages here.

Widgets (Footer and Sidebar)

The footer and sidebars can be edited under Appearance > Widgets

  • You can add widgets to the widget areas by dragging them into the desired footer or sidebar location
  • You can configure the widget options by clicking on the down arrow in the widget header
  • You can remove a widget by dragging it into the inactive widget area or by clicking delete from within the widget

Video

This site uses YouTube for video hosting and two plugins for displaying the video: Popup Maker for displaying videos in a popup window and YouTube Free for embedding the videos in the Popup window.

  1. Find Popup Maker in the left sidebar, enter the name and click the YouTube button. (see image)
  2. Select Embed a single video and paste the YouTube video URL in the field. Please note that videos must be open for all to view. (see image)
  3. Go back to the Popup maker and get the ID for the popup. (see image)
  4. To add the video popup use the following code: <div class=”popmake-355 video-play-btn”></div>
  5. Covert .srt to .vtt

Video Aspect Ratio

Newer videos: 16:9
For example: 650px wide by 488px tall (650 x. 5625=366)

Older videos 4:3
For example: 650px wide by 488px tall (650 x. 75=488)

HTML5 Video Example Code

<div class=”video-wrapper”><video poster=”/wp-content/uploads/2018/09/Screen-Shot-2018-09-25-at-11.53.29-AM.jpg” controls=”controls” width=”100%” height=”100%”>
<source src=”https://etnortherncalifornia.kaiserpermanente.org//wp-content/uploads/2018/09/vid_nops_educator_preview_.mp4″ />
<track label=”English subtitles” kind=”subtitles” srclang=”en” src=”/wp-content/uploads/2018/09/nops_Educator-Preview.vtt” default=”” />
Your browser does not support the video tag.
</video></div>

Popup Example with HTML5 Video

List Styles

Bulleted List

<ul>

  • Item one
  • Item two
  • Item three

No style

<ul class=”list-no-style”>

  • Item one
  • Item two
  • Item three

No bullet

<ul class=”list-no-bullet”>

  • Item one
  • Item two
  • Item three

Arrow

<ul class=”list-arrow”>

  • Item one
  • Item two
  • Item three

PDF

<ul class=”pdf”>

  • Item one
  • Item two
  • Item three

MP3

<ul class=”mp3″>

  • Item one
  • Item two
  • Item three