Atomic Docs and WordPress

Working with Atomic Docs in WordPress is easy. This article will show you how to set up Atomic Docs so that you can use all of WordPress' functions in your components.

Steps

1. Download Atomic Docs
2. Move the contents into the root of your theme.
   
   
   • theme-name/
     • atomic-core/
     • atomic-db/
     • components/
     • css/
       • main.css
     • scss/
       • main.scss
     • .htaccess
     • config.php
     • index.php
     • atomic-head.php
     • atomic-foot.php
     • index.php
     • header.php
     • footer.php
     • single.css
     • style.css
     • etc...
3. To view Atomic Docs, go to: http://www.mysite.com/wp-content/themes/my-theme/atomic-core/
4. Because scss/main.scss needs to compile to css/main.css you either need to use wp_enqueue_style to include main.css in your theme, or simply import it into style.css using @import "css/main.css"; .
5. wp-load.php allows us to use WordPress functionality outside of your WordPress theme. AKA Atomic Docs. Open up atomic-head.php and place the following code block there.

6. You now can use WordPress functions like wp_query inside of your components.