Quick Start Guide

Getting Started

This guide walks you through setting up WordPress, installing VertiSub CMS, and creating your first content. By the end, you’ll have a working site with services and courses.

This guide assumes you have a hosting environment ready. If not, consider using hosting providers like SiteGround, Bluehost, or WP Engine.

Step 1: Install WordPress

If you don’t have WordPress installed yet:

Download WordPress

Visit wordpress.org and download the latest version.Or via command line:

wp core download --locale=en_US

Create Database

Create a MySQL database for your WordPress site:

CREATE DATABASE vertisub_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'vertisub_user'@'localhost' IDENTIFIED BY 'strong_password';
GRANT ALL PRIVILEGES ON vertisub_db.* TO 'vertisub_user'@'localhost';
FLUSH PRIVILEGES;

Run Installation

Access your domain in a browser and follow the WordPress installation wizard:

Select language
Enter database details
Create admin account
Install WordPress

Or via WP-CLI:

wp core config --dbname=vertisub_db --dbuser=vertisub_user --dbpass=strong_password
wp core install --url=https://yoursite.com --title="Your Site" --admin_user=admin [email protected]

Step 2: Install VertiSub Theme

Install Theme Files

Upload the theme via WordPress admin:

Go to Appearance → Themes → Add New
Click Upload Theme
Choose vertisubtheme.zip
Click Install Now
Click Activate

Install Required Plugin

Install Advanced Custom Fields:

Go to Plugins → Add New
Search “Advanced Custom Fields”
Click Install Now on ACF by Delicious Brains
Click Activate

ACF is required for the theme to function properly. Don’t skip this step!

Configure Permalinks

Set up pretty URLs:

Go to Settings → Permalinks
Select Post name
Click Save Changes

This flushes rewrite rules for custom post types.

Step 3: Basic Configuration

Set Up Navigation

Create your main menu:

Go to Appearance → Menus
Create a new menu called “Main Menu”
Add these pages:
- Home
- Services (Servicios)
- Courses (Cursos)
- About
Assign to Primary Menu location
Click Save Menu

Upload Site Logo

Add your branding:

Go to Appearance → Customize
Navigate to Site Identity
Click Select Logo
Upload your logo (recommended: 300x100px PNG)
Click Publish

Configure Site Settings

Set basic information:

Go to Settings → General
Set Site Title: Your Company Name
Set Tagline: Your company description
Set Time Zone to your location
Click Save Changes

Step 4: Create Your First Service

Now let’s create a service offering. The Services custom post type is perfect for showcasing your maritime services.

Access Services

In WordPress admin, click Servicios in the sidebar.You’ll see the services manager with a hammer icon (🔨).

Add New Service

Click Añadir servicio (Add New Service).The service post type supports:

services.php:30

'supports' => array('title', 'thumbnail', 'editor')

Fill in:

Title: “Underwater Welding Services”
Description: Use the editor to describe your service
Featured Image: Upload a service photo (400x300px recommended)

Add Multimedia Content

Scroll down to the Multimedia metabox:

// Add multiple images
Click "+ Agregar Imagen"
Click "Subir" to upload
Select image from media library
Add more images as needed

The multimedia metabox implementation:

services.php:62

function vertisub_servicios_multimedia_callback($post) {
    $imagenes    = get_post_meta($post->ID, '_imagenes_reseña', true);
    $videos      = get_post_meta($post->ID, '_videos_reseña', true);
    $video_urls  = get_post_meta($post->ID, '_video_urls_reseña', true);
    // ... render fields
}

Associate with Countries

Select countries where this service is available:In the Países metabox (sidebar), hold Ctrl/Cmd and select multiple countries:

Mexico
Panama
Colombia

services.php:216

function vertisub_servicios_paises_callback($post) {
    $paises = get_posts(array(
        'post_type' => 'paises',
        'posts_per_page' => -1,
        'orderby' => 'title',
        'order' => 'ASC'
    ));
    // ... render multi-select
}

Publish Service

Click Publish to make your service live!Your service is now available at:

https://yoursite.com/servicios/underwater-welding-services/

Step 5: Create Your First Course

Courses are more complex than services, with instructor relationships, curriculum, and testimonials.

Access Courses

Click Cursos in the admin sidebar (trophy icon 🏆).

Add New Course

Click Añadir Nuevo and fill in basic information:

Title: “Commercial Diving Certification Level 1”
Description: Full course overview in the editor
Featured Image: Course thumbnail (recommended dimensions for thumbnails)

Add Course Images

In the Detalles del Curso metabox:

courses.php:79

<h3>Imágenes del Curso</h3>
<div id="imagenes-wrapper">
    // Image uploader with preview
</div>
<button class="add-image">+ Añadir Imagen</button>

Click + Añadir Imagen
Upload training photos
Add 3-5 images showcasing the course

Configure Modalities

Add course delivery methods:

courses.php:95

<h3>Modalidades</h3>
// Dynamic field for modalities

Add modalities like:

“Online Learning”
“In-Person Training”
“Hybrid Format”

Click + Añadir Modalidad for each one.

Add Introduction Video

Paste a YouTube or Vimeo URL:

https://www.youtube.com/watch?v=your-intro-video

This video will be featured prominently on the course page.

Add Testimonials

Add video testimonials from past students:

courses.php:112

<h3>Videos de Testimonios</h3>
// Multiple video URL fields

Click + Añadir Testimonio
Paste testimonial video URL
Add 2-3 testimonials

Build Course Curriculum

Add course topics/modules:

courses.php:125

<h3>Temario</h3>
// Dynamic curriculum builder

Example curriculum:

“Introduction to Commercial Diving”
“Safety Protocols and Equipment”
“Underwater Welding Techniques”
“Certification Exam Preparation”

Click + Añadir Tema for each module.

Set Course URLs

Add important links:

courses.php:177

<h3>Enlaces</h3>
- URL Inscripción: Registration page
- URL Más Información: Details page
- URL Plataforma de Aprendizaje: LMS link
- URL Página Oficial: Official course page

Example:

URL Inscripción: https://yoursite.com/register/diving-level-1
URL Plataforma: https://learn.yoursite.com

Associate with Countries

Select countries where the course is offered:

courses.php:147

<h3>Convenios con Países</h3>
// Checkboxes with contact URL for each country

For each country:

Check the checkbox
Add contact URL: https://yoursite.com/contact/mexico

Add Custom Agreements

If you have special partnerships:

courses.php:163

<h3>Convenios Personalizados</h3>

Example:

Title: “Partnership with Marine Institute”
URL: https://marineinstitute.com/partnership

Publish Course

Click Publish to make your course live!Access it at:

https://yoursite.com/cursos/commercial-diving-certification-level-1/

Step 6: Add Supporting Content

Create Countries

Before services and courses can be associated with locations, add countries:

Add Country

Go to Países in admin menu
Click Añadir Nuevo
Add: “Mexico”, “Panama”, “Colombia”, etc.
Fill in contact details (phone, email, address)
Publish

Add Certifications

Showcase your professional certifications:

certification.php:10

register_post_type('certificaciones', array(
    'labels' => array(
        'name' => 'Certificaciones',
        'singular_name' => 'Certificación',
    ),
    'public' => true,
    'menu_icon' => 'dashicons-awards',
    'supports' => array('title', 'editor', 'thumbnail'),
));

Add Certification

Go to Certificaciones
Add title: “ISO 9001:2015 Certified”
Add description in editor
Upload certification logo as featured image
Publish

Step 7: Customize Appearance

Understanding the Design System

The theme uses CSS variables for consistent theming:

style.css:18

:root {
  --primary-color: #0f1319;      /* Dark blue-black */
  --secondary-color: #e3c5ca;    /* Soft pink */
  --accent-color: #bb0c2b;       /* Bold red */
  --accent-secondary: #bb1447;   /* Deep red */
  --text-dark: #544949;          /* Dark gray */
  --text-light: #ffffff;         /* White */
  --transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

The theme includes a modern navigation system:

style.css:256

.navbar-modern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1.5rem 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

Features:

Fixed header with blur effect
Responsive hamburger menu
Dropdown support
Smooth animations with AOS library

Step 8: Test Your Site

View Frontend

Visit your site homepage:

https://yoursite.com

Check that:

Logo displays correctly
Menu works with dropdowns
Mobile hamburger menu functions

Test Service Page

Navigate to your service:

https://yoursite.com/servicios/underwater-welding-services/

Verify:

Images display in gallery
Videos play correctly
Country associations show

Test Course Page

Visit your course:

https://yoursite.com/cursos/commercial-diving-certification-level-1/

Confirm:

Introduction video plays
Curriculum displays properly
Registration links work
Testimonials are visible

Mobile Testing

Test on mobile devices:

Responsive layouts work
Touch navigation functions
Images load properly
Videos are responsive

Common Tasks

Adding More Services

// Services are stored with these meta fields:
_imagenes_reseña      // Array of image URLs
_videos_reseña        // Array of video file URLs  
_video_urls_reseña    // Array of video embed URLs
_servicio_paises      // Array of country post IDs

Repeat Step 4 for each service you want to add.

Adding More Courses

// Course meta fields:
_curso_imagenes       // Array of attachment IDs
_curso_modalidades    // Array of strings
_curso_intro_video    // Video URL string
_curso_testimonios    // Array of video URLs
_curso_temario        // Array of curriculum items
_curso_url_inscribir  // Registration URL
_curso_paises         // Array of country IDs
_curso_convenios      // Array of agreement objects

Repeat Step 5 for additional courses.

Querying Custom Post Types

To display services in templates:

$services = new WP_Query(array(
    'post_type' => 'servicios',
    'posts_per_page' => 10,
    'orderby' => 'date',
    'order' => 'DESC'
));

if ($services->have_posts()) :
    while ($services->have_posts()) : $services->the_post();
        // Display service
        the_title();
        the_content();
        
        // Get multimedia
        $images = get_post_meta(get_the_ID(), '_imagenes_reseña', true);
        $videos = get_post_meta(get_the_ID(), '_video_urls_reseña', true);
    endwhile;
    wp_reset_postdata();
endif;

Performance Tips

The theme is already optimized, but here are additional tips:

Image Optimization: Use WebP format and compress images
Caching: Install WP Rocket or similar caching plugin
CDN: Use Cloudflare for static assets
Lazy Loading: Images lazy load by default in WordPress 5.5+
Database: Optimize database regularly with WP-Optimize

Next Steps

You now have a working VertiSub CMS site! Continue with:

Custom Post Types

Deep dive into all post types

Template System

Learn about page templates

Customization

Customize colors and styles

Troubleshooting

Services/Courses Not Showing

Flush permalinks:

wp rewrite flush

Or visit: Settings → Permalinks and click Save.

Multimedia Not Saving

Check file upload limits:

wp-config.php

@ini_set('upload_max_size', '64M');
@ini_set('post_max_size', '64M');
@ini_set('max_execution_time', '300');

Styles Not Loading

Clear cache and check:

functions.php:12

require_once VERTISUB_DIR . '/inc/enqueue.php';

Verify this line exists in functions.php.

Getting Help

If you need assistance:

Check WordPress error log: /wp-content/debug.log
Enable debug mode to see errors
Contact Vertisub support with:
- WordPress version
- PHP version
- Error messages
- Screenshots

Always backup your database before making major changes!

Congratulations! You’ve successfully set up VertiSub CMS and created your first content. 🎉

Get Started

Core Concepts

Features

Customization

Guides

Getting Started

Step 1: Install WordPress

Step 2: Install VertiSub Theme

Step 3: Basic Configuration

Step 4: Create Your First Service

Step 5: Create Your First Course

Step 6: Add Supporting Content

Create Countries

Add Certifications

Step 7: Customize Appearance

Understanding the Design System

Navigation Styles

Step 8: Test Your Site

Common Tasks

Adding More Services

Adding More Courses

Querying Custom Post Types

Performance Tips

Next Steps

Custom Post Types

Template System

Customization

Troubleshooting

Services/Courses Not Showing

Multimedia Not Saving

Styles Not Loading

Getting Help

Build docs developers (and LLMs) love

Get Started

Core Concepts

Features

Customization

Guides

​Getting Started

​Step 1: Install WordPress

​Step 2: Install VertiSub Theme

​Step 3: Basic Configuration

​Step 4: Create Your First Service

​Step 5: Create Your First Course

​Step 6: Add Supporting Content

​Create Countries

​Add Certifications

​Step 7: Customize Appearance

​Understanding the Design System

​Navigation Styles

​Step 8: Test Your Site

​Common Tasks

​Adding More Services

​Adding More Courses

​Querying Custom Post Types

​Performance Tips

​Next Steps

Custom Post Types

Template System

Customization

​Troubleshooting

​Services/Courses Not Showing

​Multimedia Not Saving

​Styles Not Loading

​Getting Help

Build docs developers (and LLMs) love

Getting Started

Step 1: Install WordPress

Step 2: Install VertiSub Theme

Step 3: Basic Configuration

Step 4: Create Your First Service

Step 5: Create Your First Course

Step 6: Add Supporting Content

Create Countries

Add Certifications

Step 7: Customize Appearance

Understanding the Design System

Navigation Styles

Step 8: Test Your Site

Common Tasks

Adding More Services

Adding More Courses

Querying Custom Post Types

Performance Tips

Next Steps

Troubleshooting

Services/Courses Not Showing

Multimedia Not Saving

Styles Not Loading

Getting Help