When you are editing using the X-Theme's Cornerstone page layout tool, you can drag and drop any of the Elements and Sections around the page. Basically everything is drag-and-drop to most anywhere you want to put it.

All pages, with the exception of the News page (if you use a new's page) are designed in the X-Theme's "Cornerstone" page layout tool. Choose "Edit with Cornerstone when editing pages". For the news section it is easier to add content to those pages (as they are typically simple layouts) by using the built in Wordpress page editor and not Cornerstone. The News page itself is not a page to be edited, it just holds the system for managing news posts. To create a news post, in the left black bar however over "Posts" and choose "Add New". When done, click Publish in the upper right. Note: as the News feature of this site is currently turned off, you cannot currently create a new news post.

Creating a News Post

Text instructions, with screen-grabs below.

  1. Clone the pre-build draft, to create an easy starting point
  2. Add your new story's title
  3. Modify your post's content, adding text and pictures

Clone the Draft
Go to Posts in the left black bar. Hover over "Post Template-Draft" and click "Clone". The duplicated version will be just below the original draft version, however it really does not matter which one you choose to start a new news post with. See some screen grabs in the accordions below.

Enter your news story's title
In the Posts section of the left black bar, hover over the draft you just cloned and click "Quick Edit". In the Title box, enter your news story title. Change the Status box from Draft to Published, then click the blue "Update" button. 

Enter the content of your story
In the Posts section of the left black bar, hover over your newly titled news post and choose "Edit with Cornerstone" You should see the title that you just entered at the top of your new post. A single text-block (Text element) has been set up where you can enter your story. Of course, remember to save when done.

Putting images into your news story
As news stories are typically simple layouts, it's easier to just insert your images right into where you type your text. Position your cursor where you want to place an image, then click the small square image icon. The Media Library will pop up where you can upload your image. After inserting your image you can click the image, click the small pencil icon on the pop up menu, then choose how you want your image to be justified.

Sorting the media library
You can simply upload an image to the Media Library, and put it in your page, however to the left of the media library's screen is a folder called News. If you want to keep your media library organized, first click News, then upload your image. Quirk: After your image is finished uploading, you need to again click the News folder, and the image you just uploaded will be visible.

Featured Images
If you expand the featured images accordion below you will see a screen grab of a main News page, showing a bunch of news articles together. You will see that the Sewing Machines news post has a picture with it, while the other two posts are just text. That image is called a “Featured Image”. And adding a featured image can really add some life to your main news page.

To add a Featured Image: In Posts in the left black bar, hover over a news story and click Edit. On the right sidebar, scroll down until you see Featured Image and click the box to insert your featured image. Featured images need to be designed with a somewhat square aspect ratio. If the picture is too elongated left to right, and there is a person in the image, then their head might get cut off when the featured image is displayed.
 
Featured images do not appear in a post when someone clicks on "Read More" to read an entire news post. So if you want the same picture in your individual news post pages, insert it using the "Putting images into your news story" instructions above.

Adding Content

To modify existing text you can simply double-click the text and just begin adding or modifying, or you can click once on the text, then click "Edit Text" in the left white sidebar. When you are editing text in the left white sidebar, there are two small tabs at the top where you can switch between text-view and code-view.

There are different "Elements" (see the Elements panel in the left white sidebar) which you can drag and drop onto the site. Most of the site uses Text elements, Image elements, and a few Accordion elements. When you are using a Text element, you can do pretty much everyting you might do when construction a page in say MS Word, like add text, add a picture, or make some text a link.

So we could have put up all of the content on the website by just using various Text elements all over the site. The reason we put up many of the pictures using the Image element, is that the Image element provides more control over things like the space around the picture and the picture's drop-shadow.

When you click "Add New" to create a new blank page, you need to go to the left white panel and first add a "Section" in which to then add various elements—like a Text element. You can drag and drop any element into any section. Typically you would create multiple sections and keep similar content together in each section. Section can also be dragged up and down the left white sidebar, to rearrange the order that the sections appear on the page.

The website has various "Elements" on it, e.g. Text, Image, Accordion. Depending on which element you are using, where you input the links URL can be different. If you are just linking text to a particular page, you can highlight the text using the left side-bar's "Edit Text" area, click the link icon, click the small gear icon that will pop up, then choose your page. You may want to make text links bold so they stand out better.

If you are linking to a page that is not on the website, or anything that does not have the website's top navigation bar, like a PDF document, set up the link so that it "Opens in a new Window". That way when the person is done viewing that content, the website is still visible in one of their browser's tabs. Basically all links that display content which does not have the COHS menu-bar at the top should be set to open in a new window (browser tab).

For some of the other Elements on the site, like the green "Button" element, you would click the button and then in the left white sidebar you would check the "Link" checkbox, A section will be added below the checkbox for adding your link. Those links require you to type in the appropriate page on your site (or elsewhere) that you are linking to.

When you type in a link to a location within the site you do not need to use the entire page's address So instead of www.childrenofhopeschool.org/children, you can just set your link to a relative link like "/children/" (without the quotation marks).

Adding Text

If you copy and paste text into the website, the text you insert into a page can bring with it the formatting from wherever you copied it from...like an email or Microsoft Word. It is advisable to "Clear" the formatting of the text you copy and paste into a page, before you adjust the styles of that text on the website. If you do not clear external formatting, that can clog up pages with unnecessary coding, which can slow page load times. And not clearing text can make it impossible to use the Cornerstone controls for formatting text.

There are three ways that you can clear the formatting of text.

  • Click the "Paste as text" icon to past your text without its external formatting.
  • Past your text the way you normally paste things, select that text that you just pasted, press the "Clear formatting" icon to clear the text's external formatting.
  • Before you paste your text, clear its formatting by pasting it into a simple text editor, then copy it from the simple text editor and paste it into your webpage.

Their are two places that you can either "Paste as Text" or "Clear Formatting".  See the accordion below.

Adding Images

When you choose an image from the Image Library, on the right sidebar you can choose the three different sizes that Wordpress sets up for you: original, medium, and thumbnail, which is a square version primarily useful for headshots and such, and you can choose its justification. After inserting an image inside of a text element, you can click it in the left sidebar, then click the pencil icon to further adjust it.

When adding images it is best to first optimize their file size and quality setting to improve page load speeds. An image file size somewhere under 100 KB and a medium quality setting is a good starting point, with the dimensions in pixels being dictated by how big you want it to be on the page. For medium sized pictures, uploading a picture that is not larger than approximately 1000 pixels wide by 1000 pixels high is probably best. If you put too many large pictures that are say 250 KB each on a page, that will significantly slow down the page load time.

Images are uploaded to Wordpress's built in Media library, which you can access from the left black bar by clicking "Media". With the default WP media library you just get one location to store all of your pictures, all in one place, and usually sorted by the last picture you uploaded first.

We have installed a plugin that adds folders to the default WP media library. We can rename the folders anything we want, however the free version of this plugin only allows for a limited number of folders. Any image in the image library can be drag-and-dropped into any folder, for sorting purposes.

When you upload an image, first click on the folder that you want to put the image in, then click "Upload Files" at the top. After you have uploaded your pictures to a specific folder, click that folder again to see the pictures you just uploaded—clicking the folder again refreshes the media library.

Alt Tags, Descriptions, and Captions:

Each picture you upload should have at least an Alt Tag, as that is used by people with visual impairments so that their screen readers can verbally tell them what the picture is about. Also when search engines like Google give the website a Page Rank, they look for Alt Tags as one of the many ways that they rate a website. In the Media Library, click a picture to changes it's title, description, alt tag, or caption. There are forward and backward arrows at the top of this panel which you can used to navigate to the next and previous picture.

  • Title: a name for your own reference purposes—defaults the the actual file name you used when you created the picture. Changing the Title does not change the actual file name.
  • Alt Tags: hidden text that describes the picture.
  • Descriptions: Similar to Alt Tags in that they also describe pictures. Some themes and galleries can use the description to display that text on the page.
  • Captions; Captions are the text that pops up when you hover a picture or other element on the site. You can use captions as short descriptions, but you can also type in something that tells people what to do next.

Elements & Presets

If you go to the top of the left white sidebar, you will see a tab for Elements. Elements, like Text, Image, and Accordion, can be dragged and dropped into any Row or Column on a page. If you drag a Text Element onto a page, you will see that it starts with some default text, which you can then modify.

As well as modifying the contents of the Element itself, like its text or the image in an Image Element, there are many setting in the left white bar that you can use for things like positioning the element (margins and padding), and for things like adding a drop shadow.

Presets allow you to remember the left white sidebar settings you chose for one element, and a apply them to another element of the same Element type. For example, you can save the settings for a Text Element and apply those to another text element.

To create a new preset: After finishing with your settings in the left white sidebar, again in the left white sidebar click Save Preset. Give the preset a name. To apply a saved preset to another element, click the element on the page, in the left white sidebar click the small down-arrow beside "Apply", choose your saved preset to apply, then click the Apply button. You can choose to apply only the white sidebar's settings, or both apply the white sidebar's settings and replace the contents of the element with whatever contents the element had when you first saved the preset.

We have set up a few Presets for the following:

  • Image Shadow: The shadow that you see on all of the image within Image Elements (most of the images on the site).
  • Career Text: for the "I want to be a Teacher" text that is above some of the students' pictures.
  • Date as of: for setting up the dates a sponsor has sponsored a student
  • Text Drop Down Shadow - Small: Currently only applied to the "Jaipur India" text over the big picture on the History page.

Adding Shadows to Images

If you insert an image using the "Image" element, you can click the image and at the very bottom of the left white sidebar setup panel you can add a shadow to the image's box. Rather than do this for every new image, it's easier to just use an existing image, that already has a drop shadow, and duplicate it. Click an image, click "Duplicate", then replace the duplicated image with the one you want.

If you add an image to a page by inserting the image within some text in a Text element, instead of the Image element, you do not have a left-sidebar control for adding shadows to the image. However, there is a CSS class code that you can attach to images you add inside of a Text element that will add a shadow.

After adding the image, click the image, then click the small "pencil" icon. In the panel that pops up you will see a box titled "Image CSS Class". Add "image-shadow" to this box, save the panel, and then save the page. This image-shadow is set up with some CSS code in the "Additional CSS" section of the X-Theme's "Customize" section. If you modified the shadows settings for ".image-shadow", you would alter the shadow on all images that have been tagged with image-shadow. The picture of how Diksha looked before she was a student on the Children page is an example of an image that was inserted into a Text element, with a shadow added using the "image-shadow" CSS class code.

Creating a New User

Go to the "Users" page in the left black bar, then at the top left click the "Add New" button. To edit or delete a user, hover over any user and choose either "edit" or "delete".

  • When you add a new user you cannot have the same Username as any of the other website account holders' usernames, so you might want to create usernames like "JohnB" and not just "John". And once you create an account with a particular username, you can not go back and change that username.
  • Make sure that new users are set to "Subscriber", which is the default. Subscribers can not edit the website. If you do want to give a particular User access to edit the website, change their role to "Admin".
  • Click on "Show Password", and then you can change the automatically generated password to anything you want, like their last name.
  • If you uncheck the checkbox for, "Send the new user an email about their account.", then you can copy their log in information and send it to them in a more friendly regular old email. 
  • Users will have the ability to change their password or email addresses and you also have that ability, so you can always change a particular user's password, and they would no longer be able to log in.
  • If you do not want to allow a user to be able to reset their password, "Edit" their user's profile, and uncheck "Show Toolbar when viewing site". That hides their black bar across the top of their site (when they are logging in), so they can't click their name in the upper right to change their profile information and password.
  1. Create a new account for the sponsor. See the instructions above.
  2. Duplicate (Clone) any existing sponsor page.
  3. Before you Edit with Cornerstone, click Edit and rename the new page, both the page name and its Slug. The Slug is what appears after the main website address, like www.childrenofhopeschool.org/sponsor-annelise-e. So the slug is, "sponsor-annelise-e", without the quotes.
  4. Note: The page name also will be the default Bookmark name that people will be presented with if they bookmark a page in their browsers.
  5. Upload this page's student pictures to the "Children" folder in the Media Library.
  6. Upload any videos for the page to YouTube
  7. Modify the content on the page.
  8. Add Alt Text to any images. Good for both the sites Google Page Rank and also so people with visual impairments can hear what the pictures are about.
  9. Set up the green buttons.
  10. Set up the "My Students" page so when a particular sponsor logs in, they are shown a link that goes just to their page.

Saving a Page & Revisions

When you press Save, you see a thin green progress-bar zip across near the top of you page, and then an upper-right green box pops up indicated a successful save. Every once in a while, if the server is running slowly, it takes a long time for the save to complete, and very occasionally there is a glitch in the saving process, and you will see a red box pop up indicating that the save did not go through. If you see the red box, try saving again.

When you press Save, Wordpress stores copies of the previous versions of your page. You can go back and restore a page to recover its content from a previous time that you saved it, replacing any changes you made after the date and time of the previous revision that you choose to recover.

If you use a database clean up plugin to optimize your database, one of your choices is to delete all past page revisions. After a while, all of the different revisions of pages that have been saved can significantly increase the size of the database, so using an optimizer plugin to clear out past revisions is recommended—probably quarterly.

Global Blocks

A Global Block is a section of content, comprising one or more elements (text, images, etc.), which can be placed in multiple places on the website, but it's content only needs to be updated from one location, the Global Block setup panel. To get to Global Blocks: in the left black bar, click on "X", then click on Global Blocks. To edit a Global Block, hover over a block, then click the pencil icon.

The website has three Global Blocks:

  • At a Glance: the statistics content found on the Home and About pages
  • Sponsor Heading: the top heading text on all of the private sponsor pages
  • Sponsor Footer: the green buttons at the bottom of all of the private sponsor pages

Caching

The "W3 Total Cache" plugin is being used to create a series of caches, including page caches. When a person navigates to a page on the website, Wordpress needs to access its connected database to build the page and display it to the viewer. With a cached page, the page is pre-built and thus served up faster. Page load time is one of the metrics that search engines use to rank your page in their search results.

If you are an admin editing the website, and you have a live-view of a page open in another browser, while you are editing using Cornerstone in your main browser, you may not see a change you make in the live-view until you "Purge Current Page Cache" for the page you are editing in Cornerstone.

To purge a page's cache: While editing the page in Cornerstone, on the top black bar, choose Performance, then Purge Current Page. Then refresh your live-view of the page.

Mail Chimp

COHS has a Mail Chimp account set up for email campaign purposes.

When people fill out either the Subscribe to Newsletter, or the Sponsor Sign Up form their email and first name are automatically sent to Mail Chimp. The reason we do not also send peoples' last name to Mail Chimp is that the free version of the plugin which handles that only offers the transfer of the first name and email.

In the Mail Chimp account you can also add individual contacts, or upload a spreadsheet (.cvs file) of multiple contacts.

Backing up the Website

  • The Up-Draft plugin is set to automatically back up both the website weekly, however as those backups are stored on the server it is recommended to occasionally download one of the backups that Up-Draft has performed. Probably quarterly, or after major website changes. UpDraft Plus is set to only store the last 20 backups on the server, however the number of backups that UpDraft will save can be changed.
  • UpDraft Plus will backup both the website's pages, any assets you have uploaded, the theme, the plugins, and the database where the website's content is stored.
  • You can use one of the UpDraft plus backups to restore the site to the date of that particular backup.
  • An UpDraft Plus backup can take a while to complete. You will see a message indicating if a backup was successful or not, and you can go to a different page, or even log off, while a backup is going on.
  • You might want to yearly do an FTP download of all of the files in the HTML folder, and a download of the website's database from the website server account, just to have an extra backup.
  • Check with your hosting account, as they also may be providing a built in backup feature.
  • While UpDraft provides for a very complete backup, and you really do not need to use other methods to back up the site, you may want to occasionally backup and download the following.
  • Under "X" in the left menu bar, in the "Theme Options Panel", you can download an "XCS" (.json) file that stores all of the various layouts that have been setup in the X-Theme's Customize Panel.
  • You can copy the Custom CCS code, found in the X-Theme's Customizer, and store that in a .txt document. The custom CSS codes have been added to provide additional styling and layout control for various things that either the X-Theme or the Plugins do not provide within their own control panels. For example, replacing the color of the top menu-bar with the black chalkboard-like image.
  • You can copy and store the HTML for setting up the various forms on the website. For each form, copy the HTML in both the "Form" and the "Mail" tabs.
  • And you can copy and store all of the shortcodes on the My-Students page, that control what text gets displayed when a particular user logs into that page.
  • Under Theme Options, then Footer, backup the footer HTML text and codes.

Updating up the Website

Before updating either Wordpress, the X-Theme, or the plugins, run a backup using the plugin UpDraft Plus. An UpDraft Plus backup can take a while to complete, and you will see a message indicating if a backup was successful or not.

  • Wordpress and the X-Theme are set to automatically update themselves, however you can check that and manually update those if you want.
  • Some plugins are set to automatically update, while other plugins do not offer automatic updates and need to be manually updated when updates become available.
  • The web-host’s PHP version may need to be manually updated to the latest version of PHP through the hosting account, when updates become available.
  • Yearly, update the copyright date in the footer. Go to Theme Options, then Footer.

General Maintenance

Always do a backup using UpDraft Plus, prior to running any maintenance routines on the website.

  • Occasionally (maybe quarterly) use the WP Optimize plugin to optimize the database.
  • Yearly check that the admins' IP addresses, which are set up in Google Analytics to block the admins' website visits, are still the correct IPs. Update their IP addresses if necessary.
  • Occasionally (probably yearly) log into the cohs1823@gmail.com Google voice account and delete the older voice mails. Also open up Google mail for this account and delete older emails. These two steps are only needed if the free 25 MB of space that Google provides is not enough to store the emails and voicemails.

Indexing

When we submit the website's Sitemap to search engines like Google, we are telling search engines not to index certain pages—to not display them in peoples' search results. That does not mean that people will not be able to view those pages, if we have a link to them anywhere on the site.  Each page that you want to hide needs to be separately set up for hiding by clicking "Edit" for that page, then going to the bottom of the page where the Yoast plugin's setup area is.

Pages that are set to noindex:

  • Sponsor Form
  • Sponsor Payment
  • Message Student
  • My Students
  • All individual sponsors' pages
  • News (The blog page, which is not currently being used)
  • Link to our website
  • Instructions
  • 404 (error routing page)
  • Privacy Policy
  • Terms of Service

Google Drive

Various assets are stored in the cohs1823@gmail.com Google account's Drive section. Inside of Drive all COHS's assets are stored in a singe folder called "ALL COHS".

  • A website To Do doc
  • A separate folder containing the larger sized logos,  accessible from the larger logos link on the Link to our Website page.
  • An individual Google Sheet (spreadsheet) for each of the forms of the website, auto populated from each form.

When you edit a Doc or Sheet in Drive, you do not need to save it. Saving automatically happens. And you can print, download, and share anything contained in Drive.

Warning: For each of the Sheets (spreadsheets) which contain the submissions from the website's forms, please do not change the name of the Sheet or the heading name for each row in a sheet. The website's forms uses the name of a Sheet and the name of each row, so it knows where to put the forms' submissions.

Sharing: Any Google Drive folder, and each of the individual items in Drive (docs, sheets, etc.), can be shared with either the public or shared privately with anyone with their own Google account. When you share something, you can choose to allow the person to be able to edit what you share, or only view what you share and not be able to edit it. If you share a folder, and give people "edit" permission, then they can edit and change the content for anything contained in the folder, and they can delete any content in the folder.