Loker Website

Project Details

As a UX engineer, I developed a web portal for job vacancy information that is very simple and built using WordPress

Feature inspiration

• lokerbandung.id
• wpremotework.com
• remoteotter.com

Layout inspiration

• freebiesbug.com
• ycode.com

Features

Here is a comprehensive overview of the features I have developed and implemented in this job website…

Job Vacancy Information Features

In dashboard

• Created custom post type lowongan which in English means job vacancy/job posting
• Created taxonomies such as location, education, experience, and job type to enrich job vacancy information features
• Registered custom fields for lowongan CPT using ACF Pro
• Created custom company role with the following restrictions:
  • can only create new posts in lowongan CPT
  • can only edit lowongan CPT posts that the user created
  • cannot edit other people’s posts
  • custom logout redirect to homepage
• Registered custom fields using ACF for the author themselves (company logo, etc.)
• Created custom register page specifically for registering company role
• Created custom login page specifically for logging in `company` role

In frontend

• Display list of company authors in alphabetical format with filter features
• Customized single author to display:
  • author custom fields
  • simple ajax load-more for job postings created by `company` role users
• Single job vacancy page with informative layout
• Archive page for job vacancies with filters and pagination

Recommendation Features

• Custom Post Type rekomendasi for affiliate products
• Recommendation category taxonomy
• Recommendation page with filters and ajax load-more
• Integration with affiliate marketing system

Article & Blog Features

• Custom permalink structure for articles
• Related posts functionality
• Author box with complete information
• Post navigation (previous/next)
• Comments system
• Category and tag support

Frontend & User Experience Features

• AJAX Filter & Load More: Implementation of category-based filtering with ajax and load more functionality
• Responsive Design: Layout responsive for various devices
• Modern UI/UX: Using SCSS with modular structure
• Performance Optimization: Lazy loading and asset optimization
• SEO Friendly: Breadcrumb navigation and semantic HTML

Navigation & Layout Features

• Custom Breadcrumb: Dynamic breadcrumb navigation that is SEO friendly
• Custom Menu System: Register multiple navigation menus
• Widget Areas: Sidebar, header, and main content widget areas
• Custom Header & Footer: Header and footer that can be customized

Custom Gutenberg Blocks

• Cross-Post Article: Block for displaying related articles
• Guide Point: Block for guides or important points
• Taxonomy List: Block for displaying taxonomy lists
• ACF Integration: All blocks use ACF Pro for field management
• Custom Block Category: Special category “Rizwan Custom Blocks”

Form & Contact Features

• Contact Form 7 Integration: Responsive contact form
• Asset Optimization: Load CF7 assets only on required pages
• Custom Form Styling: Consistent styling with theme

Admin & Backend Features

• Custom Role Management: Company role with limited permissions
• Meta Box Customization: Custom meta box for job vacancies
• Admin Interface: User-friendly interface for company role
• Media Management: Media access restrictions for certain roles

Technical & Development Features

• SCSS Architecture: Modular and maintainable SCSS structure
• Asset Management: Proper enqueue/dequeue of scripts and styles
• Customizer Integration: WordPress customizer for theme options
• Hook System: Proper WordPress hooks and filters
• Security: Nonce verification and capability checks

Completed Pages

• Contact Page
• 404 page
• Login Page
• Register Page
• Recommendation Page
• Company List Page
• Single Job Vacancy Page
• Single Post/Article Page
• Archive Pages
• Search Results Page

Technologies & Tools Used

• WordPress: Main CMS
• ACF Pro: Advanced Custom Fields for custom fields
• SCSS/Sass: CSS preprocessor
• JavaScript: Vanilla JS with AJAX
• Gutenberg: Block editor with custom blocks
• Contact Form 7: Form handling
• FontAwesome: Icon library
• WOW.js: Animation library
• Isotope: Filtering and sorting library

Performance & Optimization Features

• Conditional asset loading
• Image optimization
• Lazy loading implementation
• CSS and JS minification ready
• Database query optimization
• Caching ready structure