# How-To Guides

Instructions on how to accomplish various tasks in WordPress.

# Content Guidelines for Posts on MLML Website

**Goal**<span style="font-weight: 400;">**:** To outline desired content and format of different types of posts  
</span>**Target Audience**<span style="font-weight: 400;">**:** Front Desk, Social Media, IT, WAG  
**Review:** No formal review of posts → please proofread carefully  
</span>

##### <span style="text-decoration: underline;">Types of posts covered:</span>

- **Press coverage** 
    - <span style="font-weight: 400;">Posted by Front Desk or Social Media</span>
- **Events**
    - <span style="font-weight: 400;">Posted by Front Desk</span>
- **Public seminars**
    - <span style="font-weight: 400;">Posted by Front Desk or HelpDesk</span>
- **Defense seminars**
    - <span style="font-weight: 400;">Posted by Front Desk</span>

---

### Content Guidelines

- <span style="font-weight: 400;">Use an existing post or a post template from the [WordPress Resources webpage](https://mlml.sjsu.edu/wordpress-resources/)</span>
    - <span style="font-weight: 400;">To learn how to use an existing post or template follow these [instructions](https://mlml.sjsu.edu/wordpress-resources/how-to-use-page-templates/)</span>
- <span style="font-weight: 400;">Writing for the general public, not MLML community</span>
- [<span style="font-weight: 400;">5 Tips for Creating Posts</span>](https://kb.mlml.sjsu.edu/books/wordpress/page/5-tips-for-creating-posts)

##### **All posts must follow these guidelines:**

- Have a **minimum of one photo** (make sure you have permission)  
    
    - <span style="font-weight: 400;">If a photo is not provided use:</span>
        - <span style="font-weight: 400;">A photo of the speaker or MLML personnel involved</span>
        - <span style="font-weight: 400;">A picture of the journal the article is published in</span>
    - <span style="font-weight: 400;">Relevant embedded video is encouraged</span>
- **Set a "featured image"**
- **Add links** where possible 
    - <span style="font-weight: 400;">Hyperlink all MLML personnel to their pages on the website </span>
    - <span style="font-weight: 400;">If you mention a lab, hyperlink to that lab</span>
    - <span style="font-weight: 400;">Hyperlink to original article if appropriate</span>
- **Add tags**: faculty names, subject matter, MLML lab, etc.
- **Change the url ending** (default is title of post with dashes) 
    - E.g. for a seminar speaker, you can change the url to be firstname-lastname-seminar

#####  

##### **Additional guidelines based off type of Post:**

##### Press/Achievement posts:

- - <span style="font-weight: 400;">**Catchy title** relevant to article or achievement</span>
        - <span style="font-weight: 400;">Good → MLML professor creates only land based seaweed business in the USA </span>
        - <span style="font-weight: 400;">Bad → MLML’s new aquaculture facility in The Californian</span>
    - <span style="font-weight: 400;">**Catchy one-line description** that can be on front page with links to key player and/or article</span>
    - <span style="font-weight: 400;">**Summary of article** (150-250 words)</span>
        - <span style="font-weight: 400;">Provide some details about the article or achievement</span>
        - <span style="font-weight: 400;">Provide information so the general public can understand even if they do not click on the article link</span>
        - <span style="font-weight: 400;">Include links to labs and faculty involved</span>
        - <span style="font-weight: 400;">Properly cite source material</span>

**Example:**

[![Screen-Shot-2019-04-05-at-9.50.38-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/scaled-840-0/Screen-Shot-2019-04-05-at-9.50.38-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/Screen-Shot-2019-04-05-at-9.50.38-AM.png)

##### Event Posts:

- - Title should be in the following format: 
        - **"Title of Talk/Event - Month DD, YYYY"**
    - Add post to **"Upcoming Events" category**
        - After the event, change the category to **"Events"**

**Example:**

[![Screen-Shot-2019-07-02-at-9.26.50-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-07-Jul/scaled-840-0/Screen-Shot-2019-07-02-at-9.26.50-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-07-Jul/Screen-Shot-2019-07-02-at-9.26.50-AM.png)

##### Seminar Posts:

- - The Visiting Scientist collects information about the speakers and adds them to a[ google sheet schedule](https://docs.google.com/spreadsheets/d/1HwMlhqYhIUlaQ2SB1xtFVF6qbUrr1xKKJaaFmtRInDc/edit?usp=sharing) and a[ google drive folder](https://drive.google.com/drive/folders/0B6TtNqjDg-8LdjlneGMycGZzYzA?usp=sharing)
    - Use previous Seminar posts as a template
    - <span style="font-weight: 400;">Content to include</span>
        - **Talk title** is title of post: "Title of Talk - Month DD"
        - **At the top of each page include:**
            - <span style="font-weight: 400;">Presenter name, position title, university or institution affiliation</span>
            - <span style="font-weight: 400;">Moss Landing Marine Labs Seminar Series - Month DD, YYYY</span>
            - <span style="font-weight: 400;">Hosted by the xxx Lab (link this to the lab's webpage)</span>
            - <span style="font-weight: 400;">MLML Seminar Room, 4pm</span>
            - (or Watch it Live [here](https://mlml.sjsu.edu/mlml-live-stream/)!) &lt;- only if they agree to be publicly streamed
            - <span style="font-weight: 400;">Open to the public</span>
            - <span style="font-weight: 400;">~*More info coming soon!~* (until you receive the abstract and more info)</span>
        - <span style="font-weight: 400;">**Brief talk abstract** (~100-200 words)</span>
        - **Link to speakers website**
        - <span style="font-weight: 400;">**DO NOT include post date** (confusing with two dates)</span>
    - <span style="font-weight: 400;">Put post in **"Upcoming Seminars" category**</span>
        - <span style="font-weight: 400;">After seminar, change the category to **"Seminars"**</span>
        - <span style="font-weight: 400;">Create the last seminar's post first - this way they display in chronological order</span>

**Example:**

<span style="font-weight: 400;">[![Screen-Shot-2019-04-05-at-9.54.58-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/scaled-840-0/Screen-Shot-2019-04-05-at-9.54.58-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/Screen-Shot-2019-04-05-at-9.54.58-AM.png)</span>

##### Thesis Defense posts:

- - <span style="font-weight: 400;">Front desk will request talk title, abstract, and photos 2-3 weeks before a thesis defense</span>
    - <span style="font-weight: 400;">Content to include:</span>
        - **Post title**: "Thesis Defense by \[NAME\] - Month DD"
        - **At the top of each page include:**
            - Talk title
            - <span style="font-weight: 400;">Presenter name</span>
            - <span style="font-weight: 400;">Lab affiliation (link to lab's webpage)</span>
            - <span style="font-weight: 400;">Date and Time</span>
            - <span style="font-weight: 400;">MLML Seminar Room</span>
            - (or Watch it Live [here](https://mlml.sjsu.edu/mlml-live-stream/)!) &lt;- only if they agree to be publicly streamed
            - <span style="font-weight: 400;">~*More info coming soon!~* (until you receive the abstract and more info)</span>
        - <span style="font-weight: 400;">**Brief talk abstract** (~100-200 words)</span>
        - <span style="font-weight: 400;">**DO NOT include post date** (confusing with 2 dates)</span>
    - <span style="font-weight: 400;">Put post in **"Upcoming Thesis Defenses" category**</span>
        - <span style="font-weight: 400;">After defense, add to **"Thesis Defenses" category**</span>
    - <span style="font-weight: 400;">Note: having a website post is not a requirement; the students are busy and likely stressed about the talk, so don’t bombard them with emails to send info.</span>


**Example:**

<span style="font-weight: 400;">[![Screen-Shot-2019-04-05-at-9.58.07-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/scaled-840-0/Screen-Shot-2019-04-05-at-9.58.07-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/Screen-Shot-2019-04-05-at-9.58.07-AM.png)</span>

# How to Become a WordPress Admin

### Submit an IT Helpdesk Ticket

- First you must [submit an IT Helpdesk Ticket](https://helpdesk.mlml.calstate.edu/) with IT and give them the following information:
    
    
    - What website you want to become a WordPress Admin for
    - What your goal or plan is for the website
    - Your availability for a WordPress Training Session

### Attend a WordPress Training Session

- IT will be holding WordPress training sessions that go into detail how to use WordPress effectively and responsibly
- **All who would like to become a WordPress admin must attend a training session**

### How to Login

- To login to your website use the following URL - input your website's name where it says "yoursite":
    
    
    - mlml.sjsu.edu/yoursite/admin
    - Use your MLML username and password when the login pop-ups
- You may also login using[ intranet](https://mlml.sjsu.edu/intranet/)
    
    
    - Navigate to[ intranet](https://mlml.sjsu.edu/intranet/) &gt; login with your MLML username and password
    - Now navigate to your site using your site's URL
        
        
        - e.g., [https://mlml.sjsu.edu/yoursite/](https://mlml.sjsu.edu/yoursite/)

Now visit our [Getting Started with WordPress](https://mlml.sjsu.edu/wordpress-resources/getting-started-with-wordpress/) page for information on how to start creating an awesome website!

# Wordpress Posts and Pages Best Practices and Policies

### <span style="font-weight: 400;">Summary</span>

- <span style="font-weight: 400;">Posts are to capture a point in time (such as an event).</span>
- <span style="font-weight: 400;">Pages are for regular website content</span>
- <span style="font-weight: 400;">Always use Page Builder to create all types of content--makes it easier!</span>

---

### <span style="font-weight: 400;">Posts</span>

##### <span style="font-weight: 400;">C</span><span style="font-weight: 400;">apturing a point in time - content will not be updated over time</span>

- **Content Type:**
    - <span style="font-weight: 400;">News</span>
    - <span style="font-weight: 400;">Blogs</span>
    - <span style="font-weight: 400;">Events</span>
- **Editor/Admin Roles:**
    - <span style="font-weight: 400;">Contributors - Can create posts which will then be moderated</span>
    - <span style="font-weight: 400;">Authors - Can create, edit, and publish their own posts only</span>
    - <span style="font-weight: 400;">Editors and Admins - Can create, edit, and publish any posts</span>
- <span style="font-weight: 400;">**Authorization** for certain webpages should be obtained by the corresponding admins:</span>
    - <span style="font-weight: 400;">Main MLML website - Approved by Ivano or Jim</span>
    - <span style="font-weight: 400;">Tier 1 sites - Approved by website owners</span>
    - <span style="font-weight: 400;">Tier 2 &amp; 3 sites - Approved by website owners or web admins (as website owner decides)</span>
- **General** **Info:**
    - <span style="font-weight: 400;">Posts are displayed by the order of when they were created. </span>
        - *<span style="font-weight: 400;">You can change the post date to make sure that events stay in order--**please do this!**</span>*
    - [<span style="font-weight: 400;">Content Guidelines for Posts (Press Highlights and Events)</span>](https://kb.mlml.sjsu.edu/books/wordpress/page/content-guidelines-for-press-and-event-posts)

- 

### Pages

##### <span style="font-weight: 400;">Content not tied to a specific date - may be updated over time</span>

- **Content Type:**
    - <span style="font-weight: 400;">About page</span>
    - <span style="font-weight: 400;">Project pages</span>
    - <span style="font-weight: 400;">Bio pages</span>
- **Editor/Admin Roles:**
    - <span style="font-weight: 400;">Editors and Admins - Can create, edit, and publish</span>
- <span style="font-weight: 400;">**Authorization** for certain webpages should be obtained by the corresponding admins:</span>
    - <span style="font-weight: 400;">Main website - IT Helpdesk Ticket</span>
    - <span style="font-weight: 400;">Tier 1 sites - IT Helpdesk Ticket</span>
    - <span style="font-weight: 400;">Tier 2 &amp; 3 sites - Website owners and web admins</span>
- **Reviewing Process:**
    - <span style="font-weight: 400;">Main website - IT Helpdesk Ticket &gt; WAG review &gt; approval &gt; page updated</span>
    - <span style="font-weight: 400;">Tier 1 sites - IT Helpdesk Ticket &gt; WAG review &gt; approval &gt; page updated</span>
    - <span style="font-weight: 400;">Tier 2 &amp; 3 sites - Approved by website owners and web admins </span>
- **Getting Started:**
    - <span style="font-weight: 400;">[Page Templates](https://mlml.sjsu.edu/wordpress-resources/page-template-directory/) - Use these pre-made templates to outline the layout of your page</span>
        - <span style="font-weight: 400;">Need help using them? Go to [How to use Page Templates](https://mlml.sjsu.edu/wordpress-resources/how-to-use-page-templates/) </span>


<span style="color: #555555; font-size: 2.333em; font-weight: 400;">Widget Recommendations:</span>

**For more information on the different widgets available: [Third-Party Plugins](https://mlml.sjsu.edu/wordpress-resources/third-party-plugins/)**

##### **Page layout:**

- <span style="font-weight: 400;">Use **Page Builder** for every Page and Post created, even the simplest posts and pages</span>
    - - <span style="font-weight: 400;">Organize with rows and columns</span>
        - <span style="font-weight: 400;">Copy and paste rows and widgets</span>

##### **Text:**

- <span style="font-weight: 400;">SiteOrigin Editor widget</span>
- <span style="font-weight: 400;">Headline Widget</span>

##### <span style="font-weight: 400;">**Images:** (</span>[<span style="font-weight: 400;">Image Use Guidelines</span>](https://kb.mlml.sjsu.edu/books/wordpress/page/image-use-guidelines)<span style="font-weight: 400;">)</span>

- <span style="font-weight: 400;">SiteOrigin Editor widget</span>
- <span style="font-weight: 400;">FooGallery - use shortcode in Custom HTML widget</span>
    - <span style="font-weight: 400;">SiteOrigin Image widget</span>
    - <span style="font-weight: 400;">Inline with text wrap around</span>
    - <span style="font-weight: 400;">Photo gallery/slideshow</span>
    - <span style="font-weight: 400;">Single image</span>

- -

- -

# WordPress Menu Best Practices and Policies

### <span style="font-weight: 400;">Summary</span>

- **Use Mega Menu (under Appearance)**
- Keep menu item names concise
- Keep formatting consistent
- WordPress Support: [Custom Menus](https://en.support.wordpress.com/menus/#add-menu-items)
- For more in-depth reading, visit our [Third Party Plugin Documentation](https://mlml.sjsu.edu/wordpress-resources/third-party-plugins/) page and click on Max Mega Menu.

### <span style="font-weight: 400;">Instructions</span>

- <span style="font-weight: 400;">Navigate to your menu: **Dashboard &gt; Appearance &gt; Menus**</span>
- <span style="font-weight: 400;">Create a new Menu</span>
- <span style="font-weight: 400;">Select a menu to edit: **Mega Menu (Primary Menu)**</span>
- <span style="font-weight: 400;">To add categories use the Pages, Posts, Custom Links, and Categories tabs listed on the left side of screen</span>
    - <span style="font-weight: 400;">If you'd like to directly link to one of the above that you've already created (i.e., a post or page) you can do so using those tabs</span>
    - <span style="font-weight: 400;">If you'd like to **create a drop down category use the Custom Links** option</span>
        - <span style="font-weight: 400;">For URL insert mlml.sjsu.edu - you can **delete the URL link once it's added to the menu**</span>
        - <span style="font-weight: 400;">Insert desired title of category in **Link Text**</span>
        - <span style="font-weight: 400;">Add to Menu</span>
        - <span style="font-weight: 400;">Click drop down arrow on newly created category and delete the URL linked</span>
- <span style="font-weight: 400;">For **Drop Down Menus where you'd like to add subcategories** with links or links to other pages:</span>
    - <span style="font-weight: 400;">Hover over the main menu category you'd like to create a drop down for </span>
    - <span style="font-weight: 400;">Select **Mega Menu button** that appears in blue</span>
    - <span style="font-weight: 400;">For "Sub menu display mode" choose "**Mega Menu - Standard Layout**"</span>
    - <span style="font-weight: 400;">Select a Widget to add to the panel: "**Layout Builder**"</span>
    - <span style="font-weight: 400;">2 columns</span>
- <span style="font-weight: 400;">To edit the Layout Builder in drop down menu:</span>
    - <span style="font-weight: 400;">Select the **wrench** on the right hand side of Layout Builder widget</span>
    - <span style="font-weight: 400;">Select **Open Builder**</span>
    - <span style="font-weight: 400;">Add desired number of rows with desired number of columns</span>
        - <span style="font-weight: 400;">The number of columns can be useful to place subcategories directly under the portion of the drop down menu that you want (i.e., more towards the right side of the menu, left side or middle)</span>
    - <span style="font-weight: 400;">Add a **SiteOrigin Editor** widget to make a list of Pages that you'd like to link to</span>

### <span style="font-weight: 400;">Visual Instructions</span>

<span style="font-weight: 400;">Appearance &gt; Menus &gt; Mega Menu (Primary Menu)</span>

### <span style="font-weight: 400;">[![Screen-Shot-2019-04-05-at-10.17.34-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/scaled-840-0/Screen-Shot-2019-04-05-at-10.17.34-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/Screen-Shot-2019-04-05-at-10.17.34-AM.png)</span>

<span style="font-weight: 400;">Hover over the menu you want to modify and click the blue Mega Menu icon:</span>

<span style="font-weight: 400;">[![Screen-Shot-2019-04-05-at-10.18.28-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/scaled-840-0/Screen-Shot-2019-04-05-at-10.18.28-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/Screen-Shot-2019-04-05-at-10.18.28-AM.png)</span>

<span style="font-weight: 400;">Use Layout Builder. Click the Wrench icon on the right to edit</span>

[![Screen-Shot-2019-04-05-at-10.19.02-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/scaled-840-0/Screen-Shot-2019-04-05-at-10.19.02-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/Screen-Shot-2019-04-05-at-10.19.02-AM.png)

<span style="font-weight: 400;">Open Builder:</span>

[![Screen-Shot-2019-04-05-at-10.19.25-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/scaled-840-0/Screen-Shot-2019-04-05-at-10.19.25-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/Screen-Shot-2019-04-05-at-10.19.25-AM.png)

<span style="font-weight: 400;">Here you have the standard Page Builder interface where you can add rows, columns, and widgets to create menu items.</span>

<span style="font-weight: 400;">[![Screen-Shot-2019-04-05-at-10.19.44-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/scaled-840-0/Screen-Shot-2019-04-05-at-10.19.44-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-04-Apr/Screen-Shot-2019-04-05-at-10.19.44-AM.png)</span>

# 5 Tips for Creating WordPress Posts

Posts on the MLML website are meant to be a brief, but intriguing introduction to an event or article affiliated with the labs. It is important that they look nice and give enough information that someone reading can understand the article or event without clicking on further links.

---

#### **1. Include Pictures and Make Them Interactive**

**Always** include at least one picture when creating a post (the more the better). Make your photos interactive when possible. At the very least, enable [Lightbox](https://mlml.sjsu.edu/wordpress-resources/what-is-lightbox/) for the photos you include in your post. Give photos descriptive captions. Templates on different ways to display captions are available under the Media Information section of the [WordPress Resources](https://mlml.sjsu.edu/wordpress-resources/image-captions/) website. You can also have your photo link to another website by assigning it a **Destination URL**.

When posting a photo always ensure you have permission to use the photo and give credit as best you can. Click [here](https://kb.mlml.sjsu.edu/books/wordpress/page/image-use-guidelines) to learn more about MLML's image use guidelines.

#### **2. Format Text for a Clean Appearance**

Something as simple as setting a paragraph of text to align center (ctrl+alt+c) or justify (ctrl+alt+j) can greatly improve the aesthetics of your post.

**Example:**

Default alignment (align left):

[![Screen-Shot-2019-08-06-at-10.32.16-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/scaled-840-0/Screen-Shot-2019-08-06-at-10.32.16-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/Screen-Shot-2019-08-06-at-10.32.16-AM.png)

Text Justified:

[![Screen-Shot-2019-08-06-at-10.35.17-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/scaled-840-0/Screen-Shot-2019-08-06-at-10.35.17-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/Screen-Shot-2019-08-06-at-10.35.17-AM.png)

#### **3. Incorporate Quotes**

When creating a post about an article, include relevant quotes directly from the article using blockquote in WordPress.

Blockquote is dictated by an open quotation mark in the WordPress Toolbar.

[![Screen-Shot-2019-08-06-at-10.38.25-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/scaled-840-0/Screen-Shot-2019-08-06-at-10.38.25-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/Screen-Shot-2019-08-06-at-10.38.25-AM.png)

Blockquote makes quotes stand out from the body of the text. For example:

[![Screen-Shot-2019-08-06-at-10.38.58-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/scaled-840-0/Screen-Shot-2019-08-06-at-10.38.58-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/Screen-Shot-2019-08-06-at-10.38.58-AM.png)

#### **4. Set Hyperlinks to Open in a New Tab**

This is especially important if a link directs you to an outside website. It allows the viewer to easily navigate back to MLML's website.

To set a hyperlink to open in a new tab:

1\. Click **Link Options**

**[![Screen-Shot-2019-08-06-at-10.45.59-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/scaled-840-0/Screen-Shot-2019-08-06-at-10.45.59-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/Screen-Shot-2019-08-06-at-10.45.59-AM.png)**

2\. Check **Open Link in a New Tab**

**[![Screen-Shot-2019-08-06-at-10.46.11-AM.png](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/scaled-840-0/Screen-Shot-2019-08-06-at-10.46.11-AM.png)](https://kb.mlml.sjsu.edu/uploads/images/gallery/2019-08-Aug/Screen-Shot-2019-08-06-at-10.46.11-AM.png)**

#### **5. Use a Previous Post as a Template**

When in doubt, finding a post that you think looks nice and copying it as a template is a simple way to create a great post. There are also a host of templates on the [WordPress Website](https://mlml.sjsu.edu/wordpress-resources/).

---

If you want further help creating a post, feel free to drop by the **IT Help Desk** in the main office or submit an [IT Helpdesk Ticket](https://helpdesk.mlml.calstate.edu/helpdesk/WebObjects/Helpdesk.woa).