Georgia Lou Studios

Welcome to the Help Center!

Sidebars & Widgets | Maryanne

Follow

This tutorial will walk you through the setup of the custom theme widgets for the Maryanne 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. Landing page right sidebar

2. Above Promo Boxes Sidebars for Home Page and Landing Pages

3. Below Promo Boxes Sidebars for Home Page and Landing Pages - great for Newsletter widget or recent post widgets

4. Landing Page 2 - Left Sidebar

5. Landing Page 2 - Right Sidebar

6. Footer Full width widget area

7. Footer 1-3 column dynamic sidebar

8. Footer Instagram sidebar

9. Below post content sidebar - great for post signatures!

10. WooCommerce sidebar

 

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 "Maryanne 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:

about.png

  • 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
  • Name (optional) - If you would like to add a "signature" to the widget like on the demo, you can enter your name here. The font can be customized in Appearance > Customizer.
  • 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. Maryanne: 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. Maryanne Recent Posts.

This widget can be used in the Right Sidebar or in the Below Slider/Promo Sidebars.

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 LIST WIDGET

Our themes include a custom Post List widget with a post thumbnail. For each theme, the widget is called after the theme, i.e. Maryanne: Post List.

This widget can be used in the Right Sidebar or in the Below Slider/Promo Sidebars.

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

  • Title (optional) - Add a title to your widget
  • Select Category - You can show recent posts from all categories or from one specific category. Choose from the drop down menu.
  • Post Order - Choose to show posts either by Recent Posts or Popular Posts
  • Number of posts to display - 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 4, 8 or another multiple of 4.

 

V. 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 Maryanne: 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. Maryanne: 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 Maryanne: 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. Max number of photos is 12.
  • Photo size - Choose your image size. The smallest available size to fit your chosen layout is best.
  • 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.

VIII. RECENT POSTS WIDGET EXTENDED

This recommended widget was added in theme version 1.3.0. Install the recommended plugin.

This widget works well in the sidebar as well as on the Landing Page Templates and in the Archive Page Template.

To Setup:

1. Drag the Recent Posts Extended widget into the sidebar area of choice.

2. Give the widget a title.

3. Set the widget settings as shown below. You can also explore some of the other widget settings. This widget is very flexible.

*For the Landing Page, the Thumbnail size should be set to a minumum of 500px wide.

archive6.png

 4. Click the Save button to save 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

Powered by Zendesk