Quick-reference infos:

Root directory: Go into your xampp install root folder and move into the htdocs folder.
phpmyadmin control page: http://localhost/phpmyadmin
phpmyadmin user: root
phpmyadmin pass: KEEP IT EMPTY
wordpress admin panel: http://localhost/workshop/wp-admin/
Betheme options: Appearance -> betheme options
Betheme import demo: Appearance -> betheme Demo Data


To achieve all the goals, you have to download the following .zip file from HERE. Follow the instructions to get Apache and MySQL up and running.

  1. XAMPP: Install Xampp on your Windows machine. If you use an other OS like iOS, Linux, Debiena…, you have to download Xampp from official site.
  2. Run Xampp control, if this has not yet happend, and try to start MySQL and Apache. Both should appear in green after starting, if not please tell us, we will check it with you.
  3. To check the apache webserver is running, type http://localhost in your browser and you should see “Welcome to XAMPP” page.
  4. To check MySQL is running, type http://localhost/phpmyadmin in your browser and you should see the phpmyadmin control panel.
  5. Finally you are able to install WordPress.
  6. Create a folder “workshop” in your htdocs folder. Unzip , copy all files and folders located inside the unzipped wordpress folder. Don’t copy the wordpress folder, only the files and folders in it. Paste those into your workshop folder. Now you can access the wordpress installation page by typing  http://localhost/workshop/ into your browsers address bar.
  7. Documentations are available in the workshop zip file. Google and Stackoverflow are your best friends if the documentations are not sufficient enough ;).




  1. Create a new database “workshop” using PhpMyAdmin .
  2. Install wordpress – keep database password empty.
  3. Install the “betheme” theme and import the demoset “University” with attachments. You can find it in appearance -> Betheme demo data -> select Demo and scroll down to university.
  4. install plugins: Contact Form 7, Slider Revolution and Duplicate Post. All those plugins can be found under appearance -> install plugins.
  5. Import the “university slider” for Slider Revolution. The slider can be found in the workshop zip folder -> Betheme -> slider-revolution-demo. Now you should see a Slider on the homepage.
  6. Enhance your homepage with a customized design: Change logo, favicon, menu structure,…, add menu/pages (“Contact us”, “About us”). Most design settings can be set using the Betheme options.
  7. Design the “About us” page with some information about you. Use the MuffinBuilder to add the pages content.
  8. Design the “Contact us” page and add a contact form there. Send an email to your email-address using the contact form. Use the plugin “Contact Form 7” to achieve this. To allow send email, please Install “WP Mail smtp” plugin and select sendgrid option and put the api key into the appropriate field: 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
  9. Create a page “News” and set it to show all posts. Create at least two dummy posts. You can add more if you like to use them for playing around with the post-grids, the different post-display-types and post-behaviour in general.
  10. Add into your About us “Our Team element” is a tool from Muffinbuilder. Add some infos of you and image.


Advanced Goals

  1. Implement a shortcode function in the already existing “Hello Dolly” plugin. The shortcode must display something on the page (the content is up to you). For more infomation have a look at:
  2. Create Ajax communication: Add a ajax call (client-side JavaScript) and add an ajax-endpoint (server-site PHP) in the “Hello Dolly” plugin. The endpoint shall return the current time, which shall be displayed client-side.
  3. Check if your site is responsive. Use Chrome or Firefox to simulate mobile view and check the responsiveness of your site. Make some changes if your site is not responsive (reference CSS media queries for this purpose).
  4. After all things are done, install the plugin “all in one wp-migration” and make a backup of your site.
  1. Create a parametrized shortcode for maths with two variables and one operator. It should look like the following: [maths first=”1″ op=”+” last=”2″] which should output “1 + 2 = 3”.
  2. Create a shortcode for a frontend calculator. The shortcode itself shall display the necessary form and input fields where the user can put in some maths. Send it via AJAX to the serverside Ajax handler and calculate the result of the operation. The result shall be returned to the frontend ajax handler, which displays the result on the page like the upper shortcode.
Show Buttons
Hide Buttons