Skip To Main Content

Adobe XD WordPress Theme Template


This AdobeXD file contains some starting page templates for you to use when creating a custom WordPress theme.


There are a handful of artboards which represent a basic selection of mobile devices. Note that the iPhone 5 is obsolete, but the minimum size of the design should still fit in a 320px wide browser window, for compatability with Twitter Bootstrap and possible future device sizes. Usually the biggest design difference between mobile and desktop designs is how the navigation bar works, so make sure to include a mockup of the navigation both open and closed.


Included are the default minimum and maximum browser width breakpoints as defined by Twitter Bootstrap (CSS framework). They are included to give you a very broad idea of where design changes can happen. By default they are set up to match as many standard device breakpoints as possible. In general, XS to SM are phones, MD is tablets in portrait mode, LG is tablets in landscape and smaller desktop monitors, while XL is desktop monitors. The maximum value of the breakpoint is where large changes, like a change from 2 columns to a single column are made. The minimums are included as a visual aid.


The bulk of the theme will be composed of unique page templates. These are unique pages such as the Home page, the About page, the Floor Plans page, etc. The artboard is set at 1920px wide, which is on the extreme end of browser widths.


By default, WordPress will display some pages that may not be in the original design, but it may be beneficial to create templates for these pages.
These are:

  • Posts Index (index.php) – a template which lists all the posts
  • Single Posts (single.php) – a template for the single page view of the post
  • Archives (archives.php) – a template which displays a categorized list of the posts, by date or category
  • 404 (404.php) – the 404 error page
  • Search Results (search.php) – the search results listing page

Generally, our designs do not feature Archives or Search Results templates, but it is good to be aware that WordPress by default creates these pages. If there is not a specific template for them, they will take the Posts Index (index.php) as their template.

Some placeholder data is included on each artboard to give you an idea what to start with and how these page templates work.

Attached File: Resource WordPress Theme Template.xd

in WebsitesWordPress