How to Build your Chapter Website in 9 Steps

How to Build your Chapter Website in 9 Steps
Before you begin, please log in and familiarize yourself with the following buttons on the dashboard home site.
When you log in to the admin area of your site, you’ll automatically be in what’s called the “dashboard.” This is
the control panel for everything about your web site.
Across the top — Visit Site and Dashboard buttons
At any time, you can click on “visit site” (button in the topmost dark gray bar) to see how your web site looks to
the public. Then just hit your back button or the “dashboard” button to return to the admin area.
Down the side — Posts, Media, Pages and Appearance
In the lefthand sidebar, youll find a list of buttonsn to control various things in your web site. The main buttons
you’ll be using are posts, media, pages and appearance.
Posts: The post button will lead you to where you can edit your home page greeting message and the mini-posts that appear in the bottom section of your home page.
Media: This is where you manage the photos you’ll be uploading to your site
Pages: This is where you can find all the pages that appear on your web site. For example, the “About Us” page can be edited here. Please note that the “Calendar” page is edited in a special place, and the Home Page is created via a series of posts, not pages, but all other pages are created and edited using “Pages.” Keep note of these distinctions, please.
Sidebar items continued...
More about Pages:
You will also be able to create and edit sub-pages in the “Pages” section of your dashboard. For example, when you are viewing your website, you’ll
see the main pages in the navigation menu. If you move your mouse cur
sor over the “About Us” page, you’ll see a drop-down box with sub-pages (chapter history, officers, advisors and members, bylaws, etc.). You can
create subpages for your menu items by creating a page and assigning it to an existing parent page. More about this in the detailed instructions.
Appearance: This is where you will choose your theme and header.
When you click “appearance” you will see two other categories— widgets and
menus. Please ignore those categories.
IMPORTANT NOTE — Be careful what you touch!
As you build your site, you will come across additional settings and tabs throughout the dashboard area. It is
absolutely imperative that you do not change any settings that have not been discussed/outlined in this step-bystep guide. Changing settings can likely break your site. As mentioned in the “Before You Begin” Guide, if your
site breaks, your chapter may need to pay for qualified, professional IT support to get your site back in order. So
we kindly ask that you follow the tutorials carefully and leave alonen all settings that have not been discussed.
So, let’s get started building your personalized Psi Beta chapter web site
STEP ONE — CHOOSE YOUR THEME and HEADER
Choosing your theme
On the left sidebar in your Dashboard, click on “Appearance.” Choose between the three theme options (Blue
Latitude, Academia, and Frost). You may preview each theme by clicking the “preview” button. Once you have
decided on a theme, click the “Activate” button. You may change your theme at any time.
Please note: The “Frost” theme has one additional mini-post that appears on the home page. Therefore, if you
choose the Frost theme you can use the additional post; however, if you later change your theme to Blue Latitude
or Academia, one of your mini-posts will not be displayed. You can always change the content of a post.
Choosing your header
Click the Appearance tab again. Then click “Header.” Choose any header by clicking the circle button next to the
header you would like to use. Clicking the “Save Changes” button after selecting a header image will move that
header image to the large preview area, as well as change your site header. So you can view the header images
larger by clicking “Save Changes,” and/or you can visit your site to see how the header looks in context. Once you
have selected a header image you like and have clicked to save, you’re all set.
Please note: Most headers will fit most school names; however, not every header will fit the very longest school
names perfectly. Be sure to use a header that works well with the name of your school. You can change your
header at any time.
If you are having difficulty finding one that will fit your school’s name length, please post your problem on our
support forum.
STEP TWO — UPDATE YOUR HOME PAGE GREETING
Accessing the greeting post edit screen
The home page greeting is the first text/post that appears on the front page of your website. You can access the
edit screen for this post in two different ways:
Perhaps the easiest way is to view your public
web site (while logged in), and click on the blue
“edit” link that
appears below the text displayed for that post.
This will take you to the edit section of the
Dashboard so you can customize the post.
Note: This “edit” shortcut appears on all posts
and pages, and will work for almost any post or
page, to take you straight to that post or page (“Calendar” is an exception. It has its own controls located in the
sidebar in the Dashboard.).
Alternate access to edit your home page welcome greeting: From the Dashboard, click on “posts” in the sidebar
and from the list, select the post that has the category “welcome post.” This too will work for any posts and most
pages — simply use the posts or pages link in the sidebar to access a link of all posts and pages in your site,
then select the post or page you wish to edit.
Special tip! Your web site is mostly built out of PAGES. Posts are only used to create the home page sections.
Be sure when you are wanting to edit a web page (besides the home page), or wanting to create a subpage, that
you use the “Pages” section. Only when you are working on your home page, you will use the “Posts” section.
Editing the greeting post title and text
First, change the title of the greeting message by replacing the current text that appears in the long, narrow title
box. Next, begin editing the content of your post in the large text box which contains default/sample content.
Delete the sample content and simply type in your new greeting message. Once you have typed in your new
information, simply click the “update” button in the righthand sidebar.
We highly recommend that you use the spell check feature each time you edit a post/page. Simply click on the
spell check button in the editor screen.
Important note! You will also notice there are two tabs— “visual” and “HTML”. You should always edit a page
or post in visual mode. Do not click on the HTML mode unless you are an HTML programmer and have a specific
purpose for editing in code format. Problems may require tech support to fix, billable to your school.
After you have updated your post, view your new page by clicking “visit site.” If you need to make any changes,
just click on the blue “edit” link again (at the end of the post on the home page) and then be sure to click
“update” again to save your changes.
Home Page Photos
Please see steps 6 and 7 to learn how to add photos to posts and pages.
STEP THREE — EDIT YOUR THREE HOME PAGE “MINI POSTS”
When viewing your website home page, scroll to the bottom and you’ll see three mini-posts.
You can use these posts for any type of content befitting home page display (announcements, current events,
upcoming meetings, conferences...). These posts are set to display the most current post first, so the order will
change as yo uupdate them. Since posts will display in the order of when they were last created, if you create or
change a post next month, that post will be listed first when viewing your web site.
Special tip! If you would like to force a certain order for these posts, simply edit the date of the post so that the
first post you wish to display has the most recent date, and so on. You may add additional posts beyond three
(or in the case of “Frost” theme, four) and the site will display the three most recent posts. To keep your web site
clean, delete old posts you do not intend to use again. Feel free to save old posts you might choose to display on
the home page again. To hide them, you can either change the date to something older than the three you want
to display, and/or you can hide them by setting their publish status (in the right sidebar) to “private.”
To edit your mini-posts, click on the title of the post you wish to edit. Scroll to the bottom ofm the post and
click on the blue “edit” link (or, again, you may select from the list of posts by choosing “posts” in the Dashboard
lefthand sidebar). This will take you to the same type of edit screen you saw when editing your greeting message.
Edit your title: Replace the post title with your own title, keeping in mind the space in which it
needs to fit. Also be sure to remove the words “(mini-post)” from the post title—
they were just there for training purposes, to easily identify “mini posts.”
Edit your text: Type in the information you would like to have contained in the mini-post. You may want to carefully select your first couple of sentences since those will be
what are displayed on the home page mini-post area, but the full post can be as
long as you want, since the entirety will display on a page of its own. Viewers will
click the “read more” link at the bottom of the mini-post excerpt and continue to
read the rest of the information you’ve typed.
Don’t forget to use spell check when you’re done typing your post. View your new post by going back to the home
page (“visit site” ). Repeat for the additional posts.
STEP FOUR — UPDATE THE REMAINING PAGES & SUBPAGES
Now go through your entire website in any order and add your personal chapter contents to each page as you
see fit, so that the pages on the site are about your chapter. We recommend starting with each of the primary
menu items: About Us, Join Us, News & Events, Articles, Photos and Contacting Us. Please note: The “Psi Beta
National” link goes to the national website and should not be edited.
Click on a menu item such as “About Us,” scroll to the bottom and click the blue “edit” link (or choose your
“About Us” page from the list of Pages accessible through the Dashboard sidebar). Enter your new content in the
text box, spell check, and then hit “update” on the righthand sidebar. Be sure to review your work by visiting the
site to see how it looks to the public.
Special tip! If there is a page in the menu that you do not wish to use, you can either change its title to something you do want, or you can turn off its public display by changing its visibility to “private” in the righthand
sidebar on the edit screen for that page (click “edit” next to the term visibility: public).
Once you have updated your primary menu items, you can update the subpages. For example, “About Us” contains five subpages (Chapter History, Officers, Advisors & Members, Bylaws, Minutes and Reports). Update these
pages the same as your top-level pages. And again, you may elect to change a subpage title to something else
entirely, or you may hide the subpage by changing its visibility to “private” in the righthand sidebar on the edit
screen for that page (click “edit” next to the term visibility: public). You may also add new subpages. See step five
for how to do this.
IMPORTANT NOTE! Be sure to go through each page and subpage to be sure the text there is what you want.
If you are electing to not add personal content to a page, review the default content that is displayed to make
sure it is appropriate, or change the page’s visibility to private so that it will not show up in the menu.
Special tip! To make your pages interesting and engaging, add photos to your pages as you create your page
content. If you would like to do this, please read step 7.
STEP FIVE — ADD A NEW SUBPAGE
If you would like to add an extra page to your website, you can add a subpage to one of the existing menu items.
You do this from inside the Dashboard, and it is a two-part process. Doing both parts is important so that your
page will show up in the menu.
PART ONE— From the Dashboard, conduct the following steps: Click “Pages.” Then click “Add New.” Enter the
title of your new sub page (a short title, 2 or 3 words). As an example, I am adding a sub-page called “Ceremony
Photos,” and I am choosing to have it appear under the menu item of “Photos.” The idea is to place your new
page under a parent page that is appropriate for the new content you are adding.
After you have added your title, select a parent page (located in the righthand sidebar). A parent page is a toplevel menu item, so in this example I want to select “Photos” as my parent page, so that “Ceremony Photos” will
fall under the “Photos” menu item. Do not change any other settings.
When you have finished typing the content of your page, click update. Your page will not appear in the menu until
you complete part two, below.
PART TWO— Click on the “Appearance” tab in the lefthand sidebar of the Dashboard. Then click on the
“Menus” tab. This will take you to the menu arrangement screen.
You will see a box labeled “Pages” that will list each
page in the website. Look through this list of pages
and find the one that you just added— it should
be at the top of the list. Mark the checkbox next to
the page name for this page you just created. Then
click “add to menu.”
Your new page will appear as a gray box at the
bottom of the menu layout to the right of the pages
checkbox list. You will need to drag and drop the
new gray box to the proper location in the menu layout. For example, I’m adding “Ceremony Photos” so
I will drag and drop my gray box titled “Ceremony
Photos” upward to fall under the parent category of
“Photos.”
EXTREMELY IMPORTANT: While you are dragging the box for the new subpage, you will notice
that some of the pages are aligned to the left while some are indented, shifted in to the right. All pages that are
aligned left are parent pages— the top-level pages in your menu navigation bar. The pages that are indented are,
quite logically, the subpages of those parent pages. When you are adding a new subpage here in the menu layout, be sure to always let it drop into an indented position. When you are dragging and dropping, you’ll find it’s
very easy to have your gray box indented to the right like it should be if you simply move your cursor to the right
while you drag and drop. This movement will help your gray box move automatically into the indented position.
IMPORTANT NOTE —DON’T TOUCH! There is a box labeled “Categories.” It lists “uncategorized, mini
homepage posts, welcome post, and so on. These are category presets specific to the Psi Beta chapter themes,
for properly displaying the home page posts and SHOULD NOT EVER BE TOUCHED. Do not check any of these
boxes. Leave these settings alone.
Another IMPORTANT NOTE! While you may add as many subpages to your menu as you wish, this is NOT
the case with primary pages– the pages displayed in the main navigation. Adding additional pages to your mainlevel navigation can result in breaking the site layout.
If you must add a new or different page, we recommend that you either 1.) Replace an existing main-level
(parent) page with a new page title of your choice, or 2.) Hide or remove an existing main-level page that you are
willing to sacrifice and then create a new main-level page (if you elect to do it this way, see detailed instructions
about changing the menu order to your liking). It some cases, depending on the length of your page titles, it
is perhaps possible to add ONE new parent page and having it fit the layout. We ask that you consider this very
carefully before doing so.
Now let’s add some pictures to the site!
STEP SIX — EDIT HOME PAGE IMAGES
Editing the photos on your home page requires a different method than adding photos to the other pages.
Because the home page is comprised of posts and special “feature images” that need to be created at a certain
size. So resizing your photos will be required for these home page posts. We’ve created a special tutorial video
explaining step-by-step how to do this. You can find it posted in the online help forum (please note: to log into the
support forum the first time, you’ll need to register yourself — requiring registration helps us prevent spam postings). The video tutorial is here: http://support.psibetachapters.org/forum/
Please note that scaling your photos is only needed for images that appear on your home page. The tutorial
shows you how to use Photoshop or a free photo software (Gimp) to create your home page images at a specific
size of 400 x 270 pixels, 72 dpi.
STEP SEVEN — ADD PHOTOS TO YOUR PAGES
There are two ways to add photos to a page on your site: Adding photos as you build the content on your pages,
or adding your photos all at once to the Media Library and selecting them as you build your pages.
There’s no single right way to do it; it’s a matter of what you prefer as you put together your pages and add
images to them. You might find that if you’ve collected photos before starting to create your site, you might enjoy
adding them all at once and then focusing on the page-building, while adding images while in progress may be a
method you find more convenient for updating page content down the road. It’s all up to you!
Adding photos as you build
Some editors find it easier to add photos to pages while they are editing the written content of each page. To do
this, go to the regular editing screen where you update the content of your page. Click on the photo icon— the
little square gray box next to “upload/insert” above your editing screen.
A pop-up box will appear. Click on the “From Computer” tab that is located at the top of the box. Then click on
“select photos” and find the photos that are stored on your comptuer. Once a picture has been uploaded, you
can select the size of the image— small, medium, or full size. You can also select whether you want the image to
appear left or right with text flowing around it, or placed in the center between paragraphs. Finally, click “Insert
to Post” button at the bottom (this is easy to miss if you’re in a hurry).
Adding all photos at once
If you would like to upload all at once a set of photos you plan to add to various pages of your website, click on
the “Media” button, which is located on the lefthand sidebar. Then click “Add New.” From there, click on the
“Select Files” button. PLEASE NOTE: Size of image can’t exceed 1 MB. Once the files have been uploaded, click
on “Save all changes.”
All of the images that have been uploaded (at any time, any method) will be stored in the Media Library. When
you are ready to place one of these pre-uploaded photo on a page you are editing, go to the page you are working
on (you know the drill, click the blue “edit” link, or find the page in the list of “Pages” accessed from the Dashboard). Once you are on the page you’re edidting, click the photo icon— the tiny gray box next to “upload/insert”
(illustrated above).
A pop-up box will appear. Click on the “Media Library” tab that is located at the top of the box. Find the picture
you would like to add, then hit “show.” You can then select the size of the image— small, medium, full size—
and the alignment, as described above. Click on the “insert to post” button.
You may also add photos as a gallery slideshow by selecting an entire gallery associated with a page and inserting it all at once as a gallery instead of individual photos. Please see the video tutorial for this in the help forum.
Almost finished!
STEP EIGHT — ADD A HYPERLINK TO YOUR PAGE
When adding page content, you can add a hyperlink (a link to another site or page on the internet) to any of your
pages via two different methods.
You can copy a URL (e.g. http://psibeta.org) and paste it into your page (in the edit screen).
Or... if you would like a cleaner look and a link that will help search engine rankings for your site, you can type
a word or phrase instead of the URL and then link the URL to it behind the scenes. For example, in a page I’m
writing for Psi Beta’s site, I might want to use the link in a sentence: “For more information on Psi Beta, visit
the official Psi Beta website by clicking here.” Highlight any word or words in the sentence, that you want to be
clickable. For example, I could highlight the words “clicking here.” But for optimal search engine recognition, it
would be best to select the most relevant words, which in this case would be “official Psi Beta website.”
After highlighting your most relevant words, click on the button (just above your edit area, in the series of icon
buttons) that looks like a ilnk of chain. It’s located next to the right-justified button.
A pop-up box will appear. In the first box, labeled “link URL”, paste the entire URL that you have copied (e.g.
http://psibeta.org). While there, if you would like your linked page to open in a new window (recommended),
select this in the drop-down menu labeled “target.” Then click “insert.”
The linked words in your page will show up blue. Be sure to test your link from your public web page when
youare finished. if you have a typo in your link or what to change or eliminate the link, just lick the highlighted
phrase one time and then click on the “broken chain” button next to the hyperlink button. This breaks the hyperlink, undoing it so you can start over.
IMPORTANT NOTE: You cannot use a link in your home page greeting message or in any other post (i.e. the
mini posts) that appear on your home page. These are special feature posts and the code won’t take hyperlinks.
STEP NINE — ADD A DOCUMENT (PDF) LINK TO YOUR PAGE
To give your viewers the beste experience and to make the most out of your web site and how the search engines
view it, we highly recommend that you type as much content as possible directly into your web pages, as live web
content (as opposed to making lots of PDF links for delivering content). But if you would specifically need to add
an external file to your website (agenda, meeting minutes, etc.) here is how.
First, we recommend that you convert your file to a PDF as this is the most universally compatible way to help
people view and download files. Once your file is in a PDF format you can upload it to the Media Library, located
on the lefthand sidebar in the Dashboard. Click “Media.” Click “Add New.” Click “Select Files.” Then select the
PDF file on your computer. After the file has been uploaded, scroll to the bottom and click “save all changes.”
When you are ready to link this file to your page, go back to the Media section and click on the title of your file.
You will see a file URL given. Copy the URL — this is the online location where the file is hosted. Go to your website home page and find the page where you want to add access to this document. In my case, I’ll be adding a
list of events file to the “Upcoming Events” page that is located under the “News & Events” menu item.
Once you’re at the page, click “edit” link (or you can access the page from the “Pages” list in the Dashboard).
Enter your text into the page and highlight the word or phrase you want to link to the document. Click on the
“chain” link icon like we did above, for adding a hyperlink), paste your file URL, set the “target” to new window if
desired, and click “insert link.” Make sure to use the spell check on your page content and click “update” on the
righthand sidebar. Then go back and view your page to see if your link is working properly.
You did it!
So, in a nutshell, those are the highlights of putting together your chapter website. You’re all finished! You can
come back at any time and edit or add new content, keeping your website dynamic and interesting. And if at any
point along the way you run into difficulties, be sure to visit our support forum. There you’ll find documents and
questions. You can even post a question for others to answer. Those of you who breezed through setting up your
site, please consider joining the forum to help others with their questions as you have time!
http://support.psibetachapters.org/forum