Webmaster Guide
Contents
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 (LINK: CSS), 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 (LINK: 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 (LINK: 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 (LINK: CSS) 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 (LINK: OBW) 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 (LINK: CSS) here and learn more about child themes here (LINK: tagdiv child theme)
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.
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 (LINK: Tagdiv). 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 (LINK: CSS) 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 (LINK: countdown.js) 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 (LINK: 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.
Backups
As stated in the Database and Files page (LINK: 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.
