A – Z Lists

A – Z Lists

We have an optional plugin available called “A – Z Lists”. It’s an easy solution to add a large number of items in a filterable and searchable A – Z list. Create your list and the plugin will alphabetize the list for you.

Activate the A – Z Lists Plugin

Note: Only site administrators can activate plugins.

  1. Go to Plugins > All Plugins
  2. Find “A – Z Lists” and click the Activate button.
  3. It’s now available on your site.

Add your list to a Page or Post

If you are using the Block Editor, you will need to use a “Classic Block” to be able to see and use the A-Z icon.

  1. Click the A-Z icon in the editor. (If you are using the Block Editor, see the note above.)
    A - Z icon in toolbar
  2. Choose the type of list you want to use (ordered, unordered, none).
  3. Choose the number of columns. The columns are the number of columns for each letter.
  4. Check “Show menu with search bar and links to groups” if you want your readers to be able to filter the list based on letter and search the list.
  5. Check “Show letter before start of each group” to display the letter automatically.
  6. Click OK
    Insert sortable A - Z list
  7. Start typing your list. You don’t have to worry about alphabetizing the list, it will be sorted for you when you publish the content.
  8. You can also link the list content. This could be a good index for your site, for example.
Example of an A - Z list published on a page.
Example of an filterable and searchable, A – Z list.
Sitewide Search

Sitewide Search

We recently changed the search mechanism on the main website on UCI Sites to search all publicly available websites and blogs hosted on the service.

Now, when you use the Search which is available prominently on the header of each page, you will see results from all UCI Sites websites and blogs that allow search engines.

Screenshot showing search results
Example of search results

How to enable or disable your site being searched

By default, all new sites have search engine access disabled. This is intentional. We want to give you time to work on your site before making it searchable by Google and other search engines.

Ready to make your site searchable?

Change your Site Visibility settings. However, be aware it may take Google some time to find your site. The help page has some tips to speed things up.

Simple Google Search Plugin

We’re using the Simple Google Search Plugin. You can too! Learn more about this plugin.

Disable Comments Plugin

Disable Comments Plugin

WordPress was developed in 2003 as a simple way to publish blogs. A big part of blogging is encouraging a conversation with your readers. This can be a great way to interact with folks. However, it can also be a challenge to maintain because blog spam is common. If you don’t use the comments feature on your site, you can disable it completely using the Disable Comments Completely plugin.

The Disable Comments Completely plugin does include some granularity. You can disable comments from Posts, Pages and/or Media. You may want to keep comments on your Posts, but disable it for Pages and Media. These content types rarely benefit from comments and are often targeted by spammers.

Activate the Disable Comments Completely plugin

Tip: You will need to be an administrator to activate or deactivate plugins.

  1. From your dashboard, go to Plugins
  2. Search or browse for the “Disable Comments Completely” plugin.
  3. Click the Activate button.
  4. The plugin should now be activated and available for you to use.

Disable Comments Settings

  1. Go to Settings > Disable Comments.
  2. Select Everywhere if you to disable all comments from Posts, Pages, and Media.
  3. Or select where you want to disable comments.

(Note: This will only disable future comments. You will have to delete any previous comments if you don’t want them to appear.)

For more detailed information, read this CampusPress article on the Disable Comments Completely Plugin.

How to use Font Awesome on your site

How to use Font Awesome on your site

Font Awesome is a widely-used icon set that gives you scalable vector images that can be customized with CSS. With over 1,600 icons in the free set, you should be able to find an icon to suit your needs.

Advanced Feature

Using Font Awesome is a more advanced feature and requires being able to add a script tag to your site and edit some simple code when you want to add icons.

Adding a Font Awesome Kit Code to your site

You will need to create your own Font Awesome Kit. See the instructions below.

To be able to use Font Awesome, you will need to be able to add the code to your site. This requires being able to add it to the <head> section. In most cases this requires being an administrator on the site.

Divi Theme

If you are using the Divi theme, the ability to add the Kit code to your theme is built in.

  1. Go Divi > Theme Options
  2. Click on the Integration tab in Divi Theme Options
  3. In the Add code to the <head> of your blog section, paste the code from your Font Awesome kit.
  4. Click Save Changes.
  5. You will now be able to use Font Awesome icons on your site.

Non-Divi Themes

If you are not using Divi as a theme, fear not, you can still add the code to the <head> section of your site. You will need to enable the Advanced Settings plugin first.

  1. Go to Plugins > All
  2. Find Advanced Settings and click the Activate button.
    Advanced Settings plugin
  3. Once activated, go to Settings > Advanced Settings
  4. Scroll down to Additional Code and paste in your Kit Code in the Header Tag (low priority) field.
  5. Click Save Changes

How to add Font Awesome icons to your site

The first step is finding the perfect icon. Go to Font Awesome’s website and click the Icons menu at the top to see all of their free and pro icons.

Finding the right icon

  1. Type a search term in the search field. You can use the filter for Free icons to limit to the set of icons to the ones that don’t require a paid license.
  2. For example, if you are looking for an alert icon, type “alert”. You will see a set of icons that fit that description. Find the one that best suits your needs.
  3. Alternately, you can just browse the 1600+ free icons by scrolling through the entire set.
  4. When you find one you like, click the icon to see the details of that icon including the HTML code to use the icon on your site.
  5. Copy the HTML code provided. It will start with <i class=
    Copy html code

Using the Icon Code

Now that you have found the perfect icon, it’s time to add it to your site.

Block Editor

If you are using the block editor, we recommend using the Custom HTML block. While you can edit some blocks as HTML, it doesn’t always work smoothly. Using an HTML block seems to work the best.

  1. Add a new Custom HTML block
  2. Add the Font Awesome code where you want the icon displayed along with any additional content. You will need to add some basic HTML like paragraph tags, header tags, etc.
  3. The icon will be the same size as your text. If you want to change the size, you can use a CSS class to make it bigger or smaller. Font Awesome has a great page explaining how to use these classes and where to put the code.
  4. You won’t see the icon in your block while editing, but you can Preview the page and you will see the icon displayed. If you do not see the icon, make sure you have added the Font Awesome Kit to your website. The icons are pulled directly from Font Awesome’s website.

Example HTML Code

<p><i class="fa-solid fa-hand-wave"></i> Hello World!</p>

Hello World!

Example output of the code above.

Using FontAwesome in Divi

If you are using the Divi theme and/or page builder, you can also use Font Awesome icons. In some ways it is easier since you see the icon displayed while still editing. You don’t need to Preview to see the changes.

In Divi, you can use a Font Awesome icon in any module that allows you to edit in the Text tab (which is HTML) as well as the Visual tab.

  1. Edit the block where you want to add an icon, for example a Text module.
  2. Click the Text tab when editing the content to show the underlying HTML.
  3. Add the Font Awesome icon HTML you copied earlier.
  4. Paste it in the desired location and add the CSS class to change the size if needed.
    FontAwesome in Divi modules
  5. Save the module.
  6. In Divi, you should see the icon in the edit mode since you are seeing the page in real time.

Getting Your Own Font Awesome Kit Code

You will need to create a Font Awesome account to get access to their free kits. Font Awesome also has paid accounts, that add even more icons. As of February 2022, the Pro accounts have 14,865 icons plus other features. The free account will likely be enough, but it’s good to know there are options.

  1. Go to Font Awesome’s Start page.
  2. Add your email address and click the “Send Kit Code” button.
  3. Check your email for confirmation and set up your password and account details.
  4. Once you’ve set up your account you will be given a Kit Code. You will use this code to add Font Awesome to your site.
  5. Use the directions above to add your own Kit to the <head> section of your site.

It can seem a little complicated until you do it a few times. You now have the option to use more than 1600 scalable icons to add interest and usability to your site. Give it a try!

Jetpack Widget Visibility

Jetpack Widget Visibility

As of September 26, 2022, Website tracker tools are no longer allowed on UCI Health and School of Medicine websites. If you are using Jetpack, Site Stats are ON by default. Learn how to Deactivate Jetpack Site Stats. Other features of Jetpack will still be available.

As part of our Jetpack features series, learn how to configure widgets to only appear on certain posts or pages. By enabling this feature, you can show or hide widgets based on the criteria you choose.

Things to Know

You will need to activate and set up Jetpack to take advantage of this feature.

Enable Widget Visibility

  1. Go to Jetpack > Settings
  2. Go to the Writing area
  3. Go to the Widgets panel and toggle ON “Enable widget visibility controls…”
    Widget visibility setting

Using Widget Visibility

What are some examples of when to use widget visibility?

  • You want to show an author bio, but only for posts by that author.
  • You want to show or hide a widget on the homepage.
  • You want a widget to show for a particular post category or tag.
  • You want to show a widget only for people who are logged into your site.

Visibility

Visibility is controlled by five things: page type, category (posts), tag (posts), date, and author. You can also hide widgets based on the same criteria. Each rule is handled separately.

How to use Widget Visibility

When adding or editing a widget, you should now see a button called “Visibility”.

  1. Add or edit an existing widget using the Customizer so you can see the changes in real-time.
  2. Click the Visibility button.
  3. Toggle Show or Hide and choose your criteria.
  4. For example, if I only want to show a widget on the home page (or front page), I would choose Show if Page is Front page.
    Widget visibility example
  5. This would only show the widget on the home page and hide it everywhere else.
  6. You can add more criteria by clicking the plus icon.
  7. When you are satisfied with the results, click the Publish button in the Customizer to save your settings.

There are a lot of variables. Try it out so you can display widgets in different parts of your website.