“ Mommy Blog WordPress ” Documentation by “dtbaker” v1.0


“Mommy Blog - WordPress”

Created: 21/12/2011
By: dtbaker
Email: support@dtbaker.com.au

Thank you for purchasing my wordpress theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. Installation
  2. Automatic Updates
  3. File Structure
  4. How to upload your logo
  5. How to setup the home page
  6. How to setup the contact page
  7. How to setup the pretty image page
  8. How to setup the gallery page
  9. How to select fonts
  10. How to setup the sidebars
  11. How to setup the header
  12. How to change the background
  13. How to setup the menus
  14. PSD Files
  15. Sources and Credits

A) Installation - top

Upon downloading the .zip file from themeforest.net you will have all files inside the theme package. Do not upload the entire file you get from ThemeForest. Extract this zip file and locate the "mommy_wp_theme.zip" file. This is the one you need to upload to WordPress. Login to your WordPress admin, go to Appearance > Themes, Add new theme, Upload, and then select this "mommy_wp_theme.zip" file and upload..

Please activate this theme after installing it. Once activated you should be prompted to install the "Widget Area Manager" plugin and the "Jigoshop" plugin (see screenshot below). Click the relevant buttons to install these plugins. Please contact us via our support system if you have difficulty installing this theme or the two plugins.

For more information on Installing WordPress please see here: http://codex.wordpress.org/Installing_WordPress


B) Automatic Updates - top

Important:

Once the theme is activated, you will have a new menu on the left under Appearance called "Options: Envato". Please go to this new page and enter your envato licence purchase code. This will qualify you for free theme updates, bug fixes and new features. You will be notified in WordPress when a new update is available to this theme. More instructions are available on this page.


C) File Structure -

This theme is a WordPress theme. Most of these files are standard WordPress files, so if you know your way around WordPress you will have no problems making the changes you need here. I've included a list of what the main files do in this theme below:

style.css This css controls all the styles on the website.
/images/ The images used in the constructed website layout
/js/

javascript.js - helps the menu look nicer in older browsers
jquery.cycle.lite.js - used for the slideshow in the header.

/phpmailer/ The files used for sending mail from your contact form.
/plugins/ Contains the default plugins that should be installed along with this theme in order to make it work correctly.
header.php Used to display the header on your blog (logo area and menu).
footer.php Used to display the footer on your blog.
class-tgm-plugin-activation.php This class helps with the installation of the theme, it checks you have jigoshop and plugins installed correctly.
dtbaker.fonts.php Allows you to select which Google fonts to use on your website.
dtbaker.shortcodes.php Controls which shortcodes are available to you in the theme.
dtbaker.theme_options* These files control the options you see on the left hand side in WP admin under the Appearance menu.
dtbaker.widgets.php This file loads the available widgets (from /widgets/ folder) that can be used on your site.
functions.php The main theme functions, a standard wordpress file.
functions.jigoshop.php This contains some modifications to the jigoshop system, if you choose to use jigoshop this will help it look nicer.
template-contact.php This is the template you will apply to your contact page, it shows the contact form and map.
template-home.php This is the template you will apply to your home page, it shows a nice introduction with a widget area.

D) How to upload your logo - top

You need a "small" logo and a "large" logo. These logo's need to be PNG images. The size of these logos should be:

You can download the above example logos and put your logo ontop of them in photoshop, this way you know you have the correct size that will fit on the theme.

If you need a bigger logo, or would like to change the header all together, then the easiest way would be to open up one of the header files in /images/headers/small/ (example below) and put your logo straight ontop. Then re-upload this image and select it as the header image.


E) How to setup your home page - top

Setting up your home page is easy. Follow these steps:

  1. Go to Pages > Create new
  2. Create your home page, call it "home" so you can recognise it
  3. Type some text, this will display at the top of your home page.
  4. Handy Hint: center align your text on this page to make it look even better!
  5. On the right hand side of this home page, select the "Home Page Template" under the template dropdown.
  6. Click "Set Featured Image" (down bottom right) and select an image, this will display in the small box on the home page next to the text (optional).
  7. Click the publish/update button.
  8. Go to Pages > Create new again
  9. Create a blog page, call it "blog" so you can recognise it
  10. Click the publish/update button.
  11. Go to Settings > Reading
  12. Select the "a static page" option
  13. Select the "home" page you created as the front page.
  14. Select the "blog" page you created as the blog page.

You now have the basic setup complete! Congrats! Next job is to setup the home page Header (logo area)

  1. Go to Appearance > Widgets
  2. On the right hand side you should see the "Header Area" widget box.
  3. Drag the "Header Banner" across into the "Header Area"
  4. Select the small image, large image and colors (the defaults are fine) and press save.
  5. Now visit your home page like a normal visitor would, and you will see some options along the top.
  6. Click the "Header (logo area)" menu and choose "Layout > Large"
  7. Click the "Header (logo area)" menu and choose "Widgets > Header Area"
  8. Your home page should now have a nice large header area above your welcome text.

Now for the recent blog posts on the home page.

  1. Go to Appearance > Widgets
  2. On the right hand side you should see the "Home Page" widget area, expand this.
  3. Drag the "Home Page Latest Posts" across into the "Home Page" widget area.
  4. Select how many posts you want to show (3 is good) and press save.
  5. Now visit your home page like a normal visitor would, and you will see some options along the top.
  6. Click the "Below Content" menu and choose "Layout > Width of Content"
  7. Click the "Below Content" menu and choose "Widgets > Home Page"
  8. Your latest posts will now appear undernearth the home page welcome text content (create some blog posts to see).

Now for the sidebar on the left or right of the home page.

  1. Go to Appearance > Widgets
  2. On the right hand side you should see the "Left/Right Column" widget area, expand this.
  3. Drag all the "Jigoshop" widgets across into the "Left/Right Column" widget area, and arrance as desired.
  4. Now visit your home page like a normal visitor would, and you will see some options along the top.
  5. Click the "Left/Right Column" menu and choose "Layout > Right"
  6. Click the "Left/Right Column" menu and choose "Widgets > Left/Right Column"
  7. Your selected widgets will now appear on the left or right of your page, pretty cool hey!

F) How to setup your contact page - top

Setting up your contact page is easy. Follow these steps:

  1. Go to Pages > Create new
  2. Create your contact page, call it "Contact Us" so you can recognise it
  3. Type some text, this will display at the top of your contact page.
  4. On the right hand side of this home page, select the "Contact Page Template" under the template dropdown.
  5. Click the publish/update button.

Now we add the contact form to your page.

  1. Go to Appearance > Options: Contact
  2. Fill in all the fields on this page.
  3. Try leaving the "Send Via SMTP" option on "NO" - if you don't receive an email after filling in your contact form then enter your SMTP details.

Now setup the contact page sidebar.

  1. Go to Appearance > Widgets
  2. On the right hand side you should see the "Contact Page" widget area, expand this.
  3. Drag the "Contact Details" widget across into the "Contact Page" widget area.
  4. Drag the "Social Icons" widget across into the "Contact Page" widget area.
  5. Drag the "Opening Hours" widget across into the "Contact Page" widget area.

You're done.


G) How to setup the pretty image page - top

An example of this image page is here: http://tf.dtbaker.com.au/wordpress/mummy_blog/about/

  1. Go to Pages > Create new
  2. Create your new page
  3. On the right hand side of this home page, select the "Right Image Template" under the template dropdown.
  4. Click "Set Featured Image" (down bottom right) and select an image.
  5. Click the publish/update button.

You're done.


H) How to setup the gallery page - top

  1. Go to Pages > Create new
  2. Create your gallery page.
  3. Type this shortcode on the page: [gallery] and press update.
  4. Upload images to your page (but don't insert them, just upload them).
  5. Click on the gallery to change it's settings.
  6. Click the publish/update button.

You can read more about the built in wordpress gallery by going here: http://codex.wordpress.org/Gallery_Shortcode


I) How to select fonts - top

  1. Go to Appearance > Options: Font
  2. Open http://www.google.com/webfonts to preview what the different available fonts look like.
  3. Select which fonts you would like to use for different areas of your website.
  4. Click the save button.

J) How to setup the sidebars - top

  1. Go to Appearance > Widgets
  2. Drag your desired widgets (eg: jigoshop) to one of the "Optional Widget Group" areas.
  3. Navigate to the page you wish the sidebar to appear on.
  4. At the top in the admin bar you will see "Left/Right Column" option.
  5. Select this and choose the Layout as Left or Right (or Hidden if you don't want a sidebar)
  6. Select Left/Right Column and choose Widgets, select one of your "Optional Widget Groups" that contain your widgets.
  7. Your desired widgets will now appear on the left or right of your page.
  8. Easy!

K) How to setup the header - top

  1. Go to Appearance > Widgets
  2. Drag the "Header Banner" widget to the "Header Area" widget area on the right.
  3. Select which image you would like to use for the header area (examples of each are here hover over the home menu).
  4. If you delete the color code and press save it will revert to the default color for that image.
  5. You can specify the URL to your own header graphic if you don't like any of the default ones.

Creating your own large header graphic:

  1. Create a large header graphic like this one. It should measure 980px by 458px. If you want to use the logo from wordpress make sure you leave room for the logo to be automatically placed ontop (like in example). Alternatively you can just include your logo in the big header graphic.
  2. Upload your custom header graphic to wordpress media area
  3. Find the URL for this custom header graphic (full url including http:// at start)
  4. In the "Header Banner" widget, select "Custom URL" from the "Large Image" drop down.
  5. Type in the full URL (including http://) for your custom header graphic.

Creating your own small header graphic:

  1. Create a small header graphic like this one. It should measure 980px by 275px. If you want to use the logo from wordpress make sure you leave room for the logo to be automatically placed ontop (like in example). Alternatively you can just include your logo in the big header graphic.
  2. Upload your custom header graphic to wordpress media area
  3. Find the URL for this custom header graphic (full url including http:// at start)
  4. In the "Header Banner" widget, select "Custom URL" from the "Small Image" drop down.
  5. Type in the full URL (including http://) for your custom header graphic.

L) How to change the background - top

  1. Go to Appearance > Background
  2. You have either blue stripe or green stripe option. Green stripe is default.
  3. Preview of green stripe:
    right click - save as - to download green stripe to your desktop
  4. Preview of blue stripe:
    right click - save as - to download blue stripe to your desktop
  5. Click browse to select an image from your computer (you can use blue stripe, or green stripe from above - or use your own background graphic).
  6. Click the upload button, and your done!.

M) How to setup the menus - top

  1. Go to Appearance > Menu
  2. Type "Main Menu" into the menu name box, and click Create Menu.
  3. Tick which pages you would like to appear in the menu on the left, and click "Add to menu"
  4. Drag and drop menu items around to arrange your menu.
  5. Click save menu
  6. On the left in the drop down box, select your "Main Menu" to assign to the header menu area.
  1. Repeat the above process (create menu, assign items, assign menu location) for the footer menu as well.

N) PSD Files - top

I've included the main photoshop files with this theme one for each page, I have flattened the background layers in a few of the files to make the download size smaller when buying this theme. The 2 completely editable files are: home.psd & our family.psd.
All files include the slices to help you edit it. The photoshop file contains clearly named folders for each part of the website.

How to edit & replace images:
The Photoshop documents have the slices required to build the layout. Pay special attention to the images that are saved as PNG, these ones need to be transparent and have nothing behind them when you save.

  1. First simply make the changes in photoshop
  2. Turn on the slices (view > show > slices) they appear as blue boxes
  3. Some slice boxes overlap, you can move slices into the background or bring them to the foreground using the slice options in the top left of the tool bar.
  4. You may need to hide some of the backgrounds and text when saving certain images. Use the existing images as a guide.
  5. To export the images go to: File > Save for Web, click on the slice you want to export and click save at the bottom of the screen, all the correct image settings will already be there, overwrite the originals in the images folder. 



O) Sources and Credits - top

I've used the following images, icons or other files as listed.

Fonts:

Icons:

Vectors:

* the vectors drawn by me are fine to use throughout the website you create, but please don't take them to use on other new website designs seperate to this theme. Using them in branding to match your clients website is ok.

Header:

Inside Pages:

Photos:


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

dtbaker

Go To Table of Contents