Register to Reply
Results 1 to 1 of 1

Thread: [HOW-TO vB4] Create a Widget using Plugins and Templates

    1. [HOW-TO vB4] Create a Widget using Plugins and Templates

      [HOW-TO vB4] Create a Widget using Plugins and Templates

      By: (Administrator) Tempus is offline 28th Feb 2019 17:04
      Rating: 
      In this tutorial I am hoping to enlighten many in wondering how to do their own custom widget without confusion.

      I came across someone needing help with a widget issue, they could not get javascript to work nor PHP in the widget so I dug right in, keep in mind this is my first widget so I was doing this blindly, but upon digging in I realized it was easy once I learned what each portion of the system did, only took about 15 or 20 mins to figure it out. So I feel anyone can learn to do a widget faster than their own modification.

      Lets begin, keep in mind that this is explained on how I did it and if you have questions with any aspect explained or not then just ask, I will gladly answer.

      Step 1. - Widget Creation

      With this step you want to create your widget first, I prefered to create the widget first as it seemed logical but you can rearrange the steps once you are used to the system.

      Go to: AdminCP > vBulletin CMS > Widgets



      Step 1a. - Widget Creation - Details

      Click Create Widget at the bottom of this new page.



      We now have a new page with boxes for: Widget Type, Title, and Description. Lets get the boxes filled in.

      Widget Type: Static HTML
      Title: My Widget (Name your widget whatever you would like)
      Description: Make the description explanatory of what this widget does.



      Click Save to create your new widget.

      Step 2. - Widget Location

      You'll need to go to AdminCP > vBulletin CMS > Layout Manager

      The new page will load, on this page you have a list of layouts you have created or default layout. Find the layout you want to have this widget appear on and click GO next to the dropdown that is in line with your layout you have chosen, make sure Edit is selected from the dropdown.



      Step 2a. - Widget Select and Add

      From the box to the left, you will see all available widgets that have been created. Select your newly created Widget and click the > that is the right of that box.



      Step 2b. - Move Widget

      Once you have added the widget, a new box will appear with your Widget's title, mine is titled My Widget. You can click the darker bar with your widget title in it to move it to which ever column you choose.



      Then click Save at the bottom to save the location.

      Step 3. - Configure Widget

      Head back to your left menu and click on Widgets.

      When the page loads, find your widget and at the far right click Configure as the screenshot shows below.



      Step 3a. - Configure Widget Page

      A box will popup and turn the background black. In this new window or box do the following.

      Enter Static HTML: Empty the box of everything
      Template Name: Enter the name of your template you plan to create for use with this widget.



      Step 4. - Add Widget Template

      Go to: AdminCP > Styles & Templates > Style Manager



      On that page, find the style you want this widget to appear with, then from the drop down to the far right choose Add New Template.



      Step 4a. - Template Information

      When the Add New Template page loads fill the boxes as listed below.

      Title: Enter the name of your template, it is the same name that you entered when configuring your widget in Step 3.
      Template: Enter the following html into this area.
      HTML Code:
      Only registered members can view HTML code.
      Click save once you have entered the template info.



      Step 5. - Plugin Creation

      Go to: AdminCP > Products & Plugins > Plugin Manager (You can create yourself a new product but if you are new to any type of vB modifying then I suggest you don't attempt to create a product)



      On the new page, scroll to the bottom and click on Add New Plugin



      Step 5a. - Plugin Info (Keep in mind this is for testing purposes)

      On this page, fill in the boxes as provided below.

      Product: Choose vBulletin CMS (If you created a product, choose it from the drop down)
      Hook Location: global_start (Choose the plugin that fits best into where you want this to be shown, global_start is the best option for now)
      Title: Give descriptive title
      Execution Order: Leave this field alone
      Plugin PHP Code:
      PHP Code:
      Only registered members can view PHP Code
      Plugin is Active: Set this to YES

      Then click save and done



      You are done. Now load your page and view your widget in action.

Register to Reply

Similar Threads

  1. SOLVED
    No templates
    By Geniy99778 in forum Solved Requests
    Replies: 5
    Last Post: 1st Nov 2018, 13:23
  2. HELP
    where to find the templates in vb5
    By boldherri in forum Requests & Help
    Replies: 2
    Last Post: 5th Mar 2018, 11:13
  3. Replies: 0
    Last Post: 11th Nov 2017, 17:06
  4. EditArea Code Editor for Templates & Plugins in Admin CP (vB3, vB4)
    By ven in forum vBulletin 4.x Template Modifications
    Replies: 1
    Last Post: 5th Oct 2016, 10:38
  5. HELP
    VB 3 Use vars in other templates
    By JTR in forum Requests & Help
    Replies: 3
    Last Post: 7th Mar 2015, 17:10

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •