shopin.pk

WordPress Development Showcase

INTRODUCTION

Hi, I’m Shakir, a WordPress/PHP developer based in Berlin/Potsdam.
I’m passionate about building practical, well-structured WordPress solutions that balance clean design with solid technical implementation. This page showcases a selection of fully functional WordPress projects created to demonstrate my hands-on skills, development approach, and problem-solving mindset.

ABOUT THESE PROJECTS

Each project below was developed from scratch over a short time, using custom plugins, Gutenberg blocks, WooCommerce, and REST APIs.
The goal was simple:

  • Show how I approach real WordPress development
  • Demonstrate clean, structured, and reusable code
  • Highlight my ability to combine PHP, JS, APIs, and UI decisions

These are not theme hacks — they are small real-world features that show how I work as a developer.

✨ PROJECTS

📁 Project 1 — Custom Case Study System (Mini Case Showcase)

A lightweight system to manage and display design case studies inside WordPress.

What it does (for users)

  • Displays design case studies with images, titles, and descriptions
  • Each case opens to its own single case page
  • Clean, minimal layout that resembles a portfolio

What I developed (technical learning)

  • Built a custom plugin using pure PHP
  • Registered a Custom Post Type (case)
  • Added a taxonomy (case_type)
  • Created a custom shortcode ["case_showcase"]
  • Wrote custom responsive CSS (image left, text right)
  • Enqueued plugin-specific assets properly
  • Fixed CPT permalink + cache issues (LiteSpeed)

View Project

Case Studies Page
https://shopin.pk/case-studies/

Case Studies
Further Details

📁 Project 2 — Woo Ring Showcase (Mini WooCommerce Store)

A small demo shop that showcases a ring collection using WooCommerce and a custom plugin with three shortcodes.

What it does (for users)

  • Shows featured rings in a horizontal scroll “carousel”
  • Displays all rings in a clean product grid
  • Has a “Wishlist” style section for out-of-stock rings
  • Fully responsive layout on mobile and desktop

What I built (technical side)

  • Installed and configured WooCommerce
  • Created 13 realistic ring products with prices, stock, and attributes
  • Built a custom plugin with three shortcodes:
    • ["featured_rings"] – featured products in a row / carousel
    • ["all_rings"] – full product grid
    • ["wishlist_rings"] – out-of-stock products
  • Used WC_Product_Query to filter products by status and visibility
  • Wrote custom responsive CSS for product cards and layouts
  • Debugged issues with “Coming Soon” mode and caching differences (guest vs logged-in)

View Project

Ring Showcase Demo
https://shopin.pk/showcase/

    Showcase Page

    📁 Project 3 — Mini Testimonials Slider (Custom CPT + JS)

    A simple testimonial slider built as a reusable WordPress plugin.

    What it does (for users)

    • Shows testimonials one at a time in a clean card
    • Displays client name, photo, and quote
    • Has Prev/Next buttons for navigation
    • Fully responsive

    What I built (technical side)

    • A Testimonial Custom Post Type for managing feedback
    • A shortcode: ["testimonial_slider"]
    • A WP_Query loop to output testimonial cards
    • A small JavaScript slider (next/previous + active class switching)
    • Properly enqueued CSS + JS so the slider works on any page

    Emily Clark

    “Impressive attention to detail and clean execution. The project turned out better than we initially planned.”

    Daniel Martinez

    “Professional, organized, and easy to communicate with. The workflow felt efficient from start to finish.”

    Sarah Johnson

    “Great experience working with the team. The final result exceeded expectations and was delivered smoothly.”

    Further Details

    📁 Project 4 — REST API Weather Widget (External API Integration)

    A small widget that fetches live weather data for German cities using the OpenWeather API and displays it inside WordPress through a shortcode.

    What it does (for users)

    • Lets users select a German city from a dropdown
    • Displays live weather: temperature + description
    • Updates instantly when a different city is chosen
    • Fully responsive widget card
    • Works anywhere using the shortcode ["german_weather"]

    What I built (technical side)

    • A shortcode that outputs the widget structure and city selector
    • A JavaScript file that calls the OpenWeather REST API using fetch()
    • wp_localize_script() to safely pass API keys + settings from PHP to JS
    • Dynamic UI rendering based on API response
    • Custom CSS for card layout and mobile responsiveness
    • Proper WordPress enqueue of JS + CSS (no external CDN)
    Loading weather…
    Further Details

    This plugin creates a small weather widget that calls the OpenWeather REST API from JavaScript. The shortcode prints the city selector and an empty result area. JS listens for city changes, calls fetch() with the API URL and key passed via wp_localize_script, and then updates the widget dynamically. It’s a simple example showing that I can integrate external APIs into WordPress using the correct enqueue and security practices.

    📁 Project 5 — Site Statistics Widget (Custom REST API)

    What it does (for users)

    • Shows site name, total posts, pages, and comments
    • Displays data in a small info card on any page
    • Uses shortcode ["site_stats"] to place the widget

    What I built (technical side)

    • A custom REST route: /wp-json/shakir/v1/stats
    • A method that reads live counts from WordPress (posts, pages, comments)
    • A shortcode ["site_stats"] that calls the same logic and renders a styled stats box
    • Wrapped everything inside a simple PHP class for organization and reusability

    Site Statistics

    • Site: shopin.pk
    • Total Posts: 1
    • Total Pages: 7
    • Total Comments: 1

    Data from WordPress REST API (/wp-json/shakir/v1/stats)

    Further Details

    “This plugin defines a custom REST endpoint that exposes basic site stats as JSON, and a shortcode that uses the same data to show a small stats widget on the frontend. It’s a simple example of how I structure code in a class and reuse one data function for both REST and shortcode output.”

    📁 Project 6 — Custom Gutenberg Hero Banner

    A custom Gutenberg block I built as a plugin to add a full-width hero section to any page.

    What it does (for users)

    • Shows a big hero banner with:
      • Background image
      • Title
      • Subtitle
      • Call-to-action button
    • All content can be edited directly in the block editor.

    What I built (technical side)

    • Registered a custom Gutenberg block (shakir/hero-block)
    • Used block attributes for title, subtitle, button text, URL, and background image
    • Added an Inspector panel for the button URL and image picker
    • Used a PHP render callback to output the hero HTML with the selected background image and texts

    We build smart WordPress solutions.

    Custom plugins, fast performance, clean code.

    View Case Studies

    📁 Project 7 — WooCommerce Sales Stats API

    A small analytics plugin that shows key WooCommerce sales numbers and exposes them through a custom REST API.

    What it does (for users)

    • Shows a Sales Overview for the last 30 days:
      • Total orders
      • Total revenue
      • Average order value
      • Completed orders
      • Processing orders
    • Displays the data in a clean card layout via shortcode: ["woo_sales_stats"]
    • The same data is available as JSON at:
      /wp-json/shakir/v1/woo-sales

    What I built (technical side)

    • Calculated sales stats using wc_get_orders() and wc_get_order()
    • Created a custom REST endpoint: /wp-json/shakir/v1/woo-sales
    • Reused the same PHP function for both the REST API and the shortcode
    • Rendered the stats as a responsive grid of cards using a shortcode
    • Enqueued a small CSS file (woo-sales.css) to style the dashboard

    WooCommerce Sales – Last 30 Days

    Total Orders
    0
    Total Revenue
    €0.00
    Avg. Order Value
    €0.00
    Completed Orders
    0
    Processing Orders
    0

    Period: Jan 9 – Feb 8

    REST endpoint also works:

    https://shopin.pk/wp-json/shakir/v1/woo-sales

    ⭐ Why These Projects Matter

    • They show that I can work with real WordPress development, not just themes.
    • They cover core skills: custom post types, taxonomies, shortcodes, plugins, REST APIs, and Gutenberg blocks.
    • They demonstrate my ability to work with WooCommerce, custom product queries, and structured layouts.
    • They highlight clean UI decisions, responsive design, and practical problem-solving.
    • They represent how I approach development: simple, clear, and focused on real functionality.

    💛 Why I Want to Join Your Team

    I genuinely enjoy WordPress development—building plugins, creating custom features, and turning ideas into reliable, real-world solutions. I’m particularly motivated by teams that value quality, creativity, and thoughtful problem-solving.

    I’m excited about the opportunity to contribute my skills, continue learning, and grow alongside a team that takes pride in its work and culture.

    Shakir Ullah
    Berlin / Potsdam, Germany
    Email: mr.shakirullah@gmail.com
    Phone: +49 176 36147342