Crafting Unique and Customizeable Websites is my Passion

Crafting Unique and Customizeable Websites is my Passion

hero frame

Customizable WordPress Website – the Summary

The Frontend

The Content-Box

Contntent Box
Figure 2.0: Content Box

The basic idea of this website and the wish of my client was to develop an online business card – with a quick overview of all relevant information – which should lead to quick contact by the visitor. Instead of creating a separate page for each topic, I decided to create a content box with a tab menu – using jQuery – through which you can easily navigate through without loading delays. This way, the two essential questions of a business card are answered quickly. Who am I (about-me)? What am I doing (service)? Get in contact (Contact). Now let’s take a look at the code in the following figure.

HomePage Source Code
Figure 2.1: Content Box

Project Details

Website: Customizable WordPress Website & Blog


Responsive: Yes

CMS: WordPress

Main Language: PHP

other languages: jQuery/JavaScript, Bootstrap/CSS,


  • Homepage
    • Content Box
      • Tab Navigation
      • About me, Service, Contact
    • Timeline
      • Custom Post Types
      • Custom Fields
  • WordPress Blog


  • WordPress Dashboard
    • Plugins:
      • Custom Post Types UI
      • Advanced Custom Fields
      • Contact Form 7
      • Squirrly
      • WP Fastest Cache

Theme: Ambi Consulting

Level: Advanced

Purpose: Professional Website, Company Timeline, Consulting - blog
Content-Box – Navigation Menu – Customizable WordPress Website
<section id="infobox" data-type="background" data-speed="5">
    <div class="card">
        <!--=== INFOBOX NAVIGATION 
        <nav id="infobox-nav">
            <ul id="ul-faq-nav" class="nav nav-tabs">
                <li class="nav-item">
                <span id="tab-about-me" class="nav-link active"><a href="<?php bloginfo("stylesheet_directory");?>/home/" style="pointer-events:none" >About me</a></span>
                <li class="nav-item">
                <span id="tab-service" class="nav-link"><a href="<?php bloginfo("stylesheet_directory");?>/service/" style="pointer-events:none">Service</a></span>
                <li class="nav-item">
                <span id="tab-contact" class="nav-link"><a  href="<?php bloginfo("stylesheet_directory");?>/contact-2/"  style="pointer-events:none" >Contact</a></span>
        <!--=== INFOBOX BODY 
        <div class="info-box-content">

Figure 2.2: HTML Code for the Content-Box Menu – created with Bootstrap

Now let’s have a Look at the jQuery script

be the first to share shared this post

Leave a Reply

Your email address will not be published. Required fields are marked *

top frame
freebie picture

Sign up to my mailing list and receive occasional updates, new bogposts, freebies, giveaways and more

    Terms of privacy and data protection

    Get in Touch

    Feel free to send me a message. I'll gladly respond to all your requests.