Arq Editor Installation

Requirements

• WordPress 5.0 or higher
• PHP 7.4 or higher
• Modern web browser (Chrome, Firefox, Safari, Edge)

Installation Steps

Method 1: WordPress Admin

1. Download the Arq Editor ZIP file
2. Go to WordPress Admin → Plugins → Add New
3. Click "Upload Plugin" button
4. Choose the ZIP file and click "Install Now"
5. Click "Activate Plugin"

Method 2: FTP Upload

1. Extract the ZIP file
2. Upload the base47-html-editor folder to /wp-content/plugins/
3. Go to WordPress Admin → Plugins
4. Find "Arq Editor" and click "Activate"

First Time Setup

After activation, you'll see a welcome screen. Follow the setup wizard to configure your preferences.

Arq Editor Features

Core Features (Free)

• Classic HTML Editor - Clean, distraction-free HTML editing
• Syntax Highlighting - Color-coded HTML, CSS, and JavaScript
• Live Preview - See changes in real-time
• Template Manager - Save and reuse your templates
• Code Snippets - Quick access to common code patterns
• Responsive Preview - Test on different screen sizes

Pro Features

• Monaco Editor - Full VS Code editor experience in WordPress
• IntelliSense - Smart code completion and suggestions
• Multi-cursor Editing - Edit multiple lines simultaneously
• Advanced Find & Replace - Regex support and bulk operations
• Code Formatting - Auto-format HTML, CSS, and JavaScript
• Emmet Support - Fast HTML/CSS writing with abbreviations
• Priority Support - Get help faster from our team

Keyboard Shortcuts

• Ctrl/Cmd + S - Save
• Ctrl/Cmd + P - Preview
• Ctrl/Cmd + F - Find
• Ctrl/Cmd + H - Find & Replace
• Ctrl/Cmd + / - Toggle Comment
• Alt + Shift + F - Format Code (Pro)

Editor Modes

Classic Editor (Free)

The classic editor provides a clean, focused environment for HTML editing with syntax highlighting and basic features.

When to Use Classic Editor

• Quick edits and simple pages
• Learning HTML basics
• Lightweight editing needs

Monaco Editor (Pro)

Monaco is the same editor that powers VS Code, giving you a professional development experience right in WordPress.

When to Use Monaco Editor

• Complex projects with lots of code
• Professional development work
• Need advanced features like IntelliSense
• Working with large files

Switching Between Modes

You can switch between Classic and Monaco (Pro) editors using the mode switcher at the top of the editor page.

Template Manager

What are Templates?

Templates are pre-built HTML pages that you can install and customize. They help you get started quickly with professional designs.

Installing Templates

1. Go to Arq Editor → Templates
2. Browse available templates
3. Click "Install" on your chosen template
4. The template will be added to your pages

Creating Custom Templates

1. Create your HTML page in the editor
2. Click "Save as Template"
3. Give it a name and description
4. Your template is now available for reuse

Sharing Templates

You can export your templates as ZIP files and share them with others or sell them on the Base47 Marketplace.

Arq Editor Pro

Upgrading to Pro

Arq Editor Pro unlocks the Monaco editor and advanced features. Choose a plan that fits your needs:

• Starter - $79/year for 3 sites
• Pro - $129/year for 10 sites
• Unlimited - $249/year for unlimited sites

License Activation

1. Purchase a license from base47.art
2. Go to WordPress Admin → Base47 → License
3. Enter your license key
4. Click "Activate License"
5. The Pro plugin will auto-install

Monaco Editor Features

IntelliSense

Get smart code suggestions as you type. Monaco understands HTML, CSS, and JavaScript syntax.

Multi-cursor Editing

Hold Alt and click to add multiple cursors. Edit multiple lines at once.

Command Palette

Press F1 or Ctrl/Cmd + Shift + P to open the command palette and access all editor commands.

Code Formatting

Press Alt + Shift + F to auto-format your code with proper indentation.

Nexus Theme Installation

Requirements

• WordPress 5.0 or higher
• Arq Editor plugin installed
• PHP 7.4 or higher

Installation Steps

Method 1: WordPress Admin

1. Download the Nexus Theme ZIP file
2. Go to WordPress Admin → Appearance → Themes
3. Click "Add New" → "Upload Theme"
4. Choose the ZIP file and click "Install Now"
5. Click "Activate"

Method 2: FTP Upload

1. Extract the ZIP file
2. Upload the nexus-theme folder to /wp-content/themes/
3. Go to WordPress Admin → Appearance → Themes
4. Find "Nexus Theme" and click "Activate"

Nexus Theme Setup

Initial Configuration

After activating Nexus Theme, you'll see a welcome screen with setup options.

Homepage Setup

1. Go to Settings → Reading
2. Choose "A static page" for homepage
3. Select your homepage from the dropdown
4. Save changes

Menu Setup

1. Go to Appearance → Menus
2. Create a new menu
3. Add pages to your menu
4. Assign to "Primary Menu" location
5. Save menu

Theme Features

• Zero Bloat - Only 15KB CSS, no jQuery
• Lightning Fast - Optimized for performance
• Arq Integration - Perfect companion for Arq Editor
• Responsive - Works on all devices
• SEO Friendly - Clean, semantic HTML

Nexus Theme Customization

Customizer Options

Go to Appearance → Customize to access theme options:

Colors

• Primary color
• Background color
• Text color
• Link color

Typography

• Heading font
• Body font
• Font sizes

Layout

• Container width
• Sidebar position
• Header style
• Footer layout

Custom CSS

Add custom CSS in Appearance → Customize → Additional CSS

/* Example custom CSS */
.site-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-primary {
  background: #ff6b00;
  color: white;
}

Child Theme

For advanced customization, create a child theme:

1. Create folder: nexus-child
2. Create style.css with theme header
3. Create functions.php to enqueue parent styles
4. Activate child theme

Arq Editor Integration

Why Nexus + Arq?

Nexus Theme is built specifically to work with Arq Editor, giving you complete control over your pages.

Benefits

• No theme CSS conflicts
• Full HTML control on every page
• Zero bloat from theme
• Fast page loads
• Professional results

Creating Pages with Arq

1. Create a new page in WordPress
2. Select "Arq Editor" template
3. Click "Edit with Arq"
4. Write your HTML, CSS, and JavaScript
5. Preview and publish

Best Practices

• Use semantic HTML for better SEO
• Keep CSS scoped to avoid conflicts
• Optimize images before uploading
• Test on multiple devices
• Use templates for consistency

Example Page Structure

<!-- Hero Section -->
<section class="hero">
  <h1>Welcome to My Site</h1>
  <p>Beautiful pages built with Arq Editor</p>
</section>

<!-- Content Section -->
<section class="content">
  <div class="container">
    <p>Your content here...</p>
  </div>
</section>