Page Building Guidelines

Page Hierarchy and URL Structure

  • Pages will be structured with prospective students in mind.
  • Sites will not be structured according to internal department structures (unless it conforms to the above).

Page Templates

  • All pages must have the same HCU header and footer
  • All college homepages must use the same template (customization is allowed within limits).
  • All departmental front pages will use the same template (e.g., Student Life, Spiritual Life, Veterans, etc.).

Page Title and Navigation Title

The main WordPress page/post title appears in the following places: title tag text (what appears in the browser tab and bookmarks), navigation menus, and lists of posts/articles.

  • When authoring page titles, consider what it will look like in the navigation bar.
  • Should not contain HCU or Houston Christian University.
  • Should not contain words that would be repeated in a list of navigation items.
  • To customize a title tag for SEO purposes, use the Smart Crawl metabox to add a custom title.
  • Remember to update the permalink after saving the page (see below).

Features and Layout Building

  • Officially approved layout features, available for preview in the Kitchen Sink, must be used in page building. These features can be added using the Content Area Builder and Layout Area Builder by pressing the Add Content Section or Add Layout Section buttons. These are designed for accessibility, SEO, and brand color compliance.
  • Do NOT use HTML converters to convert documents into web pages. These insert junk code that may interfere with the site design.
  • Do NOT use artificial intelligence (AI) to generate new website designs or features to be added to the page.  AI may be used for generating content with heading tags (e.g., h1-h6, p, and a tags), but generated content should not contain layout tags (e.g., section, div, aside, main, etc.) or unnecessary classes, styles, or attributes.
  • Tables should be created using the Table dropdown in the editor, which ensures accessibility features and styles are automatically applied (caption, header row, etc.).
  • Only use the Text (HTML) view tab on the page editors if you know what you are doing.

URL Permalink/Slug

  • General rule: make it as short as possible, yet still including descriptive keywords.
  • Remove all instances of “hcu” or “houston-christian-university”.
  • Do not repeat words used on parent pages (e.g., /alumni/alumni-benefits/ could be /alumni/benefits/).
  • Remove redundant department names/info (e.g., /finaid/contact-the-office-of-financial-aid/ can be /finaid/contact/).
  • Remove stop words (the, and, or, it), conjunctions, and other unnecessary words (e.g., hcu-founding-father-dr-stewart-morris-sr  can be  founding-father-stewart-morris  or  stewart-morris).
  • For degree pages, follow the naming convention of other degree pages on that site: on-campus and online degree. pages follow different URL naming conventions (e.g., /cybersecurity-ma/ vs. /ma-cybersecurity/).

Banner Image

  • Banner images must be cropped to 1512×400 (Full width, no sidebar) or 1512×640 (Full Width Design).
  • Save the file as Web Optimized JPG at Medium or Medium-High quality.
  • Make the file size as small as possible – as low quality as possible without distorting the image too much. (Remember that there is an orange/blue, semi-transparent filter overlaying the image by default, which hides minor blemishes.)
  • Do not use banners images with text on them.
  • Preview what the banner image looks like with the default white title text on top of it.

Banner Page Title and Logos

  • You may NOT use the main banner logo for any purpose
  • Images or logos should not be taller than the main site logo

Headings

Rules for page heading tags:

  • Heading 1: Do not add a Heading 1 because this is generated automatically by the page title. There should always be one h1, but there should be only one h1, and never more than one.
  • Headings must be structured, in order, from h1 to h6, according to logical, topical category/subcategory.
  • If you need a different size/color heading for design purposes, add class=”h2″ to the heading tag – replace h2 with the heading size you want to use (e.g., <h2 class=””>, or <h3 class=””>).
  • Headings should in regular case (not uppercase).
  • Headings should not contain colons (:) at the end.

Paragraphs and Text Content

When formatting text on your webpage, use the formatting selector to format the content in your page.

  • “Paragraph” formats all content that is in the body of the article on the page. Paragraphs of body copy should remain justified to the left.
  • “Heading 2” (H2) should be used for sub-headers. (Think of your page as if it were summarized in an outline). Sub-headers should remain left-justified, unless used on a full width template.
  • “Heading 3” (H3) through “Heading 6” (H6) should be used for child points under the sub-header(s). These should also remain left-justified.
  • Underscores should never be used on web pages because this normally indicates the presence of a clickable link. If emphasis is needed, try bold or italic or both instead of an underscore.
  • Do not italicize or bold an entire paragraph. Italics and bold should be used to emphasize words or phrases, and periodically an entire sentence.

Font Family and Colors

  • Do not change the default font family unless it is necessary for space reasons
  • Prefer using bold or italics for emphasis, or both, rather than using underline or changing colors
  • If you must change the color, make every effort to stick with our official brand colors. Otherwise, any custom colors must match the Web Accessibility guidelines for contrast. (Test your colors on this Contrast Checker to ensure it passes “WCAG AA” compliance on normal and large text).

Copying and Pasting

  • Do NOT copy directly from online Microsoft Word documents in SharePoint or OneDrive. This adds junk code to the web page (see the Text tab). Instead, download the Word Document to a computer, and copy/paste from there.
  • Do NOT copy directly from Google Documents.
  • Do NOT copy content or links directly from HCU Newsletters sent by Encompass (e.g., Campus Connections or Student Newsletter) or Slate.  The links in those emails use special redirects for tracking (e.g, http://hbu.us12.list-manage1.com/track/click?u=c581e012026e024204ca8dd15&amp;id=83cb24e904&amp;e=918d748abc) that will eventually break.

Links

  • Always use secure https links – not http (e.g., https://engage.hc.edu/).
  • Do not use spaces in filename links – use hyphens (e.g., https://hc.edu/publications/This-PDF-has-spaces.pdf  – not – https://hc.edu/publications/This%20PDF%20has%20spaces.pdf).
  • Do not link to text that says “click here” or “here” – reword the sentence to make links out of the keywords that describe page being linked (e.g., Browse our bookstore merchandise).
  • Email addresses should be email links (mailto:admissions@hc.edu).
  • Phone numbers should be phone number links (tel:281-649-3000).
  • Degree plan links should only point to the University Catalog and use the universal linking format.
  • All links to degree plans and other websites (besides hc.edu) should open in a new window.

Links to Majors and Programs

The Majors and programs page allows URL parameters to pre-filters the results on load.

  • Campus
    • Online:  https://hc.edu/academics/majors-and-programs/?campus=online
    • On-Campus:  https://hc.edu/academics/majors-and-programs/?campus=on-campus
  • Program Level
    • Undergraduate: https://hc.edu/academics/majors-and-programs/?level=undergraduate
    • Graduate: https://hc.edu/academics/majors-and-programs/?level=graduate
  • College
    • Arts and Humanities: https://hc.edu/academics/majors-and-programs/?college=arts-humanities
  • Department (requires College):
    • History and Great Texts: https://hc.edu/academics/majors-and-programs/?college=arts-humanities&department=history-and-great-texts

Links to College Degrees Pages

Most sites have /degrees/ pages that list all the degree pages on the site (except Business currently)

  • https://hc.edu/school-of-christian-thought/degrees/.

Links to Catalog Degree Plans

There is a universal linking system which allows you to link to a degree plan in such a way that each year when a new catalog degree plan is added it will automatically show the latest one without requiring any updates.

  • Simply add the level (undergraduate/graduate), the college (coah, cob, coebs, cose, sct, sonah), and the degree plan filename (Biblical-Studies_Fillable.pdf).
  • https://hc.edu/university-catalog/?filepath=undergraduate_sct_Biblical-Studies_Fillable.pdf

File Uploads

  • Upload the files to the appropriate location:
    • Media such as images (photos and graphics) should be uploaded via the Media Library.
    • Documents and other files such as PDFs should be uploaded to the File Manager.
  • Always update older files with newer files rather than uploading a duplicate newer version. (This ensures all links to the old file are automatically updated to the latest version and it prevents old versions from showing up in search results.)
  • Filenames should follow accessibility best practices: use hyphens (-) instead of spaces; avoid using years (e.g., 2023), versions (-v2), unnecessary words, etc. This way, if you link to a file from web pages, you can update (overwrite) the file in the future without having to update all the links.
  • Do not upload degree plans to your site. Instead, link to the existing degree plan in the catalog.

Photos and Images

Dimensions and Cropping

Save as Web Optimized

Disable link to media file

Do not post flyers or QR codes on the website.

Video Embeds

Widgets and Sidebars

  • All sidebar widgets should have a relevant icon (try not to repeat, for example, the bookmark icon used on the main navigation).
  • Widgets should not contain heading tags (e.g., <h2></h2>) because they are not part of the main content.
  • Images used in widgets should be resized to no larger than the widget width.

Tuition

  • Degree pages should never contain tuition cost dollar amounts, but instead should link to the tuition and aid website, where there are undergraduate and graduate tuition pages and tuition calculators. This is because tuition costs change frequently, the pages will quickly become out of date, and it’s more feasible to keep the tuition website updated rather than checking hundreds of degree pages.