Created: 11/12/2020
By: Mike McAlister
Version 1.0
I have provided several installation screencasts to get you started with the Typo theme. Be sure to pay attention, as this will help you get the theme installed with ease!
Theme Setup:
First of all, you should have WordPress installed and ready to roll. It's always recommended that you start with a fresh install of WordPress to prevent a conflict of settings from old themes, etc. Make sure you backup your old theme and your posts, pages, etc. in case of a catastrophe!
Unzip the theme package. In the folder you'll find the Typo docs and a zip titled UploadToWP.zip. This is the theme zip that you need to upload into WordPress.
In the WordPress admin, go to Appearance -> Themes. Click on the big Install Themes tab at the top of the page. Next, click the Upload link and navigate to the UploadToWP.zip file. Install and activate the theme.
Typo needs the Options Framework plugin to add the theme options. You can either click the install prompt at the top of the screen, or go to Plugins -> Add New and search for Options Framework. Install and activate the plugin.
Next you need to grab the Contact Form 7 plugin. Once again, go to Plugins -> Add new. Search for "Contact Form 7". Install this plugin. To use this plugin, you'll need to go to the Contact menu (now on the left menu) and create a form. Once you're done, it will give you a shortcode you can use in your contact page. If you've used the dummy data, this should already be in there for you.
Theme options are crucial to the Typo theme. If you didn't watch the screencasts, you can read the directions below. You must go through the theme options setup before the theme will work properly.
You'll notice under the Appearence menu, there is a Theme Options menu. Click this link.
Under Basic Settings you can upload your logo, set the link color and insert your Google Analytics code. Save Changes
Under the Social Media Links tab, you just need to enter your social media links for the icons you want to show up on the right side of the header. Save Changes.
Typo takes advantage of the new Wordpress 3.0 menu manager. Menus can be found under Appearence -> Menus. For more detailed usage of the menu manager, see this tutorial here.
You'll need to create two different menus; one for the header, one for the footer. Start with the header menu. Create a menu and name it whatever you want.
Now, on the left hand side, select the pages you would like to have added to the menu. You can then click "Add to Menu" and they will show up on the right side of the page. You can drag the pages around to arrange them the way you'd like.
Save the menu.
Now let's create the footer menu. At the top of the page you'll see a new menu button (has a + on it). Create a new menu and call it Footer. Add pages and arrange them the same way you did before. When you're finished, save the menu.
Now that you have both menus created, you need to assign them in the Theme Locations window located on the left. From the drop down menu, select the appropriate menu for the header and footer and save.
Typo has three custom widget areas, all located in the footer. You can drag and drop any widgets into place on the Appearance -> WIdgets page.
Footer Widget Area Left - Left column in the footer area.
Footer Widget Area Left - Center column in the footer area.
Footer Widget Area Left - Right column in the footer area.
I have also created a few custom widgets for this theme. Check out the Twitter and Flickr widgets.
To use the Twitter widget, go to the Widgets page and drag the Okay Twitter widget onto the appropriate widget area in the footer. Set your widget title, username, and tweet count. Save the widget.
To use the Flickr widget, go to the Widgets page and drag the Okay Flickr widget onto the appropriate widget area in the footer. Set your widget title, Flickr ID (which you can get here: http://idgettr.com), and number of photos to show. Save the widget.
Video
Create a new post and add a title and an optional text content.
Next, scroll down the page a bit and look for the Custom Fields box. If you don't see the Custom Fields box, look up towards the top of your screen and click the Screen Options drop down. Make sure Custom Fields is checked..
Now you can add the Custom Field. The Name is going to be video and the value will be your embed code. The embed code should look something like the code below. Be sure to keep your video width around 585px to fit nicely in the theme. Click Add Custom Field.
<iframe
src="http://player.vimeo.com/video/4143170?title=0&byline=0&portrait=0"
frameborder="0" width="585"
height="229"></iframe>
Once you've added the custom field, you need to be sure to select the Video post format from the Format box on the right hand sidebar.
Publish the post when you're finished.
Image
Create a new post and add a title and an optional text content.
Write your content and add whatever styling you want.
On the right hand side of your page, you'll see the Featured Image Pane. Click Set Featured Image and upload your image. Once uploaded, scroll down and click "Use as featured image". Once set, you can close the image upload window.
Once you've added the image, you need to be sure to select the Image post format from the Format box on the right hand sidebar.
Publish the post when you're finished.
Chat
Create a new post and add a title.
To create the chat styling, you simply need to alternate the conversation with line breaks. For example:
Mandi: I disagree. This conversation is terrible!
Mike: I don't even know who you are anymore.
Mike: We are having an amazing conversation!
Once you've added the conversation, you need to be sure to select the Chat post format from the Format box on the right hand sidebar.
Publish the post when you're finished.
Gallery
Create a new post and add a title and optional description.
In the post editor, click the Add an Image button to upload photos. You can choose to bring in photos from your computer or a url.
Anything you upload as a post attachment will be automatically attached to the gallery and formatted for the slider. So all you need to do is upload!
You can also arrange the order of the photos by going into your gallery and dragging the images around.
Once you've added the gallery images, you need to be sure to select the Gallery post format from the Format box on the right hand sidebar.
Publish the post when you're finished.
Link
Create a new post and add a title.
Create a link and place it in the editor.
Once you've added the link, you need to be sure to select the Link post format from the Format box on the right hand sidebar.
Publish the post when you're finished.
Quote
Create a new post and add a title.
Type or paste your quote into the editor.
Once you have your quote in there, create a line break down to the next line. Type the name of the person you're quoting. Select the text and make the name bold formatted. This will style the text and create the line above the cite.
Once you've added the quote and cite, you need to be sure to select the Quote post format from the Format box on the right hand sidebar.
Publish the post when you're finished.
Status
Create a new post and add a title.
Create your note, or status, in the editor area.
Once you've added the status, you need to be sure to select the Status post format from the Format box on the right hand sidebar.
Publish the post when you're finished.
Audio + Go to Media -> Add New to upload your audio file (m4a or oga). Once you have the file uploaded, copy the path to the file.
Create a new post and add a title.
Create a quick note about the audio file in the editor area.
Scroll down and add a new custom field. The Name is going to be m4a or oga (depending on what file you upload) and the value will be the full URL to that audio file. Click Add Custom Field.
Once you've added the custom field, you need to be sure to select the Audio post format from the Format box on the right hand sidebar.
Publish the post when you're finished.
Typo comes with several custom element styles, which are used to easily add extra styling to your WordPress posts. Add buttons, columns, and asides all from within your post editor. See what each one does below.
To use the post styles, simply select your text, links or images, and select from the drop down which style you would like to apply. You'll be able to see the changes live, in your editor. If you're having a bit of
1/2 Column - This will do exactly what it says, create a half column! Select your text and apply this style to create a 1/2 column on your post.
1/4 Column - This will do exactly what it says, create a quarter column! Select your text and apply this style to create a 1/4 column on your post.
Highlight - This will highlight the f**k out of some text.
Buttons - There are several colors of buttons to choose from. Just select your text or link and choose what size and color you want!