Webmaster Guide

Webmaster Tasks

The task of a webmaster is to do anything and everything needed to keep the site running at its maximum performance and usability. This could range from anything from fixing a little bug showing up on a webpage to having to incorporate a new theme for the whole site. Starting off, you should definitely familiarize yourself to Wordpress and Bluehost. Although a webmaster typically handles coding, the site is running on Wordpress and just knowing your way around the dashboard can usually help solve problems. As a webmaster of Manual Redeye, about 30% of your work is coding and a good 70% is from working with Wordpress. Bluehost is where you would handle coding and file managements. If you need to do some coding on the site, you will probably have to use Bluehost. To read more about Bluehost, jump to the #Database and Files and #Backups sections. It is crucial to keep Wordpress and all its plugins updated. Some bugs and problems can be solved through a simple update. Besides patching up and fixing bugs, updates could help the site to run more smoothly overall. Currently, comments posted onto the site must be regulated by Webmasters. No comments will be visible on the site without the approval of a Webmaster. When comments are posted, it is the Webmaster’s responsibility to approve, delete, or mark the comment as spam. The Webmaster is also in charge of any changes on the website. The site should be kept consistent and any inconsistency should be patched. New changes to the layout should be approved by an administrator on the Redeye Staff. Don’t go around making changes on your own.

The Dashboard

After you login into Wordpress using the "Log In" button in the bottom right corner, you will be greeted by the dashboard. The dashboard links to everywhere in Wordpress, so you will quickly become familiar with it. In the top right corner of the screen is your name and profile picture, which links to the management pane for your user. In the top left corner of the screen is a small comment icon that will notify you if there are new comments posted on the site that need to be approved. To the right of that is a refresh icon that will notify you whether there are new plugin updates to install. Always update your plugins when new updates are available to keep the site performing at its peak. The "BackWPUp" button is a quick link to manage backups, and the "Performance" button manages site caches. On the left of the page should be a sidebar that will allow you to essentially the entire Wordpress dashboard. Hover your mouse over the buttons to access their submenus. Expanding the sidebar will help in finding the purpose of each menu. The last button in the sidebar should allow you to toggle between expanding and collapsing the menu. The dashboard is customizable. You can click and drag the boxes under the dashboard to position them to your liking. It is also possible to remove boxes that you do not want to see in your dashboard. To do this, simply click on the "Screen Options" in the upper right of the screen. You will find checkboxes that can be used to show or hide certain elements on this sidebar.

Styling

As a webmaster, one of your jobs will to be to, “make the site look nice.” There are lots of ways to do this through the wordpress dashboard, but proper styling can get much, much deeper. This article will cover changing styling through the Wordpress interface and through coding using CSS and PHP.

Wordpress Dashboard

The Wordpress dashboard offers many options to work on the theme of the site without having to code. Currently, RedEye uses the Newspaper theme created by TagDiv. Extensive documentation exists for this theme, located at the theme documentation. The home page is located in the Pages tab (find “Homepage” and click the “Edit” button under it). This loads a layout editor where style, color and links can be chosen; everything is pretty straightforward. Documentation for this can be found at the TagDiv documentation, as linked above. Make sure to save the changes with the Update button when finished. For links, always use relative links. For example, to link to the Sports category, fill in “category/sports” instead of “http://www.manualredeye.com/category/sports”. This will ensure that the link will always work if the site is moved. For the rest of the site, click on “Theme Panel” in the sidebar menu. This section of the site is used for the header, footer, category theming, post theming, and colors. The TagDiv documentation above has extensive information on how to use this panel. The “Background” and “Custom CSS” sections should be completely ignored; these things are handled in the CSS of the Child Theme. See the CSS Section #CSS Styling for more information. Remember to hit the save button when finished. If the menus need to be edited, this is handled in “Appearance -> Menus” The top menu is called “CatNav” (Category navigation, nothing to do with cats). Items can be added, removed, and icons changed with extreme ease. Widgets are also handled by the Appearance menu (Appearance -> Widgets). Widget sidebars can be managed for both the homepage through the Homepage visual editor and articles/categories through the Theme Panel. By default, they should be descriptively titled. “FrontPage Mid” is the group of widgets to the right of the Academics, Sports, and Local categories. “FrontPage Bottom” is the group of widgets to the left of the Opinion and Creative categories. “Category” is the widget layout for category pages and article. “Article” is useless as of now, but may be useful if future webmasters want to make separate article widget layouts. To add a widget, drag the template from the left side into the section you want. To remove a widget, drag it from the section it is currently in to the right side. Make sure to save when finished working on menus, but widgets automatically save. One specific widget worth mentioning is the Countdown widget. This widget is handled by a javascipt script (countdown.js, located in the webroot). To call the script, a first line must be called to import the script. The second script block is to call the script now that it has been imported. Variables must be added to the countdown, like height, width, the date (contains various variables such as day, month, hour, AM/PM (ampm), and the highest interval to count (display months to the date, or days to the date?)). Here’s an example:

<script type="text/javascript" src="/countdown.js"></script>
<script type="text/javascript">
new Countdown({year: 2015, month: 6, day: 5, hour: 2, ampm: "pm", minute: 20, width: 325, height: 60, rangeHi: "month"});
</script>

This counts down to the end of the 2015 school year in a box that’s 325 pixels wide, 60 pixels high, and displays at most the number of months until the end of the year. Many more options are available to the countdown, this site has the full documentation and excellent examples.

CSS Styling

This is a relatively complex but powerful tool of the webmaster. The TagDiv Wordpress Newspaper theme comes with default CSS, but the RedEye customized child theme overrides certain sections of it. A “child theme” is a theme that inherits a main theme but overrides certain sections as specified by the webmaster. To access the CSS in the child theme, login to Bluehost, go to the File Manager #File Manager, and navigate to webroot/wp-content/themes/Newspaper-child. Open style.css with the Edit button. CSS is a whole language that will not be covered in this wiki; there are plenty of sources to learn proper CSS coding. What should be noted in this theme is that, whatever a webmaster changes, they MUST add a comment describing what it does. Comment are started with “/*” and ended with “*/”.

To know which elements to change with CSS, Chrome and Firefox come with Inspection tools. On the RedEye homepage, right click on an element (logo, text box, button) and click “Inspect Element.” This will open a dialogue that will show the layout of the page and all of the CSS attached. The CSS can be updated for your computer only in this page; however, all changes will be lost upon a refresh. This tool is useful for testing if certain code will work before saving it for all of RedEye.

HTML, PHP and JavaScript

These are actual programming languages. PHP is the code that creates the HTML for the website. For example, the Subsrcibe button is created with PHP. Static HTML cannot change itself based on whether a user is logged in, which articles are present, etc.; this is the job of PHP. Javascript functions more with CSS, changing styling based on certain elements. Both have many uses, but should be changed very rarely. Don’t edit any code of either unless you know what you’re doing.

Plugins

Plugins are ways to extend and add to the functionality that already exists in WordPress. There are 3 kinds of plugins:

• Actions are functions which launches during execution, or when specific events occur
• Filters are functions which parse data before it is stored or displayed
• Widgets are also known as "sidebar accessories" which are WordPress Plugins or addons to your WordPress blog sidebar

Adding Plugins and Plugin Status

To add a new plugin, simply log into Wordpress, hover over plugins and click on add new. From here you could directly search up plugins in the search bar and install them or view the categories of plugins. You could also find plugins at https://wordpress.org/plugins/ #CSS Styling. If you choose this option, you would have to download the plugin, log into Wordpress, go to the appearance panel, and click on plugins. Once there you can click on upload plugins to install them. In order for plugins to take effect onto the site, make sure that they are active. Some plugins require additional steps for them to take effect onto the site. Read the descriptions of the plugins before installing them to make sure that you have met all the requirements.

Once installed, plugins can take on two status; active and inactive. When plugins are active, they can impact and affect the site. When they are inactive, they are disabled and have no affect on the side. Some plugins, like “Snows, balloons, and more” ideally should be kept inactive until needed. Under the plugin tab, there is also a section labelled as drop-ins. Drop-ins are advanced plugins in the wp-content directory that replace WordPress functionality when present. These are basically part of the Wordpress packet itself and shouldn’t be touched. Plugins, for the sake of organization, should be constantly managed. Plugins that are not used or are no longer functional on the site should be deleted and replaced, if possible.

Database and Files

Any real website consists of two parts: the filesystem and the database. Users, comments, articles, dashboard preferences, etc. are stored in the database. Images, stylesheets #CSS Styling, PHP code, backups, etc. are stored in the filesystem. Both cannot be accessed using Wordpress. Accessing either of these is done through the company who we rent the actual server from. Currently, we rent the server from a company called Bluehost.

Bluehost

To log into the true guts of the RedEye website, you will need to log into Bluehost. Navigate to bluehost.com #Bluehost and click the “Log In” button in the top right corner. Mr. Miller can provide this login, it is separate from your Wordpress login. After logging in, you will be directed to cPanel. cPanel is an application that Bluehost (and many other hosting providers) uses to allow users access to the server. There are a lot of buttons, but the two you will use most are the “File Manager” and “phpMyAdmin.”

File Manager

This is what Bluehost is most commonly used for. It’s fairly easy to navigate, but with a couple nuances: Be careful with the delete button. There is no recycling bin, when you hit the delete button the file or folder is gone forever. The “Code Editor” and “HTML Editor” are relatively buggy. Always use the “Edit” button when changing code. Be careful to pay attention to permissions. Wordpress should handle them by default, but if you need to change a permission settings, make double sure it’s the right one. A bad permission can give an attacker access to the database password, where they can do an extreme amount of damage. With that said, there are certain important folders in the filesystem. When you log in, this is the base or “root” (denoted by a “/”) of the server. “/Backups” are where the automatic backups #Backups are stored, and “/public_html” is where the website is stored. “/public_html” is also commonly referred to as the “webroot”.

Almost everything a webmaster needs to deal with is inside the webroot. Here are some important files and folders: background.jpg is the website background, as configured by the customized RedEye CSS #CSS Styling favicon.ico is the little redeye logo that appears in the RedEye tab you have open. sonderfeed is the file that iTunes uses for publishing new episodes of Synapse. wp-config.php is the lowest level file that Wordpress uses for configuration. This i where the database access and other important things are stored. If this file is compromised, the site is pretty much screwed. onebluewall is the folder where One Blue Wall keeps its website. It can be accessed at http://www.manualredeye.com/onebluewall sondermedia is the folder where Synapse uploads its podcasts in an .mp3 format. yearbook is a folder that holds the Yearbook website. Unlink One Blue Wall, it doesn’t appear that yearbook has touched their site in ages. We leave it there because the site is tiny. wp-content is the folder where most of the site content lies. It holds the themes, plugins, photos, and more. The site theme is stored in webroot/wp-content/themes/Newspaper-child. This is called a child theme because it inherits a larger theme (webroot/wp-content/themes/Newspaper). You can add custom CSS #CSS Styling here and learn more about child themes here

Database

Very rarely should you go into the database. The login for it is stored in wp-config.php (don’t change it or the site will break). You can do a lot here, but it is very easy to break something. For example, there is a way to disable all plugins through editing the database if you cannot access the Wordpress Dashboard. It is a last case scenario, however. Database backups can be restored through this interface, but it is better to use the Wordpress Dashboard to do so.

Backups

As stated in the Database and Files page #Database and Files, backups live in /Backups. There are two types of backups that are currently regularly scheduled: database backups and file backups. Database backups make a copy of the database at that time, and currently happen once every 3 days. File backups copy the webroot (with some exceptions) completely, once every week on Sunday.

BackWPUp

BackWPUp is the plugin used to backup the website. You can access it on the left panel of the dashboard, near the bottom. The program has “Jobs” that are run. A job is essentially just a backup, but you can create multiple jobs that backup different things. For example, the database backup is one job and the webroot backup is a different job. A third job exists in BackWPUp, called “Website Backup (full).” The normal webroot backup only saves images uploaded during this year, but the full backup will get all images. This is done because the full backup is so large that regularly backing it up would be insane. This full backup has to be run manually.

These jobs are run on a schedule. To edit a job or its schedule, click on a job in the “Jobs” pane (below BackWPUp on the left sidebar). The “General” tab handles the basics, like the backup name, type, and file compression. The “Schedule” tab is how you regularly schedule automatic backups. Scheduling time for a backup is relatively straightforward, but it is very important to note that the backups are in 24-hour time. 2h0m is 2AM, while 14h0m is 2PM. The rest of the tabs change depending on the settings set in “General”, but these are all, again, pretty straightforward.

Backup Issues

The current backup system has many complex issues. The backup is called in PHP by BackWPUp, which is easier but has issues with enormous backups (hence why the backups have to be split up). Additionally, there is no external site backup, so if something gets into the Bluehost side of the server, the attacker could also wipe our backups. A much better approach would be to use Bluehost’s built-in backup utility, available after the Bluehost login dashboard. An incremental backup system (a backup that builds on top of itself) would also be significantly better than the current setup by saving a large amount of space. Finally, a system to occasionally save backups at an external source (on Miller’s computer, for example) would provide peace of mind in case something really bad happens at Bluehost. It’s unlikely, but having that backup is better than losing 6 years of student work.

Basic Skills

There are a few things you should be able to do daily when necessary. They are:

1. Update the countdown
2. Create sidebars
3. Update the background image
4. Edit and Reorder J&C pages on the footer
5. Add and remove categories

Update the countdown

This is arguably the simplest task. If you go to "Appearance > Widgets" there will be all of the widgets that are currently active. Under "Frontpage Mid" there is the countdown widget. Open up the code and change the necessary days, months, and time. Then hit save.

Create sidebars

On the dashboard, the Theme Panel contains a very diverse amount of tools. In the Theme Panel, under Layout Settings, there will be all the categories listed. Each category can have a specific sidebar. To create one, just create one from the drop down list.

Update the background image

Under Misc in the Theme Panel, you can upload images. I advise that the image is on the server or website so that it can be edited if necessary.

Edit and Reorder J&C pages on the footer

Headers and footers are found in "Appearance > Menus" from the Dashboard. The footer is called ManualNav. Everything is self-explanatory from here on out. Also everything is drag and drop.

Add and remove categories

Categories are found in "Posts > Categories" on the Dashboard. Here you can edit all categories. Make sure that when you create a category, you add the appropriate sidebar. Look at the #Create sidebars section for more information.