These best practices are subject to change to meet new trends and the evolving needs of the Krieger School of Arts and Sciences.
Blocks and the Block Editor
All pages and posts on your website are made of blocks of content. General users can add a Paragraph, Heading, Lists (bulleted or numbered), Quotes, Table, Image, Gallery, File, Media and Text, or a Separator. They can also embed content from other platforms, such as Twitter, Youtube, Soundcloud, Flickr, Vimeo, or Issuu. The Office of Marketing and Communications has access to additional blocks.
| WordPress block | Description |
|---|---|
| Paragraph | The most-used block for the majority of your text. |
| Heading | Divides each section of your page and helps readers understand the structure of your content. Also helps make your page more accessible. |
| List | Creates a bulleted or numbered list. |
| Quote | Creates a stylized quote with attribution. Sometimes used for testimonials. |
| Table | Copy and paste a table, or choose this block to create one from scratch. |
| KSAS Callout | A stylized box with background and bold text that should only be used for highlighting key information once per page (and only several times across a site). |
| Code | Display custom html code. Not usually used by users, but is an option. |
| Image | Adds a single image which can be aligned alongside text. |
| Media and Text | A pre-built two-column setup with an image in the left column and text in the right. |
| Gallery | Creates an image gallery whenever you need to post two or more images. |
| Columns | Displays content in multiple columns, and can include all types of content blocks. |
| Embed | Embed videos, images, tweets, audio, and other content that is hosted elsewhere. |
| Group | Not a block type, but hold shift while selecting blocks and you can group them together. |
| Separator | Create a break between ideas or sections with a horizontal separator. |
| Buttons | Adds a designed button with a colored background. |
| Shortcode | Insert additional custom elements with WordPress shortcodes. |
| Accordion | Insert accordions that close and open to show text. |
Block Patterns
Use block patterns to create more complex content arrangements. A block pattern is a group of blocks that have been combined to create a specific layout, that users can replicate across sites. They are particularly useful on sites.krieger.jhu.edu websites, which have fewer page templates and are intended to be built using patterns.
Find these patterns when you create a block, by selecting “patterns” and looking through “KSAS blocks,” which include a vertical staff listing, horizontal staff listing, featured content, call to action, double call to action, three column feature, and four column features. The blocks include styling, buttons, images and more. See the Blocks Pattern tutorial for more.
Bulletins
A bulletin is a WordPress plugin that allows web editors to post temporary, often time-sensitive information, such as funding opportunities, jobs, and internships.
Bulletins can be easily added or removed. However, they can quickly become out of date, though they will automatically expire after a year. Inaccurate content and information that is out of date frustrates users, makes your website seem less credible. To avoid these problems, link directly to the original source whenever possible. Also, set up an internal workflow to check deadlines, removing and reposting opportunities as necessary.
Courses
Course listings are often one of the most popular pages on the website. To keep a consistent user experience in line with the varying needs of our departments, programs, and centers, we support the following methods of presenting courses:
- SIS Listings: This WordPress plugin accesses SIS’ API. It only displays courses that are specifically listed in your department. Course information provided includes: course number, course name, description, credits, instructor(s), term, meetings, and status. Courses are searchable and filterable by term. Sites should not list more than three semesters of courses from SIS.
- Table: This method lists courses provided by the department via a csv file, and created as a Tablepress table. At a minimum we require course number, course name, instructor, and meeting times. This is used by programs who have complex, cross-department requirements or courses which can’t easily be pulled from SIS.
- HTML: This method is for mostly interdisciplinary and smaller major/minor offerings, and in tandem with a SIS course listing. The content can be displayed in a flat list or within accordions. At a minimum we require course number, course name, instructor, and meeting times.
Events
Events can be uploaded manually, one at a time, or imported en masse.
- All events should include a descriptive name (including the name of the talk or the speaker), not just a generic seminar name
- All events should include an exact date and time
- Use our events block editor tutorial to see how to upload events one at a time.
- Use the event aggregator to import or schedule regular imports of events.
Faculty Books
You can add new faculty books from the faculty books section by creating a new post. This will allow the book to display both on the faculty books feed, and on the affiliated faculty member’s bio page. Each faculty book entry should include:
- Book title
- Book description from Amazon or the publisher’s website
- Photo of the book cover from the Amazon or publisher site. Make sure it’s web-optimized (a jpg under 500kb). This should be added under featured image.
- Under faculty books details, in the lower section of the page, add the publisher, year of publication, and Amazon link. Make sure to delete http:// from the link, and select a faculty member from the dropdown. Any faculty member not currently on your site cannot be selected.
Edit the post publication date from “publish immediately” to the date the book was published to make sure it is published in the correct order. If you don’t see the book on the faculty member’s profile, make sure they have the box “display books” checked in their profile.
People Directory and Profile Pages
If you update an individual’s bio page and the changes do not appear on the site, you should update the People page. Go to the Pages section of the dashboard, open the People page and hit the update button. The page itself is blank, but updating it will clear the cache and refresh the information.
You can create profiles for faculty, staff, graduate students, and job market candidates using pre-created templates. Faculty and staff profile pages can list the following, with the required fields in bold:
- Name
- Pronouns
- Position/title within the Krieger School
- Email address
- Research interests (preferred)
- Degree (preferred)
- Phone number
- office location
- Office hours
- On leave dates
- Personal and/or lab website
- Google Scholar ID
- Twitter handle
- Image (preferred)
- Option to select area of expertise as a filter is available on some sites
Faculty maintain only one profile page, in their main department, though they can be listed on other sites in the directory. Faculty members can have their own website, hosted by themselves, JHU IT, or our office, either in addition to or in lieu of a faculty bio page. We provide tabs that highlight a faculty member’s biography, research, teaching, publications, and published books; along with two custom tabs. Due to the shared theme environment, the order of the tabs cannot be modified.
Graduate Students and Job Market Candidates
These two profile types can also be included in the People directory, but on their own separate page. If you don’t see it as an option, please submit a web request to have the plugin activated. Graduate student profiles can include a name, pronouns, email, thesis title, field of study, research interests, main adviser, and photo.
Job market candidates (students who are graduating soon and looking for positions) can include their name, pronouns, title, contact information, personal website, thesis title and abstract, main adviser, field of study, and image.
Forms
To add a form to your website, submit a service request to have Gravity Forms, a WordPress plugin, installed. This will allow you to create, edit, and manage forms directly in WordPress. Please see additional advice on what type of forms you should create with Gravity on the plugins page.
Images
See best practices for images.
Inline Styles
Please do not use inline styles in your html (e.g., <h1 style=”font-size:30px;”>) to create different colors or sizing. These styles will be stripped when you publish the page. Inline styles violate our theme’s style guide, are harmful for web accessibility, and do not follow best practices. Non-header text should be bolded only in rare circumstances. Underlines or all capital letters should not be used for emphasis. Please consult the style guide for appropriate content guidelines.
Link Farms
Once a way to boost SEO, a link farm is essentially a web page containing a list of links to external websites.
External links aren’t inherently bad, they can be useful! But when providing external links, pick the 2-3 most relevant and unique links, rather than 10-20 links. Fewer links are actually more beneficial to the user and easier for you to maintain. Links should always be limited and closely related to the purpose of the site. The key is to concentrate on producing relevant original content. Links become broken, irrelevant, or superfluous easily. Check for and fix any broken links, and remove links with low traffic.
PDFs
We discourage uploading PDFs unless they provide an index of information (e.g., student handbook, departmental newsletter, essay, etc.) due to potential accessibility and quality assurance issues. Please use HTML text instead of PDFs whenever possible.
Plugins and Tools
Learn about the different plugins available, including the people directory, bulletin board, faculty books, forms, profiles, tables, and testimonials.
Sidebars and Widgets
Sidebars can be added to a series of pages by being added to a widget, or to a single page by adding content to the Sidebar at the bottom of the page. To edit your sidebars, go to Appearance–>Widgets. Simply drag and drop the desired widgets into the sidebar. There are sidebars for:
- Audio – displays audio player
- Block – a widget containing a block
- Bulletin Board – displays the latest bulletin headlines (requires plugin)
- Custom html – allows you to design a more custom widget with html styling
- Events – options to display calendars, lists, by week, etc. List recommended.
- Faculty books – displays faculty books at random (requires plugin)
- Form – adds Gravity form (requires plugin)
- Gallery – displays an image gallery. Limit use.
- Image – displays a single image
- Job candidate profile – displays job market candidate profiles (plugin required)
- Profile/spotlight – displays a random profile (requires plugin)
- Recent posts – displays the latest news headlines
- Search – search form for your site
- Text – You can enter any text/html into this widget
- Video – displays a video from Youtube, Vimeo, etc.
Style Guide
All Krieger School websites must follow Johns Hopkins University branding standards, the JHU Editorial Style Guide, and the Krieger School’s Web Writing Style Guide. The Marketing and Communications team will correct sites that do not comply with these standards and guides.