Georgia Lou Studios

Welcome to the Help Center!

Sidebars & Widgets | Phoebe

Follow

This tutorial will walk you through the setup of the custom theme widgets for the Phoebe theme.

For the purpose of these directions, we are going to assume you know how to navigate to the Appearance > Widgets page and drag-and-drop a widget into a widget area (Widgets in WordPress).

 

Sidebars, aka widget areas, are flexible content areas you can customize by adding different widgets that display a variety of things.

 

Theme Sidebars

The main sidebar on the this theme is a right, vertical sidebar. This sidebar is displayed by default on all pages, posts and archive pages.

Other widget areas on this theme include:

1. Instagram Footer

2. WooCommerce Sidebar

3. Under Post Widget Area

4. Above Promo Boxes

5. Under Promo Boxes

6. Landing Page Sidebar

7. Landing Page Above Promo Boxes

8. Landing Page Below Promo Boxes

9. Landing Page Left

10. Landing Page Right

 

Enabling/Disabling the Sidebar

1. To enable/disable the sidebar on your homepage, your posts, and/or your archive pages (category pages, tag pages, etc.) navigate to Appearance > Customize > General Settings.

2. Here, you can check or uncheck the boxes next to "Disable Sidebar on Homepage", "Disable Sidebar on Posts", etc.

 

Widgets

I. ABOUT ME WIDGET

In each theme, the About Me widget will have a theme specific name, like "Phoebe About Me".

1. After you have placed the widget in your sidebar, click the gray down arrow next to the name of the widget to open the widget opens panel.

2. Complete the options fields to setup your widget:

  • Title (optional) - Give your widget a title
  • Name (optional) - This is the name displayed under the About picture.
  • Your photo URL (optional) - This will need to be the direct link to your photo stored either on your WordPress site or on a service like Flickr. 
    • To upload a picture to WordPress, go to Dashboard > Media > Add New
    • Drag and drop a picture file from your computer onto the upload box or use the Select Files button to find and upload the file. 
    • Once your file is uploaded, click the Edit link next to it. 
    • A new window will open with your picture. In the upper right corner you will find the File URL field. 
    • Select and copy this link then paste it into the Your photo URL field in the About Me widget.
    • Note: The best photos are square (equal height and width) otherwise the image will appear as an oval or a rectangle on the theme.
  • About me text (optional) - Add some text about yourself. This field accepts HTML so you can add a link to an About Page here if you want. See this article if you want more help adding a Read More link: Add a "Read More" link to your "About Me" widget
  • Your image URL signature (optional) - If you would like to add a "signature" to the widget like on the demo, upload your signature image file to your WordPress site or another image hosting site. Then cut and paste the image URL into this field.
  • Social icons (optional) - You can include social media icons below the text. Just check the box next to the icons you would like to include. Make sure you have set up your social media IDs in the Theme Customizer according to the instructions in the Social Icons article. You can also add additional icons to the widget with the help of this article: How do I add new social media icons?

3. Make sure you Save your settings.

 

II. SOCIAL MEDIA ICONS WIDGET

Our themes include a sidebar social media widget separate from the icons included in the About Me widget. You can use both, none or either.

Each of our themes comes with a social media icon widget named for the theme. i.e. Phoebe: Social Icons.

Before your setup your widget, make sure you have set up your social media IDs in the Theme Customizer according to the instructions in the Social Icons article. You can also add additional icons to the widget with the help of this article: How do I add new social media icons?

1. After you have added your widget to the sidebar, configure the options:

  • Title (optional) - Add a title at the top of your widget.
  • Social links - next to the social icons you want to display, tick the check box so that it is checked.

2. Make sure you Save your settings.

 

III. RECENT POSTS WIDGET

Our themes include a custom Recent Posts widget with a post thumbnail. For each theme, the widget is called after the theme, i.e. Phoebe Recent Posts.

1. Once you add the widget to your sidebar, configure the options:

  • Title (optional) - Add a title to your widget
  • Filter by Category - You can show recent posts from all categories or from one specific category. Choose from the drop down menu.
  • Number of posts to show - Choose the number of posts to display in your widget. For the Below Slider and Promo Area Sidebar, make sure you set the "Number of posts to show" to 3, 6 or another multiple of 3.

2. Make sure you Save your settings.

 

IV. POST CAROUSEL WIDGET

This widget is a sidebar slider widget that allows you to feature and bring attention to posts of your choice.

1. Navigate to Dashboard > Widgets.

2. In the widgets list, find the Phoebe: Post Carousel widget.

3. Drag and drop the widget into the sidebar area.

4. Now you will need to set your Settings. Setting options include:

  • Widget title
  • Select category - You can display posts from All Categories or a single category
  • Post Order - You can display posts by most recent or most popular
  • Number of posts to Display - You can display from 1 up to 20 posts in the carousel.


5. Click the Save button on the widget to save your settings.

 

V. FACEBOOK LIKE BOX WIDGET

Each theme includes a Facebook widget named for the theme. i.e. Phoebe: Facebook Like Box.

1. After you add the widget to your sidebar, configure your settings:

  • Title (optional) - Give your widget a name
  • Facebook Page URL - This is your ENTIRE facebook page address, including the http://www.facebook.com/your-page-id
  • Show Faces - You can choose to show or hide the faces of your followers by checking or unchecking this box.
  • Show Stream - You can choose to show or hide your Facebook stream by checking or unchecking this box.
  • Show Page Cover Image - You can choose to hide or show your Facebook cover image by checking or unchecking this box.

2. Save your widget settings.

 

VI. PROMO BOX WIDGET

1. Drag-and-drop the Phoebe: Promo Box widget into a sidebar area.

2. Give the widget a title if so desired.

3. Under the title, copy and paste the URL for the image you want to use for your image background on the promo box. See this article if you want to know how to find the URL for images in your Media Library.

4. Enter your Promo text which will display in an overlay on your Promo Box.

5. Enter your Promo Link, the link for the page you want the Promo Box to link to.

6. Enter Promo Box Height and Promo Box Margin Bottom.

7. If you want to Open link in a new tab tick the box next to this option.

8. Click the Save button to save your widget settings.

* You can add and stack several of these widgets to create a nice image menu in the sidebar.

 

VII. INSTAGRAM FEED WIDGET

Make sure you have the recommended plugin, WP Instagram widget installed before you try to setup your Instagram widget.

1. Once you have added the Instagram widget to your sidebar, configure your settings:

  • Title (optional) - Give your widget a title
  • Username - Your Instagram User ID only, not your full URL
  • Number of photos: Enter the number of photos you'd like to display. Even numbers look best due to theme styles.
  • Photo size - Ignore this setting. The theme styles set the image size for the sidebar widget.
  • Open links in - Choose to open your Instagram links in the Current window or a New Window (recommended). Choose from the drop down list.
  • Link text (optional) - You may add a link at the bottom of the widget that will link to your Instagram page.

2. Save your widget settings.

 

ABOUT JETPACK WIDGETS

Jetpack is a widgets and plugins pack from Automattic (the company behind WordPress.com) that offers some extra functionality to your WordPress.org site. We recommend reading up about Jetpack before you activate it. This is from the official Jetpack.me site: Getting started with Jetpack.

Our themes support the Jetpack functions. We offer special styling for the Newsletter widgets and the rest of the widgets blend nicely into the themes as Automattic has made their styles fairly minimal and fonts are generally styled to match any theme automatically.

A few Jetpack plugins we don't recommend you use as they are redundant to some of our existing theme features. If you choose to use the Jetpack features, make sure you turn off the them feature using the Theme Customizer:

  • Related Posts
  • Social Sharing on Posts

You will be required to have or sign up for a WordPress.com account (FREE) to connect the Jetpack plugin.

Was this article helpful?
0 out of 0 found this helpful

Comments

  • Avatar
    Jillian Bourgeois

    Hello!,

    I was wondering if you could explain to me, how to edit the text in the " Above the Promo Boxes" Widget.

    Thank you!

Powered by Zendesk