Creating Your First Page in XOOPS¶

Learn how to create, format, and publish your first piece of content in XOOPS.

Understanding XOOPS Content¶

What is a Page/Post?¶

In XOOPS, content is managed through modules. The most common content types are:

Type	Description	Use Case
Page	Static content	About us, Contact, Services
Post/Article	Time-stamped content	News, Blog posts
Category	Content organization	Group related content
Comment	User feedback	Allow visitor interaction

This guide covers creating a basic page/article using XOOPS' default content module.

Accessing the Content Editor¶

From Admin Panel¶

Log in to admin panel: http://your-domain.com/xoops/admin/
Navigate to Content > Pages (or your content module)
Click "Add New Page" or "New Post"

Frontend (if Enabled)¶

If your XOOPS is configured to allow frontend content creation:

Log in as registered user
Go to your profile
Look for "Submit Content" option
Follow the same steps below

Content Editor Interface¶

The content editor includes:

┌─────────────────────────────────────┐
│ Content Editor                      │
├─────────────────────────────────────┤
│                                     │
│ Title: [________________]           │
│                                     │
│ Category: [Dropdown]                │
│                                     │
│ [B I U] [Link] [Image] [Video]    │
│ ┌─────────────────────────────────┐ │
│ │ Enter your content here...      │ │
│ │                                 │ │
│ │ You can use HTML tags here      │ │
│ └─────────────────────────────────┘ │
│                                     │
│ Description (Meta): [____________]  │
│                                     │
│ [Publish] [Save Draft] [Preview]   │
│                                     │
└─────────────────────────────────────┘

Step-by-Step Guide: Creating Your First Page¶

Step 1: Access Content Editor¶

In admin panel, click Content > Pages
Click "Add New Page" or "Create"
You'll see the content editor

Step 2: Enter Page Title¶

In the "Title" field, enter your page name:

Title: Welcome to Our Website

Best practices for titles: - Clear and descriptive - Include keywords if possible - 50-60 characters ideal - Avoid ALL CAPS (hard to read) - Be specific (not "Page 1")

Step 3: Select Category¶

Choose where to organize this content:

Category: [Dropdown ▼]

Options might include: - General - News - Blog - Announcements - Services

If categories don't exist, ask administrator to create them.

Step 4: Write Your Content¶

Click in the content editor area and type your text.

Basic Text Formatting¶

Use the editor toolbar:

Button	Action	Result
B	Bold	Bold text
I	Italic	Italic text
U	Underline	Underlined text

Using HTML¶

XOOPS allows safe HTML tags. Common examples:

<!-- Paragraphs -->
<p>This is a paragraph.</p>

<!-- Headings -->
<h1>Main Heading</h1>
<h2>Subheading</h2>

<!-- Lists -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- Bold and Italic -->
<strong>Bold text</strong>
<em>Italic text</em>

<!-- Links -->
<a href="https://example.com">Link text</a>

<!-- Line breaks -->
<br>

<!-- Horizontal rule -->
<hr>

Safe HTML Examples¶

Recommended tags: - Paragraphs: <p>, <br> - Headings: <h1> to <h6> - Text: <strong>, <em>, <u> - Lists: <ul>, <ol>, <li> - Links: <a href=""> - Blockquotes: <blockquote> - Tables: <table>, <tr>, <td>

Avoid these tags (may be disabled for security): - Scripts: <script> - Styles: <style> - Iframes: <iframe> (unless configured) - Forms: <form>, <input>

Step 5: Add Images¶

Option 1: Insert Image URL¶

Using the editor:

Click Insert Image button (image icon)
Enter image URL: https://example.com/image.jpg
Enter alt text: "Description of image"
Click "Insert"

HTML equivalent:

<img src="https://example.com/image.jpg" alt="Description">

Option 2: Upload Image¶

Upload image to XOOPS first:
Go to Content > Media Manager
Upload your image
Copy the image URL
In content editor, insert using URL (above steps)

Image Best Practices¶

Use appropriate file sizes (optimize images)
Use descriptive filenames
Always include alt text (accessibility)
Supported formats: JPG, PNG, GIF, WebP
Recommended width: 600-800 pixels for content

Step 6: Embed Media¶

Embed Video from YouTube¶

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  frameborder="0" allowfullscreen>
</iframe>

Replace VIDEO_ID with the YouTube video ID.

To find YouTube video ID: 1. Open video on YouTube 2. URL is: https://www.youtube.com/watch?v=VIDEO_ID 3. Copy the ID (characters after v=)

Embed Video from Vimeo¶

<iframe src="https://player.vimeo.com/video/VIDEO_ID"
  width="640" height="360" frameborder="0"
  allow="autoplay; fullscreen" allowfullscreen>
</iframe>

Step 7: Add Meta Description¶

In the "Description" field, add a brief summary:

Description: Learn how to get started with our website.
This page provides an overview of our services and how we can help you.

Meta description best practices: - 150-160 characters - Include main keywords - Should accurately summarize content - Used in search engine results - Make it compelling (users see this)

Step 8: Configure Publishing Options¶

Publish Status¶

Choose publication status:

Status: ☑ Published

Options: - Published: Visible to public - Draft: Only visible to admins - Pending Review: Awaiting approval - Archived: Hidden but kept

Visibility¶

Set who can see this content:

Visibility: ☐ Public
           ☐ Registered Users Only
           ☐ Private (Admin Only)

Publication Date¶

Set when content becomes visible:

Publish Date: [Date Picker] [Time]

Leave as "Now" to publish immediately.

Allow Comments¶

Enable or disable visitor comments:

Allow Comments: ☑ Yes

If enabled, visitors can add feedback.

Step 9: Save Your Content¶

Multiple save options:

[Publish Now]  [Save as Draft]  [Schedule]  [Preview]

Publish Now: Make visible immediately
Save as Draft: Keep private for now
Schedule: Publish at future date/time
Preview: See how it looks before saving

Click your choice:

Click [Publish Now]

Step 10: Verify Your Page¶

After publishing, verify your content:

Go to your website homepage
Navigate to your content area
Look for your newly created page
Click to view it
Check:
Content displays correctly
Images appear
Formatting looks good
Links work
Title and description correct

Example: Complete Page¶

Title¶

Getting Started with XOOPS

Content¶

<h2>Welcome to XOOPS</h2>

<p>XOOPS is a powerful and flexible open-source
content management system. It allows you to build
dynamic websites with minimal technical knowledge.</p>

<h3>Key Features</h3>

<ul>
  <li>Easy content management</li>
  <li>User registration and management</li>
  <li>Module system for extensibility</li>
  <li>Flexible theming system</li>
  <li>Built-in security features</li>
</ul>

<h3>Getting Started</h3>

<p>Here are the first steps to get your XOOPS site
running:</p>

<ol>
  <li>Configure basic settings</li>
  <li>Create your first page</li>
  <li>Set up user accounts</li>
  <li>Install additional modules</li>
  <li>Customize appearance</li>
</ol>

<img src="https://example.com/xoops-logo.jpg"
  alt="XOOPS Logo">

<p>For more information, visit
<a href="https://xoops.org/">xoops.org</a></p>

Meta Description¶

Get started with XOOPS CMS. Learn about features
and the first steps to launch your dynamic website.

Advanced Content Features¶

Using WYSIWYG Editor¶

If a rich text editor is installed:

[B] [I] [U] [Link] [Image] [Code] [Quote]

Click buttons to format text without HTML.

Inserting Code Blocks¶

Display code examples:

<pre><code>
// PHP Example
$variable = "Hello World";
echo $variable;
</code></pre>

Creating Tables¶

Organize data in tables:

<table border="1" cellpadding="5">
  <tr>
    <th>Feature</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Flexible</td>
    <td>Easy to customize</td>
  </tr>
  <tr>
    <td>Powerful</td>
    <td>Full-featured CMS</td>
  </tr>
</table>

Inline Quotes¶

Highlight important text:

<blockquote>
"XOOPS is a powerful content management system
that empowers you to build dynamic websites."
</blockquote>

SEO Best Practices for Content¶

Optimize your content for search engines:

Title¶

Include main keyword
50-60 characters
Unique per page

Meta Description¶

Include keyword naturally
150-160 characters
Compelling and accurate

Content¶

Write naturally, avoid keyword stuffing
Use headings (h2, h3) appropriately
Include internal links to other pages
Use alt text on all images
Aim for 300+ words for articles

URL Structure¶

Keep URLs short and descriptive
Use hyphens to separate words
Avoid special characters
Example: /about-our-company

Managing Your Content¶

Edit Existing Page¶

Go to Content > Pages
Find your page in the list
Click Edit or the page title
Make changes
Click Update

Delete Page¶

Go to Content > Pages
Find your page
Click Delete
Confirm deletion

Change Publication Status¶

Go to Content > Pages
Find page, click Edit
Change status in dropdown
Click Update

Troubleshooting Content Creation¶

Content Not Appearing¶

Symptom: Published page not showing on website

Solution: 1. Check publication status: Should be "Published" 2. Check publish date: Should be current or past 3. Check visibility: Should be "Public" 4. Clear cache: Admin > Tools > Clear Cache 5. Check permissions: User group must have access

Formatting Not Working¶

Symptom: HTML tags or formatting appear as text

Solution: 1. Verify HTML is enabled in module settings 2. Use proper HTML syntax 3. Close all tags: <p>Text</p> 4. Use allowed tags only 5. Use HTML entities: < for <, & for &

Images Not Displaying¶

Symptom: Images show broken icon

Solution: 1. Verify image URL is correct 2. Check image file exists 3. Verify proper permissions on image 4. Try uploading image to XOOPS instead 5. Check for external blocking (may need CORS)

Character Encoding Issues¶

Symptom: Special characters appear as gibberish

Solution: 1. Save file as UTF-8 encoding 2. Ensure page charset is UTF-8 3. Add to HTML head: <meta charset="UTF-8"> 4. Avoid copy-pasting from Word (use plain text)

Content Workflow Best Practices¶

Recommended Process¶

Write in Editor First: Use admin content editor
Preview Before Publishing: Click Preview button
Add Metadata: Complete title, description, tags
Save as Draft First: Save as draft to avoid losing work
Final Review: Re-read before publishing
Publish: Click Publish when ready
Verify: Check on live site
Edit if Needed: Make corrections quickly

Version Control¶

Always keep backups:

Before Major Changes: Save as new version or backup
Archive Old Content: Keep unpublished versions
Date Your Drafts: Use clear naming: "Page-Draft-2025-01-28"

Publishing Multiple Pages¶

Create a content strategy:

Homepage
├── About Us
├── Services
│   ├── Service 1
│   ├── Service 2
│   └── Service 3
├── Blog
│   ├── Article 1
│   ├── Article 2
│   └── Article 3
├── Contact
└── FAQ

Create pages to follow this structure.

Next Steps¶

After creating your first page:

Tags: #content-creation #pages #publishing #editor

Related Articles: - Admin-Panel-Overview - Managing-Users - Installing-Modules - Basic-Configuration