Publishing Content

The primary activity that you’re likely to be doing on your WordPress site is publishing content. The content could be the text you write, pictures you take, videos or audios (which may be hosted on another site), or other media that you’ve found elsewhere on the Web. WordPress makes it very easy to publish media content of all types, whether hosted on your actual Web server or elsewhere.

Posts vs. Pages

Out of the box, WordPress provides two primary content types for you two work with: posts and pages. If you read blogs or have ever written for a blog before, the concept of a post is probably a bit familiar. Posts often are content that appear on your blog in some kind of scheduled way. They usually are presented on your site in reverse-chronological order. Posts might be what you use to share your regular thoughts, reflections, or ideas about a topic. Posts make up a kind of “river” of content that you’re producing as part of your blogging activity.

Pages usually correspond to our more traditional concept of what makes up a Web site. Pages are presented outside of the “river” of content that are posts. They are more likely to stand alone and be organized according to a traditional hierarchy. Pages might be content that is less frequently updated or changed.

If you were using WordPress to build a business Web site with a lot of information content, you would probably use Pages. If you added a feature to that site where you started to advertise special events or news, you would probably use Posts.

A few other things to know about Pages vs Posts:

  • If you want your content to be accessible to your users via RSS/syndication, you’ll need to use Posts. By default, Pages do not appear in a site’s RSS feed.
  • Categories and Tags (which are used in WordPress to help you organize your content) are ONLY available on Posts. Page organization is done by customizing your site’s menus.
  • Okay, this get’s a little tricky: WordPress, by default, also creates “Category Pages” and “Tag Pages” that display all the Posts in a category or tag. These are NOT related to the regular Page type.

Media

Upon occasion, you may want to include media (images, audio, video) in your site’s posts and pages. There are generally two approaches to handling media in WordPress:

Uploading: You can upload the files to your site’s Media Gallery and then link to them in your posts/pages. This works very well for images, and when you take this approach for images you have the added benefit of being able to make use of WordPress’ built-in (albeit rudimentary) editing tools. Also, when you upload images to WordPress, it automatically creates different sizes that you can use, as needed. This approach works less well for audio and video. In order to have your media files actually show up in a “player” (with controls for stopping, pausing, etc.) you’ll need to install a plugin. Otherwise, you’ll only be able to include links to the files. How people view/listen to them will depend a bit on the setup on their own computer and in their own browser. They may, for example, have to download the media file and then open it in another program on their computer.

Embedding: You can embed media from other sites easily in WordPress. Embedding an image just means providing a URL to its location elsewhere on the Web. Instead of uploading it to the server, WordPress grabs that image from the external source and displays it on your post/page. However, with this approach, you lose your editing capabilities as well as the resizing feature. Embedding audio and video from external sources becomes easier with every version of WordPress it seems. These days, you can embed video and audio from many external services (YouTube, Vimeo, SoundCloud, complete list here) by simply placing the full URL of the audio/video location on its own line in your post/page. There is a complete list of supported external services, and you can learn more about embedding from external sources at the WordPress site. Our general advice is to use externally hosted media whenever it makes sense and works. This is usually the case when you need to use audio or video; without plugins, well-presented audio and video in WordPress is tricky. For images, if you need to do basic editing and/or require different sizes of images, upload them to your site. Otherwise, consider referencing them from another location (your Flickr account, for example).

Post Formats

Recent versions of WordPress have built out a new “post format” feature which, if you are using a theme with the feature enabled, will style post formats differently depending on what they are. The formats that are built-in to WordPress (and are available for theme developers to use) are the following:

  • aside – Similar to a Facebook note update.
  • gallery – A gallery of images.
  • link – A link to another site.
  • image – A single image.
  • quote – A quotation.
  • status – A short status update, similar to a Twitter status update.
  • video – A single video.
  • audio – An audio file.
  • chat – A chat transcript.

Those of you familiar with Tumblr may recognize this approach to post formats.

For the most part, post formats are designed as a way to style a site (and customize styling depending on the kind of content that is being displayed). They have no special functionality, and their use depends entirely upon the theme you are using. Many older themes, for example, do not recognize post formats.

Managing Permissions

The default Mediawiki installed has been customized to make it a bit harder for spammers to overwhelm wikis with illegitimate content and comments. This is done by modifying the LocalSettings.php file (a file that is included in every install in which it is possible to provide configurations details).

By default, Mediawiki allows anonymous users to create pages and edit pages in the wiki. The modifications change this in the following ways:

  • Anonymous users cannot edit existing pages
  • Anonymous users cannot create pages
  • Registered users must click the confirmation link in the registration email in order to edit or create pages

This approach should drastically reduce unsolicited content and comments on Mediawiki installations. One further step that administrator might take is to turn registration off after a predetermined amount of time. Users must create accounts by this date; after that, the settings are changed so that registrations are no longer open.

To add this setting, you must edit LocalSettings.php in your Mediawiki install:

  1. Login to cPanel and browse to your File Manager.
  2. In the File Manager, browse to the folder within public_html that contains your Mediawiki install. If you installed the wiki at the root of your domain, you won’t need to go any further than public_html. If you installed the wiki in a subdomain or subdirectory, you’ll need to find the directory that is associated with that space.
  3. Locate LocalSettings.php. Once selecting the file, click download in the top menu bar to download the file as a backup before proceeding. Then click Edit in the top menu bar to edit the file.
  4.  Confirm that you want to edit the file.
    Confirm that you want to edit the file
  5. Browse to the bottom of the document, and locate the custom settings that were added during the Mediawiki install and the following line:
$wgGroupPermissions['*']['createaccount'] = false;

Static and Dynamic Websites

Static Websites

In the early days of the Web, almost all Web sites were what is known as 'static sites.' Content (text, images, video, audio, etc), was placed or embedded in a file in which HTML tags were used to format it. If you looked at the actual contents of the file, you might see something like this:

example of static HTML code

The content and the tags lived side-by-side. To edit the page, you’d open up the file (on your own computer) in a program capable of editing HTML files and make changes to either the content or the presentation. Every page had to be edited individually, even if the edits you were making were for common elements that appeared on many pages (like menu bars).

From a technical perspective, accessing a static Web site is fairly straightforward. When your computer is connected to the Internet, you can use a Web browser to access files on a Web server (as long as you know the address). The Web server delivers the contents of those files to your browser, and your browser displays them.

Dynamic Websites

Over time, as the Web became more sophisticated, new systems emerged for creating and managing Web sites. These moved beyond the model of having content and HTML tags live in a simple HTML page which your browser accessed and displayed. Instead, these systems were Web applications – software that literally runs on the Web server and makes it possible to manage a Web site, often with very sophisticated features. One feature of these applications is that they separate content and presentation by storing most content (your text, images, etc) and data about the site (the title, options, etc). in a database.

On the Web server, the Web application installs files that are written in some kind of programming language. The server reads this code and obeys any requests in it to access data in the database (which lives on a separate server) and displays it according to the instructions in the code.

example of dynamic HTML code

Essentially, the data for the site (living in a series of tables in a database on the database server) is entirely separate from the actual presentation of the site (living in the code of the programmed files on the Web server). Special software on both the Web server and the Database server enable the two to speak to each other and work together.

One of the benefits of using a Web application is that you usually don’t need to touch (or even look at!) the code in order to make changes to your content. In addition, editing the site usually involves accessing some kind of control panel through your Web browser and filling out a form, instead of having to download and access files in software on your own computer.

Dynamic vs Static Content

Sometimes when we talk about the difference between dynamic and static content we get bogged down in the idea of whether or not the content is “fresh” (dynamic, regularly updated) or “old” (static, never updated). How frequently you update your content has nothing to do with what kind of system you are using to manage your site. You can manage a static Web site (as described above) and update the content every day. You can also have a dynamic Web site (running something like WordPress) and never change the content after you create it.

Generally speaking, it is easier to regularly update content on a dynamic Web site because the Web application just makes it easier. Sometimes, even when you just want a very basic page or placeholder, it’s easier to install a Web application (and only put up a single page) then to manually create an HTML page and upload it.

A Side Note about Separating Content from Presentation: Style Sheets

Another aspect of separating content from presentation involves the use of 'Cascading Style Sheets' (CSS). These are special files that live on your Web server and are linked to your Web pages. They contain information (written in a special markup language) about how to make elements on your site look. For example, they allow you to define in a single location what all Level 1 Headings look like on your site. They are an important aspect of understanding how to separate content from presentation, but they’re not really an aspect of the difference between static and dynamic sites. Both static and dynamic sites can use style sheets.

Reading Settings – Front Page

WordPress is a very flexible platform for creating full-blown websites, not just blogging sites. This page will show you how to change the “front page” of your website.

As we have said before, WordPress provides two primary content types for you two work with: posts and pages. Posts, as in blog posts, are a somewhat complex form of a webpage. Each blog post gets published in reverse chronological order, on the front page of a WordPress site. You write a new post, and it gets published at the top of the front page. Pages are a more static form of content. They are additional areas to put information that doesn’t change much. So what if you would like to make the front page of your WordPress site based on a page instead of your blog posts?

  1. Start at the Dashboard.Screen shot of WordPress Dashboard
  2. Navigate to Settings > Reading.screen shot of WordPress reading settings
  3. Normally, the front page displays your latest blog posts. What we want to do instead is select a Page from the website. Obviously, this page has to exist before you can select it. Select the “A static page” radio button and choose the About page from the Front page drop-down menu (an About page was created for you when you installed WordPress). Press the Save Changes button and now you will have the “About” page as your Front page. Edit it as you see fit and provide a good welcoming page for your visitors. screen shot of Word press reading settings
  4. But wait. What will happen to your blog posts? Most people will want them as the “dynamic” part of your site. First, create a new Page.screen shot of
  5. Title it Blog (you can title it whatever you want but Blog is common and descriptive). Leave the page blank (don’t type any text in the edit box) and Publish it.screen shot of adding a new post
  6. Now go back to Settings > Reading. Under the static page area choose Blog from the Posts page drop-down.select new WP post page
  7. Click the Save Changes button. Now your “home” page will actually display the About page. You will also have a Blog item in your menu (depending on your theme, you may have to customize your page display to see pages).
  8. If you click on the Blog menu item, you will then see your blog posts. Notice the /blog added to the web address.

Installing Mediawiki

  1. To get started you’ll need to login to your control panel (https://createuky.net/dashboard) using your University of Kentucky username and password.
  2. Once logged in you’ll be at the homepage of your control panel. Navigate the Applications section of the cPanel and click All Applications.
  3. Find and select MediaWiki.
  4. The next page gives you more information about the MediaWiki software. To begin the install, click install this application in the upper-righthand corner.
  5. On the next page, the installer will ask for some information about this install. The first thing you’ll want to do is decide where to install it. If you’re wanting to install MediaWiki on your main (the root) domain, you can leave the directory area empty. If you created a subdomain, you can select it from the drop-down menu. You also have the option of installing MediaWiki in a subfolder by typing in the folder name in the Directory field. Click here for more information about subdomains and subfolders.

    (By default the installer will automatically backup your MediaWiki website and update it anytime a new version comes out. While we recommend you keep this option, it is possible to only do minor updates, or turn them off completely. The installer will also create a database for you automatically, but if you’ve already created one for this website you can choose Let me manage the database settings and enter the details.)
  6. Finally, you’ll need to create an initial username and password for the MediaWiki install. Enter those credentials in the Settings section and click Install.
  7. The installer will take just a few moments to install MediaWiki and a progress bar will keep you updated. When it is complete you will see a link to your new MediaWiki site as well as a link to the back-end administrative section for your MediaWiki site.

Congratulations, you have now completed the installation of MediaWiki! You can now start to create collaborative documents on your own domain.

What Exactly is a Web Application?

In the most general terms, a Web application is a piece of software that runs on a Web server. A Web server is a just a specialized computer designed to host Web pages.

Most Web applications are comprised of two components: files and a database. When you install a Web application, you will need to make sure all of the files are copied over into the appropriate location AND that a database (and database user) has been set up to connect to those files. Often, you will have to do some configuration to make sure the application knows how to access the database.

The system we use for University of Kentucky uses a special script installer called Installatron (in cPanel) that allows you to automatically install dozens of open source applications. When you use Installatron, you don’t need to worry about moving files, creating databases, or doing the initial configuration. It’s all taken care of for you.

In order to run on the University of Kentucky server, Web applications must be able to run on a LAMP server, which is the particular kind of Web server that we use. Occasionally, a Web application may require additional components or modules that need to be installed on the server.

Permalinks

Part of the popularity of WordPress is how easily it makes a website functional and yet attractive. One of the smaller details that you might want to adjust is how the addresses to your blog posts are structured. Permalink is the name given to the address of an individual blog post because they are “permanent links”. For this example, the web address we’ll use for this sample blog is yourdomain.createuky.net. The link to the first post, titled “Hello World” may be structured in many ways. The screenshot below shows one way: “http://yourdomain.createuky.net/blog/uncategorized/hello-world”.

With WordPress, you have many options to form the links to posts, and you can change them to work for your particular content.

  1. To change the permalink structure, start by going to the Dashboard.
    Screen shot of WordPress Dashboard
  2. Next, go to Settings > Permalinks. By default, your blog will use a “custom structure” that includes a category select and the name of the blog post.
  3. If you are not using categories, or prefer a different look to your blog post addresses, there are several choices under Common Settings.  A popular choice is to use the Post name choice, which is a bit more informative. So our post titled “Hello World” will have an address of “http://sstrauss.sites.haverford.edu/blog/hello-world”.
  4. If you want to have the date as part of the address, you can choose Day and name or Month and name. You can also change the structure of category and tag names under the Optional section.
  5. Finally, when you write a blog post, you have the option of editing the permalink for an individual post. Just click the Edit button (underneath the Title field).
  6. Then type in whatever is appropriate (and hasn’t been used yet). Generally, you want to make it as simple and short a word, or words, as makes sense.

Grav

Grav is a content management system (CMS) or, said another way, it’s an application to make websites. But differs from other CMSs like Drupal or WordPress in its underlying technology. While it’s a PHP app like those two, unlike them it does not have a database. All data is written directly to files rather than stored and retrieved from a database. This is known as a flat-file system and it can help with performance given numerous database calls can slow down sites.

Why and when would you use Grav? Grav should maybe be reserved for the technically-savvy user. It’s not that Grav is particularly difficult (every CMS has a learning curve) but rather it gets really interesting when you can integrate it into Github using the Github Sync plugin, which syncs everything on your Grav site to a Github repository for others to contribute to, clone, or fork. Grav also requires a familiarity with Markdown, a lightweight Markup language, so that’s something to be aware of as well.

You can learn more about Grav here.

What Can You Do with Your Account?

Your ability to do things on University of Kentucky is dictated to a large degree by the limits of your imagination. That said, there are some technical requirements and limitations that you should be aware of and might want to review.

To spark your imagination, here are some ideas that might help you get started:

Install a Web Application in Your Space

University of Kentucky makes it very simple to install certain Web applications in your Web space. Web applications are just special software that run on a web server. Usually, they allow you to build and manage a website. The kind of site you can build depends on the type of application you install. Here are some examples of applications that you can easily install within the createuky.net web hosting interface:

WordPress: WordPress is a simple-to-use blogging application. The tool also comes with a huge array of plugins & themes to allow you to create virtually any kind of website imaginable. We have guides on using WordPress here.

 

Omeka: Omeka is an open-source web application that can be used to create and display online digital collections and archives. We have information available to help you install and use Omeka here.

 

Scalar: Scalar is a content management system with the idea of creating non-linear books on the web. You can learn more about its functions and how to install it here.

 

Grav: Grav is an open source, flat-file CMS made for folks who are looking for something a little more experimental. Grav provides a straightforward framework for creating pages and inserting media. We have additional resources for Grav here.

 

Mediawiki: It is the open-source wiki software that runs the online encyclopedia, Wikipedia. This tool may be right for you if you’re interested in publishing documents and then collaborating with others on them. Find our guides on Mediawiki here.

 

These are just a few of the open-source applications that are available to you in your University of Kentucky web space.  We encourage you to read more about what Web applications are and which ones are available to you through this project.

 

Organize Your Site with Subdomains and Folders

Through this project, you’ve received a domain name that you can actually subdivide and organize anyway you like. One easy way to organize your domain is to create subdomains, in which you can then install other applications. In addition, you can just set up subfolders for your site (which can also have their own applications installed in them). Here’s an example of how you might organize your site (using the subdomain vs. the subfolder approach)

Subdomain Approach Subfolder Approach
yourdomain.com (“root”) Install WordPress as your “main site” yourdomain.com (“root”)
course1.yourdomain.com Install a second WordPress instance for a course you’re taking yourdomain.com/course1
photos.yourdomain.com Install ZenPhoto for a public photo gallery of your photos yourdomain.com/photos
docs.yourdomain.com Install MediaWiki for a club you belong to that wants to collaboratively edit its bylaws yourdomain.com/docs
files.yourdomain.com Install OwnCloud so you can access your files on your laptop and at work yourdomain.com/files

This is just an example of a way to organize your site and then use different sections to do different things. There is no one solution to this challenge, and what you do should be driven by what makes sense to you. To start, you may just want to install one thing at the “root” of your domain, and then let the rest evolve as you get to know more about what’s possible.

Map Your Domain (or a Subdomain)

If you already have a digital presence that you’d like to pull into your Haverford Sites space, domain mapping is an option you may wish to explore. This allows you to assign your domain (or a subdomain) to another service. Some services that work with domain mapping are:

When you map a domain, users who visit your URL will automatically see your space on one of these services. It’s a great way to incorporate your activity elsewhere into your domain, and it might be a good first step if you’ve already established a presence somewhere else and just want to point your new domain to that space.

Custom Menus

  1. Start at your site’s Dashboard and choose Appearance the Menus.screen shot of appearance menu
  2. In the Custom Menus interface that appears, type a name for your menu. This can be anything you want. It doesn’t get displayed anywhere; it’s used by WordPress to identify and place your menu. Once you’ve typed the name, click Create Menu.
  3. You’ll now be presented with a screen that includes a section titled Menu Settings. This is where you’ll indicate where you want your menu to appear in your theme. The number of locations available depends entirely upon the theme you choose. In the example shown below, there are two areas available; we’ve chosen to place the menu in the Top primary menu area which we know corresponds to the header menu. You may need to experiment a bit in order to find out where your menu will appear in your theme. You can always change this location later by coming back here and clicking the Manage Locations tab.
    custom menu settings
  4. Now that you’ve set up your menu and assigned it to a location, you can begin to add links to it. On the left-hand side of the screen, you’ll see what content is available to add. On the right-hand side of the screen, in the Menu Structure area, you can arrange and organize your links.
  5. By default, you may not see everything that is available to you to add to your menu. For example, posts can be added to menus, but they’re not usually displayed by default. To make more content available, click the Screen Options tab at the top of your WordPress screen, and then click off the check boxes that correspond to additional content.custom menu screeen options
  6. To add content to your menu, simply check it off on the left, and click the Add to Menu button.add items to custom menu
  7. Your new content will appear on the right, and you can drag items in the order you want them to appear. Drag items to the right to indent them under other items. This will usually make them appear as drop-down items in your menu.
  8. You can add custom links to your menu by clicking the Links section on the left. In the short form that appears, enter your link’s URL, and a text for the link. Click Add to Menu to move it to the left.Change navigation labels on your custom menu
  9. Note that you can change the link text of any item you add to your menu. This can be helpful if you have a page with a long title, and you’d like the link to not take up so much space. You can abbreviate the title in the Navigation Label section, and that shorter text will become the actual menu link.
  10. When you are done, make sure you click Save Menu.

Other Notes about Menus

When you add a Category or Tag to a menu, the link will take your readers to an archive of all the posts on your site that use that category or tag. This can be a very useful feature for organizing your content when you’re using posts to share your work.

In addition to assigning Custom Menus to theme areas, there is a default Custom Menu widget that you can put in the sidebar of your site. This is useful for creating smaller, customized navigation for your site.

If you forget to click Save Menu after making changes to your menu location or content, you will lose your work!