Widgets – Documentation https://docs.themeshine.com Get to Know ThemeShine themes Fri, 23 May 2025 10:03:03 +0000 en-US hourly 1 https://wordpress.org/?v=6.7 How to Add Social Media Icons to WordPress https://docs.themeshine.com/how-to-add-social-media-icons-to-wordpress/ Fri, 23 May 2025 09:17:07 +0000 https://docs.themeshine.com/?p=1729 Adding social media icons to your website helps visitors connect with you on other platforms and strengthens your online presence. Our themes make this process smooth and flexible by converting the links to your social profiles into stylish, clickable icons. These icons are designed to match your site’s design while improving user interaction and visibility across your social channels.

Whether you want icons in the header, menu, or sidebar, everything can be customized easily – no coding required.

How to Add Social Media Icons

Follow these simple steps to display social icons on your site:

  1. Go to your WordPress dashboard and navigate to Appearance > Customize > Social Icons > Social Profiles.
  2. Paste your social media links (e.g., Facebook, Instagram, Twitter) into the respective fields.
  3. Click Publish to save and display your icons automatically.

Choose Icon Placement

To manage where the icons appear, head to Appearance > Customize > Header & Menu > look for the “Social Icons Location” setting and select where you’d like them shown – such as the primary, left/right or secondary menu. To remove them from the header entirely, choose “None.”

Add Social Icons to the Sidebar or Widgets

If you prefer to display them in the sidebar, follow these steps:

  1. Go to Appearance > Widgets in your dashboard.
  2. Select the widget area where you’d like the icons to appear.
  3. Click the “+” button to add a new block and choose Shortcode.
  4. Paste this shortcode:
[themeshine-social]

Customize Social Icon Styles and Colors

You can personalize the appearance of your social icons by going to Appearance > Customize > Social Icons > Fonts & Colors. Here you can:

  • Choose from three styles: plain, bordered, or filled.
  • Select from three shapes: square, rounded, or circle.
  • Modify the icon and background colors for each style.
]]> Adding widgets to your WordPress theme’s footer https://docs.themeshine.com/adding-widgets-to-your-wordpress-themes-footer/ Wed, 14 May 2025 07:05:21 +0000 https://docs.themeshine.com/?p=1631 The site footer is a great place to display extra content like links, menus, or Instagram feed. It’s typically located at the bottom of your site, just above or around the copyright area. Using this space effectively can help improve navigation and user engagement.

Add Footer Navigation

To create a footer menu:

  1. Go to Appearance > Menus and click Create a New Menu.
  2. Add your desired links, then check the box for Footer Menu under Display Location.
  3. Click Save Menu once you’re done.

For a deeper look at where menus can appear across your theme, take a look at our article on how to change header & menu layout in WordPress.

Add Footer Widgets

To add a specific widget in the footer like an Instagram feed, go to Appearance > Widgets and look for the Footer location. Here you can add your desired widget by clicking on the “+” sign.

Adjust Typography and Colors

You can style the footer area by navigating to Appearance > Customize > Site Footer.

Here, you’ll find options to:

  • Change link, text and background colors
  • Adjust font styles and sizes
  • Edit or remove the copyright text
  • Hide the credit to our shop
]]> How to Add an Email Newsletter Signup to WordPress https://docs.themeshine.com/add-email-newsletter-signup-wordpress/ Fri, 09 May 2025 09:42:26 +0000 https://docs.themeshine.com/?p=1603 Want to grow your audience? Adding a newsletter form lets you stay in touch with readers through email updates. Here’s how to do it with Mailchimp, Flodesk, ConvertKit, or MailerLite.

Table of Contents

Before You Start

  • Always test the form after adding it to make sure it works.
  • Our Signup Form widget only supports email and first/last name fields.
    Adding extra fields like checkboxes might break the form – if you need more control, use the full HTML embed code from your email platform instead.

Mailchimp

Create the form:

  1. Go to Form > Other Forms > choose Embedded form
  2. Type a name and hit the Continue to builder button
  3. Choose your fields, click Continue
  4. Copy the link after <form action=" from the embed code

Add to WordPress:

  1. Go to Appearance > Widgets
  2. Click “+” in your desired widget area > search for Signup Form
  3. Choose Mailchimp and paste the link in Form Link
  4. Press Update to save

Flodesk

Create and style the form:

  1. In Flodesk, click Form on left side and scroll down to chose Ribbon Banner
  2. Click Customize It, choose a segment, and remove extra text
  3. Set Canvas and Background colors to transparent
  4. Click the Embed button

Add to WordPress:

  1. Copy both the Header Code and Inline Code
  2. Add the Header Code into your site’s <head> (see tutorial)
  3. In Widgets, use a Custom HTML block and paste the Inline Code

💡 Tip: For stacked fields, choose the “Inline without image” form template.

Kit (ConvertKit)

Create the form:

  1. Go to Grow > Landing Pages & Forms > + Create New > Form > Inline
  2. Pick the Clare template
  3. To add a First name field, click on the “+” sign below the form.
  4. Select ‘First name’ from the Custom field drop-down on the right.
  5. Click Embed > select the HTML tab and copy the link after <form action="

Add to WordPress:

  1. Go to Appearance > Widgets
  2. Click “+” on the area where you want to show the form & search for the Signup Form block.
  3. Choose ConvertKit in the platform dropdown and add the link you’ve copied in the Form Link field.
  4. To add the First Name field, also check the Show First Name field? option.
  5. Press Update on the upper right corner of the screen to save the changes.

MailerLite

Create the form:

  1. Go to Forms > Embedded Forms > Create Form
  2. Name your form > create or choose a subscriber group
  3. Add First/Last Name fields if needed
  4. Click Done Editing
  5. Scroll down to Embed form into your website > select HTML code.
  6. Press CTRL + F and search for action=” and copy the form action URL

Add to WordPress:

  1. Go to your WordPress dashboard > Appearance > Widgets.
  2. Click “+” on the desired location and search for the Signup Form block.
  3. Select the MailerLite platform and add the link you’ve copied in the the Form Link field.
  4. Don’t forget to add the form ID (you’ll find it in the HTML code section in Mailerlite starting width “mlb2-” (copy only the numbers)).
  5. Click Update

Choose Your Form Layout

The Signup Form widget lets you choose how the input fields are arranged. By enabling the ‘Show Stacked Form’ option, the fields will be displayed vertically – perfect for sidebars. If you prefer a horizontal layout, such as in a footer, simply leave the option unchecked.

]]> How to Add an Instagram Feed in WordPress https://docs.themeshine.com/how-to-add-an-instagram-feed-in-wordpress/ Fri, 09 May 2025 08:18:24 +0000 https://docs.themeshine.com/?p=1577 Want to show your Instagram photos on your website? It’s simple with our themes! You can place your Instagram feed in different areas like the footer, sidebar, or even at the top of the page.

Just follow these steps:

Step 1: Connect Your Instagram Account

  1. In your WordPress dashboard, click on your theme’s name in the left menu.
  2. Select the “Connect Instagram” option and hit the ‘click here’ link.
  3. You’ll be taken to a page where you can link your Instagram account – just follow the prompts.

Once connected, the feed widget will be ready to use.

Step 2: Add the Instagram Widget

  1. Go to Appearance > Widgets.
  2. Choose the area where you want the feed to appear and click the “+” button to add a new block.
  3. Search for “Instagram Feed” and select it.

Now you can customize the look:

  • Add a title (optional)
  • Choose how many images to show
  • Pick how many columns
  • Adjust spacing between rows and columns

When you’re done, click “Update” at the top to save.

Note: Sometimes there may be a short delay before the widget settings are applied. If the feed doesn’t show up right away, click Update again and check your site.

And that’s it! Your Instagram feed should now be live on your site.

]]>