Documentation

How to customize your new website

Summary

  1. Installation
  2. Plugins Suggested
  3. Set the menu
  4. Add the About Widget
  5. Add the Instagram Widget to Sidebar
  6. Add the Instagram Widget to Footer
  7. Customize: Left or Right Sidebar
  8. Customize: Activate the excerpt
  9. Customize: Fonts
  10. Customize: Colors
  11. Customize: Header Image
  12. Customize: Footer Credits
  13. Customize: Custom CSS
  14. Customize: Google Analytics
  15. Page Templates
  16. Translation

1) INSTALLATION

  1. Go to Appearance>Themes
  2. Click on “Add New” button
  3. Click on “Upload Theme” button
  4. Select the zip of your theme and click on Install Now
  5. Now click on “Activate”

Note: You can also install the theme via FTP with Filezilla. Upload the unzipped folders to the directory …/wp-content/themes/. Then go to “Appearance –> Themes” where you can see your theme and install it using the “Activate” button.

2) PLUGINS SUGGESTED

When you activate the theme it suggets you the following plugin:

  1. Jetpack (https://wordpress.org/plugins/jetpack/)
    1. After activation click on “Connect to WordPress.com”
    2. After connection go to Jetpack>Settings
    3. I suggest to activate: Carousel, Sharing, Site Icon (favicon) and Tiled Galleries
  2. Contact Form 7 (https://wordpress.org/plugins/contact-form-7/)
  3. WP Instagram Widget (https://wordpress.org/plugins/wp-instagram-widget/)
  4. Hipster Theme Shortcodes

3) SET THE MENU

  1. Go to Appearance>Menus
  2. Flag on “Primary Menu”
  3. Click on “Save Menu”

Note: if you want a new menu just click “create a new menu”, then you can move the items from the left side. At the end flag on “Primary Menu” and “Save Menu”

4) ADD THE ABOUT WIDGET

  1. Go to Media>Add New
  2. Click on “Select Files”
  3. Upload a square image of you (230x230px)
  4. Click on “edit”
  5. Copy the link from “File URL”
  6. Go to Appearance>Widgets
  7. Move the “About” widget to the Sidebar
  8. Paste the url in the “Image URL”
  9. Write a text in “About Description”
  10. Add your social links
  11. Click on “Save”

5) ADD THE INSTAGRAM WIDGET TO SIDEBAR

  1. Install the plugin WP Instagram Widget (https://wordpress.org/plugins/wp-instagram-widget/)
  2. Go to Appearance>Widgets
  3. Move the “Instagram” widget to the Sidebar
  4. Add you Instagram user without “@”
  5. Set the number of photos
  6. Set the size Thumbnail
  7. Delete the title “Instagram” and the “Link text”

6) ADD THE INSTAGRAM WIDGET TO FOOTER (if the theme has the footer widget)

  1. Install the plugin WP Instagram Widget (https://wordpress.org/plugins/wp-instagram-widget/)
  2. Go to Appearance>Widgets
  3. Move the “Instagram” widget to the Sidebar
  4. Add you Instagram user without “@”
  5. Set the number of photos (Suggested 8)
  6. Set the size Large
  7. Delete the title “Instagram” and the “Link text”

7) CUSTOMIZE: THE LEFT OR RIGHT SIDEBAR

  1. Click on Appearance>Customize>Layout
  2. Select “Right” or “Left” from Blog Sidebar Position

8) CUSTOMIZE: ACTIVATE THE EXCERPT

  1. Click on Appearance>Customize>Layout
  2. Select “Yes” from Excerpt Automatic
  3. You’ll see “Read More” on the blog page

9) CUSTOMIZE: FONTS

You can choose the google fonts that you like and add to your website.

  1. Go to Appearance>Customize>Typography
  2. Here you can find the options for Site Title, Menu, Widget Title, Body, etc…

10) CUSTOMIZE: COLORS

You can change the colors of a lot of sections and elements like border, buttons, pagination, etc…

11) CUSTOMIZE: HEADER IMAGE

You can upload a custom header image. The sizes suggested are 960 × 120 pixels, but you can upload an image with a smaller width.

  1. Go to Appearance>Customize>Header Image
  2. Click on “Add new image”
  3. Click on “Select files”
  4. Select your header image (or logo)
  5. Click on “Select and Crop”
  6. Click on “Skip Cropping

12) CUSTOMIZE: FOOTER CREDITS

You can change the default footer credits section.

13) CUSTOMIZE: CUSTOM CSS

You’ll be able to add you custom CSS if you want.

14) CUSTOMIZE: GOOGLE ANALYTICS

  1. Go to Appearance>Customize>Google Analytics
  2. Paste your Google Analytics ID

15) PAGE TEMPLATES

In an empty page you can choose some page template under “Page Attributes –> Template” like Full-width Page Template Left Sidebar or No Sidebar.

17) TRANSLATION

It is ready for theme translations. You can add your own translation or customize an existing translation easily using the WordPress plugin Codestyling Localization. If you want to share your translation with Hipster Theme, send an email to hello[@]hipstertheme.com