Working with the WebYep Menu element

The WebYep Menu element allows a site author to add dynamic pages to a website. Dynamic pages can best be described as pages that don't physically exist on a website (you cannot see them if you login via FTP). However WebYep will display a list of these pages, as links. If we click one of these links, WebYep uses a query string to load a page template and instantly populate it with editable text and images. To the normal person visiting the website, it looks like a unique web page. This can potentially be a clever method for adding news articles, tutorials, product details or other sub-pages to a website.

Please use a website with WebYep installed for this tutorial (see installation for details). A general understanding of HTML code and working with a code editor is assumed.

Creating the page, inserting the WebYep Elements

  1. Create a new document 'wy_menu.php'. Please don't work on unnamed/unsaved documents! Create the file and immediately save it under the name 'wy_menu.php' before continuing.
  2. Add some basic 'boilerplate' HTML code in the page, to define the DOCTYPE, head and body regions.
  3. Add the WebYep Init Code to the top of the page.
  4. Insert two empty paragraphs, within the body.
  5. Position the cursor in the first paragraph.
  6. Insert a WebYep Logon Button.
    <?php webyep_logonButton(true); // WebYepV1-2 ?>
  7. Position the cursor in the second paragraph.
  8. Insert an HTML table: one row, two columns, 10 pixels cellpadding.
  9. Position the cursor in the left table column.
  10. Insert a WebYep Menu element:
    <?php webyep_menu("Fieldname", false, "some_page.php", "_self", "", "", 650, 530); // WebYepV2 ?>
  11. Position the cursor in the right table column.
  12. Insert two pairs of empty paragraph tags.
  13. Insert a WebYep Short Text Element:
    <?php webyep_shortText("Fieldname", false, 550, 240); // WebYepV2 ?>
  14. Position the cursor in the second paragraph (of the right table column).
  15. Insert a WebYep Long Text element:
    <?php webyep_longText("Fieldname", false, "", true, 600, 400); // WebYepV2 ?>

Configuring the WebYep Elements

  1. Click the WebYep Element in the left table column (the Menu element).
  2. Change it's fieldname to "products":
    <?php webyep_menu("Products", false, "wy_menu.php", "_self", "", "", 650, 530); // WebYepV2 ?>
  3. Click the upper WebYep element in the right table column (the Short Text element).
  4. Enter "Title" as the fieldname:
    <?php webyep_shortText("Title", false, 550, 240); // WebYepV2 ?>
  5. Click the lower WebYep Element in the right table column (the Long Text Element).
  6. Enter "Text" as the fieldname.
    <?php webyep_longText("Text", false, "", true, 600, 400); // WebYepV2 ?>

Testing the page

Please make sure you have transferred the webyep-system folder to your web server and have prepared WebYep (see installation for details).

  1. Transfer the page (wy_menu.php) to your web server (upload via FTP or copy it into your local server directory).
  2. Open the page in your web browser by entering the appropriate address (URL), like:
    http://www.mywebsite.com/wy_menu.php
  3. Click the lock icon in the page (the WebYep Logon Button).
  4. When the logon window pops up, enter the username and password you configured when installing WebYep (default is username "admin" and no password).
  5. Click the Edit Button (the one with the pen icon) beneath the word "Products" (left table column) to edit the menu.
  6. The menu editor window will pop up (see "References > Menu" for more details).
  7. Create three menu items by entering each items title in the textfield at the bottom of the window and clicking 'add'.
  8. Save the menu by clicking 'Save'.
  9. Click one of the menu items.
  10. Enter title and text for this page by clicking the edit buttons beneath 'Title' and 'Text'.

How query strings work for dynamic pages

You can manually create links to a menu item's target page by adding the following to the URL of the link: 

?WEBYEP_ID=x

where "x" stands for the ID of the menu item, like this:

products_page.php?WEBYEP_ID=1

You can find out the ID of a menu item by simply clicking the menu item and observing the URL displayed in your browsers address field. At the end of the displayed URL you should see the "WEBYEP_DI=xxx" or similar.

The ID of a menu item has nothing to do with it's position in the menu (order)!