Chapter Website Template

Green Pattern Header

WordPress Basics and Other Website Tips

Best Practices and Recommendations

WordPress Basics

Front End

What Is It?

  • The front end is your WordPress website. This is what the user will view and interact with. When the information for the WordPress website is implemented, you will be able to view it through the front end.

Best Practices

  • View the front end to see what the website looks like and make changes accordingly.
  • If you want to move from the front end to the back end, you can log into the WordPress back end by adding /wp-admin/ to the end of the URL.
  • If you are logged into WordPress and viewing through the front end, you can also make edits to a page by pushing the ‘Edit Page’ button in the black bar at the bottom or top of your screen.

Back End

What Is It?

  • The back end is the website-administration area and can also be known as your dashboard.
  • The back end allows the ability to edit and create content on pages, posts, users, and more. You can also check and update plugins here.

How To

  • You can log into the WordPress back end by adding /wp-admin/ to the end of the URL. This will take you to the login page, where you will input your credentials.

Best Practices

  • Remember to remain up to date with any pending updates.
  • Follow WordPress layout standards.

WordPress Dashboard Menu Items

Posts

What Is It?

  • Posts are time-specific pieces of content. They update your website with fresh and relevant content and help boost SEO.
  • Posts are organized in chronological order on the page.
A screenshot of WordPress Posts in the backend

How To

  • Within ‘Posts’, you can push ‘Add New’ at the top of your screen. The post feed will appear on your website’s ‘Blog’ page.
  • Comments are disabled by default in this template. You can change this under ‘Settings’ > ‘Discussion’ within the WordPress menu items.
  • To enable comments on a post, click ‘All Posts’ and then click ‘Quick Edit’ for the post you want to enable comments on. Check ‘Allow Comments’ to enable them.

Best Practices

  • Place your posts into a category. This helps to keep them organized and displayed in different areas across your website.
  • Blogs should be posted at least once a week.
  • It may be helpful to create a content calendar that outlines when you will be posting different content and updating the site.

Categories

What Is It?

  • Categories are a general way to group content on a WordPress site’s ‘Posts’. A category is a topic or group of topics connected to one another.

How To

  • To add categories to posts, go to the right side of the screen to the menu and push ‘Categories.’
  • You can then rename or delete the default categories provided in the template. Click ‘Add New Category’ and create a new category that could fit multiple posts.

Best Practices

  • Create a good category name that symbolizes a topic or a group of topics that are connected to one another.
  • Categories are great for topics that will be commonly utilized/written about. Keep the number of categories as low as possible (we can have more tags for specific subcategories).

Tags

What Is It?

  • Tags are important on WordPress because they connect different articles to each other. They are especially useful on blog posts because they allow readers to have links to similar content if they want to learn more about that topic.
  • It is also a way for the content to be categorized so that it is easier to find.

How To

  • To apply tags to a page, look to the right side of the WordPress page when creating a new post.
  • Click on the settings icon at the top right, then click on ‘Post.’ As you scroll down, you will see an area labeled ‘Tags.’
  • When you click on this, a text box will appear. In this box, you can type any tags related to the article.

Best Practices

  • Use tags connected to other articles so they do not lead to a single or empty tag page.
  • Use tags that relate to the content that was written.
  • Decide whether to create tags with singular or plural wording. Creating singular and plural tags of the same word can cause disorganization, such as “Internet Satellite” vs. “Internet Satellites.”

Pages

What Is It?

  • Pages are the different links that are available throughout a website. Posts are articles that can be seen on a specific page, such as a blog page.

How To

A screenshot of WordPress Pages in the backend
  • On the left side of WordPress, you will find ‘Pages’. Once you click it, you can choose to view all the pages or add a new one.
  • Click ‘Add New’ at the top left of the page to create a new page. Click ‘Edit’ to edit an existing page.
  • You can then copy and paste or type your content directly in the WordPress editor.

Best Practices

  • Content should be updated on the site at least once a month to ensure all information is correct.
  • Reuse the blocks provided in the template to ensure pages are consistent throughout the website.

Subpages

What Is It?

  • Subpages are used to give hierarchical content into an outline—they are the pages within pages.
  • An example subpage could be seen as www.website.com/learn-more/about-us. This subpage is within www.website.com/learn-more/

How To

  • Open a page that has been created or create a new page.
  • Once the page is open on the right side, scroll down to ‘Page Attributes,’ where you can make it a main page or a subpage by selecting the Parent page.
  • Only pages can have subpages. Posts and announcements cannot.

Best Practices

Media: Images, Videos, PDFs, etc.

What Is It?

  • Media is where you can manage your images, audio, video, and other files.

How To

A screenshot of WordPress Media in the backend
  • You can upload your media through the ‘Media’ menu item or within the page.
  • You have three options to place media within the site:
    • Drag and drop the image onto the page.
    • Upload the image from your computer onto the page.
    • Select from the media library.

Best Practices: Images

  • Images should be optimized (ideally before uploading), as big and uncompressed images have a very bad impact on your site’s performance. Best optimization means finding the best compromise between quality appropriate for different screens and the lightest possible weight. Read more on how to optimize images.
  • Images should be no bigger than 100-150 KB in size, especially those used in smaller dimensions (logos, icons, etc.). Note that image size differs from image dimensions, so sometimes images of small dimensions can be big. The recommended tool for compression is Adobe Photoshop, but there are some free online tools, such as Squoosh, Image compressor, etc.
  • Alt text should always be added for accessibility and SEO reasons (read more in the ‘Web Accessibility’ and ‘SEO’ sections below). Find helpful instructions on WebAIM’s site.
  • File naming, cropping, and resizing should be done PRIOR to uploading to the WordPress media library. After the upload, you add captions, alt text, and copyright.

Best Practices: Videos

  • It is not recommended to upload large videos directly to the site. Optimize your videos and make sure they load fast.
  • We also recommend storing videos on one of the video streaming platforms (YouTube, Vimeo, etc.) and embedding them on the pages as needed.
  • Add transcripts and meta descriptions for accessibility and SEO reasons.

Blocks

What Is It?

  • Blocks are content elements you can add and edit to create a page layout. These can include paragraphs, images, columns, buttons, and more.

How To

  • When you click on an already existing page or create a new page, you can add blocks. You may add blocks by pushing on the blue square with a ‘+’ in the middle of the page. It will display a few common actions. Push ‘Browse All’ to view everything you can put onto the page.
    • Once you click ‘Browse All’, it will open the list of ‘Blocks’ and ‘Patterns’ on the left. ‘My Patterns’ are blocks that you can reuse across the site; for example, the ‘Regular Text Section’ block will create a text block with the right padding on the sides. If you use a pattern on a page, make sure you first detach it from the original by clicking on three dots and choosing ‘Detach’.
  • You can always reuse existing blocks from the template pages by selecting the block you need, clicking on three dots, and selecting ‘Copy’ or ‘Duplicate’ from the list.

Best Practices

  • Your top header should be h1, but all the headers below must be h2, h3, etc. A page should not have more than one h1.
  • Once you add a paragraph to a block, it is similar to using any word processing program; you may type any text for that area.

Menus

What Is It?

  • The menu is a list of links typically displayed at the top or bottom of your website. It allows users to navigate around your website easily.

How To

  • Within WordPress menu items, hover over ‘Appearances’ and find ‘Menus’. The left side, titled ‘Add Menu Items’, will show all of the pages created on WordPress. You can add them to the menu and bring them into the center box.
  • To create a submenu, drag it over to the right, and it will become a submenu under a parent menu.

Best Practices

  • Create clear, relevant labels for the page.
  • Avoid adding too many menu items on the top level.

Widgets

What Is It?

  • A widget is an element that enables you to add different features to your website. Examples of widgets for a website are the footer items, Related Posts, etc.

How To

  • Hover over ‘Appearance’ and select the widget. You will see the widgets in use.

Best Practices

  • Use the widgets for the intended use to prevent complications and overuse.

Users

What Is It?

  • Users are people with different roles who are registered to use the WordPress site. This allows them to log in and make changes on the back end.

How To

A screenshot of WordPress Users in the backend
  • In the menu items, there is a section called ‘Users’ where you can see who is registered. You can also add people to the back end as administrators to give them the ability to make edits.
  • At the top of the page, there is an ‘Add New’ button. Once you click that button, you will create a username and fill in their email address and name.
  • You can then push ‘Role’ and the multiple options for each type of user role will be displayed.

User Roles

  • Subscribers can log in to the website but do not have access to make any changes.
  • Contributors can read all posts, as well as delete and edit their own posts.
  • Authors can write, edit, and publish their own posts but cannot modify posts written by other users. They can upload files and add images to their own posts.
  • Editors can create, edit, publish, and delete content, including content written by others, but cannot change the website’s settings.
  • Administrators hold the highest level of availability to the site and have unrestricted access to the WordPress admin area.

Best Practices

  • Ensure the people you add to be administrators understand the expectations of the role.
  • You can have multiple administrators.
  • Review who can be on the back end of the site and remove or add users as needed.

Web Accessibility

Web accessibility means a website is developed so people with disabilities can use it seamlessly.

Web Content Accessibility Guidelines (WCAG) explain how to make web content more accessible. WCAG is an international standard developed by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). They cover websites, applications, and other digital content.

WCAG is based on four main guiding principles of accessibility, known by the acronym POUR: perceivable, operable, understandable, and robust.

WCAG 2.2 stands for the current version (published in October 2023). There are three levels of conformance: A, AA, and AAA. More information is available on the WCAG site.

Internet Society strives to meet the AA level of conformance.

If you’re a member of the Internet Society, you can also join our Accessibility Standing Group to make a difference in digital inclusion for persons with disabilities.

Best Practices How to Make a Website Accessible

  1. Use semantic HTML: Using proper HTML markup and structure is crucial for accessibility. Semantic HTML elements (e.g., <header>, <nav>, <main>, <section>, <button>, etc.) help convey the structure and meaning of the content to assistive technologies.
  2. Make the content keyboard accessible: Make sure that all interactive elements on the website can be accessed and operated using a keyboard alone.
  3. Use sufficient color contrast: Contrast refers to the color difference between the text and its background (font color vs background color or image). Online tools (see an example) can help you select the right colors.
  4. Provide alternative text for images: Alternative Text (alt text) is a concise description of an image’s content and function. All tags and attributes need to be coded in a way that can be interpreted by screen readers and that makes its output understandable. It is also good for SEO (see below).
  5. Use ARIA attributes when necessary: ARIA roles and attributes enhance the accessibility of web content, particularly for dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. ARIA helps make web content more accessible, especially when HTML can’t accomplish it alone. However, it should only be a supplement when HTML semantics is insufficient.
  6. Make your content accessible: The ability to access content refers to making content products and services accessible to people with disabilities. It’s also about making content more flexible and usable by people, whatever their preferences are. Use plain language, captions, and transcriptions for your video content. Establish a clear hierarchy of information (by using h1, h2, h3 headings and avoid skipping heading levels).

Additional Tips

  • Ensure forms are accessible.
  • Avoid PDFs (whenever possible) / make sure the documents are accessible.
  • Design a website with predictable and consistent navigation.
  • If possible, ask a person with disabilities to test the pages and assess the quality of automated testing.

WordPress core is accessible by design. However, adding new features can make some parts of your site inaccessible. Therefore, when writing your code, editing your content, and uploading it, consider accessibility an essential requirement, not an afterthought.

Search Engine Optimization (SEO)

SEO stands for “search engine optimization.” It’s a set of processes aimed at improving a website’s visibility in search engines, like Google, with the goal of getting more non-paid, organic traffic. Despite the acronym, SEO is about understanding what people are searching for online, the answers they seek, the words they’re using, and the type of content they wish to consume. Knowing users’ needs will allow you to connect with the people who are searching for answers online.

Search engine optimization plays a key role in improving your ranking positions. The higher you rank, the more people will visit your site. More traffic means new customers (potential donors) and more brand awareness.

Best Practices

To ensure your site ranks high in Google, we must create high-quality, relevant content and provide the best possible user experience. In practice, this involves the following steps:

  • Conduct keyword research. Be relevant and make sure your content satisfies the user’s search intent. To be able to do that, you need to do keyword research first and understand what the words are that people are looking for.
  • Create high-quality content. It is important to attract visitors, but it is even more important to provide content that is useful to them. Make sure your content is comprehensive, accurate, readable, and original.
  • Ensure your site is crawlable. Your pages should be indexed and crawlable so that Google and other search engines can serve them in the results. We recommend installing and properly configuring the Yoast SEO plugin on WordPress sites (it is included in the technical guide).
  • Ensure your site is usable and user-friendly (technically optimized). The site should be fully responsive (especially mobile friendly), fast-loading, secure, and easy to use (usable). It should have an easy-to-follow site structure/information architecture. Follow performance, functionality, accessibility, and usability best practices to provide the best user experience.
  • Build backlinks. One of the strongest ranking factors is backlinks, links from other websites pointing to your site. The more links from external domains with a high domain authority score, the higher your ranking. There are more link-building strategies. See some suggestions.

Additional Tips

  • Ensure the meta title and meta description follow best practices: the meta title should be 50-60 characters long, and the meta description should be between 120-158 characters.
  • All pages must have h1/title tag.
  • Use descriptive URLs to help visitors understand what’s on a page.
  • Scan the site for 404s at least once a year and fix them. Do the same for broken backlinks.

Web Analytics

With analytics platforms, you can track the number of users visiting your site, how long they stay, where they come from, how they found your site’s page, which pages are most visited, etc. Web analytics tools help you understand how your audiences behave and which content and layout resonate with them. They can also track if your marketing campaigns work and help improve conversation rates.

The most widely used web analytics tool is Google Analytics (Internet Society also uses it). The previous version of Google Analytics was called ‘Universal Analytics’, and it has been replaced with Google Analytics 4 since July 2023. Find detailed information and useful links from Google, or start with a beginner’s guide from Semrush.

Note: Web analytics tools collect information about site visitors. Ensure your site complies with data privacy laws (see ‘Legal Considerations’ section below). 

Performance

A fast-loading website is important as it provides a better user experience to visitors, attracts more traffic, and impacts search engine results. Optimizing the site’s performance requires regular maintenance.

Best Practices

  • Compress and crop images with the best possible quality/weight ratio.
  • Use a caching mechanism.
  • Use a CDN.
  • Deactivate/remove plugins you don’t use. The more plugins you use, the more code must be loaded and the more data needs to be processed, which can slow down your website.
  • Minimize third-party scripts. Similarly to plugins, third-party scripts slow down your site. Some examples of services and elements that may add these scripts to your site are analytics services (like Google Analytics), chat boxes, embedded videos (for YouTube or Vimeo), advertisements, social media feeds, third-party forms (like newsletter subscription forms), etc.
  • Clean the WordPress database sometimes from unneeded rubbish: spam comments, revisions, obsolete data from old uninstalled plugins, etc. If you are not a technical person, you can use a plugin such as wp-optimize for cleaning operations.

Hosting and Security

For more information, visit the Hardening WordPress page on WordPress.org.

Multilingual Aspect

The WordPress core is not translated by default. There are a couple of options for having translated versions of your website:

  • Use one of the available multilingual plugins: WPML, Polylang, Weglot, etc. Internet Society uses WPML (paid) and Polylang (free) on our web properties, but we encourage you to choose the one that best fits your chapter’s needs.
  • Host a separate site/subdomain for other language instances.

Legal Considerations

The legal requirements of a website vary depending on the jurisdiction, type of industry, and the type of data collected. Please ensure your website complies with all applicable laws and regulations.

Useful Tools and Resources

WordPress

Web Accessibility

SEO

References: