wordpress with chameleon theme.pdf
TRANSCRIPT
Webpages and Blogging through Wordpress
withThis tutorial is intended for users who already have some experience with Wordpress
creation of new web pages with the Chameleon theme. However, it can come in handy for users who
want to transition from another Wordpress theme to Chameleon.
Chameleon Theme Overview
1
Webpages and Blogging through Wordpress
with Chameleon Theme This tutorial is intended for users who already have some experience with Wordpress. It covers the
creation of new web pages with the Chameleon theme. However, it can come in handy for users who
want to transition from another Wordpress theme to Chameleon.
Chameleon Theme Overview
Figure 1 - Chameleon theme
Webpages and Blogging through Wordpress
. It covers the
creation of new web pages with the Chameleon theme. However, it can come in handy for users who
2
Setting up and creating content
1. Log In
You can Log in on the page https://muse.union.edu/your-username/wp-login.php (fig. 2)
Figure 2 - Login form
Your user name is your Union email account (without “@union.edu”). The password is your Union email
password. After you log in you will be brought to the Dashboard page. From here you can create and
modify the content of your web pages.
2. Set up the Chameleon theme
In the menu on the left, go to Appearance and Themes. In the list of themes, find Chameleon Theme and
activate it.
Figure 3 - Dashboard
3
3. Preview the site
Let’s see how the Homepage looks. Click on your name displayed in the dark grey bar in the upper-left
corner of the screen (fig. 4).
Figure 4 - Click to view the Homepage
Tip: open the Homepage in a new tab so that you can modify the content in one tab and see the effect
in the second one. Remember to refresh the page whenever you make some changes to it. Otherwise,
you will not see them.
The page should look like fig. 1, except it has no content yet.
4. Create a new page
Go back to the Dashboard page. In the left menu, click Pages and Add New. (See figure 5)
Figure 5 – How to add new page and change the template
You will be taken to the page shown in figure 6. Type the name of your page and its content. You can
also select the template or featured image.
5. Add featured image
Click Set Featured Image to add an image that will be shown on the page and also as a thumbnail on the
Homepage. In the new window you will be able to upload a new
(basically an address of the image somewhere on the internet) or select an image you have already
uploaded. Note that the window allows you to edit the image, use a thumbnail of the image and more.
After you save all changes and publish the new page, the homepage should look like figure 7 (except for
the featured image – you will have your own).
Note: if the homepage still looks the same (
Chameleon Theme Options, scroll down and click
shown in figure 7.
Figure 7 - The look of the homepage after creating the first page
4
Figure 6 - Adding New Page
to add an image that will be shown on the page and also as a thumbnail on the
Homepage. In the new window you will be able to upload a new image from your computer, use an URL
(basically an address of the image somewhere on the internet) or select an image you have already
uploaded. Note that the window allows you to edit the image, use a thumbnail of the image and more.
hanges and publish the new page, the homepage should look like figure 7 (except for
you will have your own).
Note: if the homepage still looks the same (New Page 1 links are not displayed) go to Appearance
scroll down and click Save. Now the homepage should look like the picture
The look of the homepage after creating the first page
to add an image that will be shown on the page and also as a thumbnail on the
image from your computer, use an URL
(basically an address of the image somewhere on the internet) or select an image you have already
uploaded. Note that the window allows you to edit the image, use a thumbnail of the image and more.
hanges and publish the new page, the homepage should look like figure 7 (except for
Appearance ->
. Now the homepage should look like the picture
5
6. Add a new post
Go back to Dashboard. In the menu on the left, click Posts and Add New. (See fig. 8) The page for adding
new posts looks very similar to the one for adding new pages. Type the name of the post, its content
and set the featured image. Then publish the post.
Figure 8 - Adding new post
Note: when adding Featured Images make sure they are large enough to be displayed in the Featured
Slider! Using images that are too small will cause the Featured slider not to display them, just blank
space. The minimum size should be approximately 980x340px.
Configuring the appearance through epanel
Epanel (fig. 9) allows you to control your website. Additional features allow you to toggle on and off
features, adjust the layout, and manage colors and more.
7. Set up the Quote Lines and the Content Areas
Create two new pages and two new posts as described above. When creating new pages try using the
“Full Width Template” (see figure 5 to change the template) or other templates to see the difference.
Then go to Appearance -> Chameleon Theme Options. The page now displayed is called epanel (See fig.
9).
Click Homepage tab at the top of the screen. You will see boxes named
2 Text, Content Area 1 Page, Content Area 2 Page
The quote lines are displayed on the homepage (see fig. 1). Change them to whatever you want. (We
changed the first line to “Union College” and the second to “Redefining the Liberal Arts”). You can also
disable them. The content of the Content areas (see fig. 1) can be set from the dropdown menus. Set it
so that every Content Area contains a preview of one of the three pages we just created.
Figure
6
Figure 9 – The epanel
tab at the top of the screen. You will see boxes named Quote Line 1 Text
Content Area 2 Page and Content Area 3 Page - See figure 10 for detail.
The quote lines are displayed on the homepage (see fig. 1). Change them to whatever you want. (We
changed the first line to “Union College” and the second to “Redefining the Liberal Arts”). You can also
ble them. The content of the Content areas (see fig. 1) can be set from the dropdown menus. Set it
so that every Content Area contains a preview of one of the three pages we just created.
Figure 10 – Settings at the Homepage tab of epanel
Quote Line 1 Text and Quote Line
See figure 10 for detail.
The quote lines are displayed on the homepage (see fig. 1). Change them to whatever you want. (We
changed the first line to “Union College” and the second to “Redefining the Liberal Arts”). You can also
ble them. The content of the Content areas (see fig. 1) can be set from the dropdown menus. Set it
so that every Content Area contains a preview of one of the three pages we just created.
8. Change the logo
To change the logo, go to epanel. The first option allows you to change the logo. Click
Then you can either upload a new image or use one of the existing images. Then save the changes. After
you set the logo, compare your homepage with figure 11
displayed in front of the image, go to
Figure 11 - the homepage after adding some content and changing the logo
9. Set up Featured Slider
By default, the Featured Slider (see fig. 1) is set to load content from the last three Posts. If you want to
change the featured slider to the content of your pages, g
the top of the screen. Then click the button in the
10. Place Thumbnails on Pages
By default, when visiting pages that have a featured image, the featured image is not displayed. (Fig. 12)
7
The first option allows you to change the logo. Click Upload Image.
Then you can either upload a new image or use one of the existing images. Then save the changes. After
are your homepage with figure 11 – it should look similar. If there is text
displayed in front of the image, go to Settings -> General and remove the Tagline.
the homepage after adding some content and changing the logo
(see fig. 1) is set to load content from the last three Posts. If you want to
change the featured slider to the content of your pages, go to epanel and click the Featured Slider
the top of the screen. Then click the button in the Use Pages box.
By default, when visiting pages that have a featured image, the featured image is not displayed. (Fig. 12)
Upload Image.
Then you can either upload a new image or use one of the existing images. Then save the changes. After
it should look similar. If there is text
(see fig. 1) is set to load content from the last three Posts. If you want to
Featured Slider tab on
By default, when visiting pages that have a featured image, the featured image is not displayed. (Fig. 12)
Figure 12 – New page with the Thumb option disabled (no thumbnail is displayed)
To place a thumbnail of a featured image on the page, go to
Single Page Layout. Enable the Place Thumb on Pages
image in figure 13.
Figure
Setting up a blog
Create a new page and set its template to
listed on this page. You may exclude the “Uncategorized” label from the menu bar. To do so, go to
epanel -> Navigation -> Categories
(the green icons will change to red crosses after dis
8
New page with the Thumb option disabled (no thumbnail is displayed)
To place a thumbnail of a featured image on the page, go to epanel -> Layout Options and click the
Place Thumb on Pages option. Now, your pages should look like
Figure 13 – Thumbnails are now displayed
Create a new page and set its template to Blog Page (See fig. 14). Now, every post you create
listed on this page. You may exclude the “Uncategorized” label from the menu bar. To do so, go to
> Categories and exclude the “Uncategorized” category from the navigation bar
(the green icons will change to red crosses after disabling them).
New page with the Thumb option disabled (no thumbnail is displayed)
and click the
on. Now, your pages should look like the
(See fig. 14). Now, every post you create will be
listed on this page. You may exclude the “Uncategorized” label from the menu bar. To do so, go to
and exclude the “Uncategorized” category from the navigation bar
9
Figure 14 - Setting the Blog Page template
Getting more help
To get more help, please visit http://www.elegantthemes.com/gallery/chameleon/readme.html (also
accessible via epanel), http://codex.wordpress.org/ or http://wordpress.org/support/.