Neuron Theme Development

Download Neuron template [link]
Neuron Theme Demo [link]

Here we will show step by step WordPress theme development with Neuron Template.

Initial Setup

1. Create a folder named “neuron” in wp-content/themes/
2. Paste neuron template into neuron folder.
3. Rename index.html to index.php
4. Create file named functions.php and open it.
5. Call all css files in functions.php [neuron_theme_files]
6. Call all js files in functions.php [neuron_theme_files]
7. Open index.php and connect images statically using “echo get_template_directory_uri();” [image directory]
8. Delete title tag and some meta (description, keywords, author) in index.php
9. Add <?php wp_head(); ?> before </head> tag and <?php wp_footer(); ?> before </body> tag.
10. Open style.css and name the theme [style.css]

Now we can activate the theme (Neuron) in dashboard at Appearance > themes

1. Open the website in browser and check css, js and images are properly connected.
2. Inspect and check Console for error. Fix – TypeError: $ is not a function

Neuron Menu

1. Add theme supports for menu and others in functions.php [neuron_theme_supports]
2. Create pages and sub-pages (about us, services, works, press & news, contact etc) from dashboard pages > Add New. All pages should be blank now.
3. Create new menu from Appearance > Menu and save it in “Primary” location.
4. Add pages to the menu and save it.
5. Call the Primary menu in index.php replacing the menu ul of template [wp_nav_menu]
6. Design dropdown menu in style.css [WordPress Sub-Menu css]

Neuron Slider

1. Register custom post for the slider in functions.php [register_post_type]
2. Refresh dashboard to get a new menu called “Sliders”
3. Add new slide post
   1. Title: “Prepare for the future with our advisors”
   2. Content: “Interactively simplify 24/7 markets through 24/7 best practices. Authoritatively foster cutting-edge manufactured products and distinctive.”
   3. Custom Fields (meta key for button text):
      1. Name: btn_text
      2. Value: Meet Experts
   4. Custom Fields (meta key for button link):
      1. Name: btn_link
      2. Value: https://www.codexcafe.net
   5. Featured Image: image for the slider
4. Publish the post (slide) and add another post (slide)
5. Now we will query “custom post loop” in index.php
   1. Delete everything within <section class=”slider-area”>
   2. Paste php codes from [wp_reset_query] inside the slider-area section.
6. Refresh homepage to see the result

Neuron Intro Area Features (Welcome to the Neuron Finance)

1. Register custom post for the features in functions.php [register_post_type]
2. Refresh dashboard to get a new menu called “Features”
3. Add new feature post
   1. Title: “About Business”
   2. Content: “Seamlessly envisioneer extensive interfaces and back wardcompatible applications. Proactively promote timely best.”
   3. Order: 1
   4. Featured Image: image for the feature (intro)
4. Publish the post (feature) and add another post (Business Growth, Sustainability)
5. Now we will query “custom post loop” in index.php
   1. Delete everything with the comment <!– single intro –>
   2. Paste php codes from [wp_reset_query for intro] into the deleted area.
6. Refresh homepage to see the result

Neuron Services (We Provide Huge Range of Services)

1. Register custom post for the services in functions.php [register_post_type]
2. Refresh dashboard to get a new menu called “Services”
3. Add new service post
   1. Title: “Performance”
   2. Content: “Dynamically fabricate innovative products and distributed web services. Distinctively pontificate.”
   3. Custom Fields (meta key for service link):
      1. Name: service_link
      2. Value: https://www.bdtopten.com
   4. Order: 1
   5. Featured Image: image for the service.
4. Publish the post (service) and add another post (Sustainability, Web Design, Web Development, Branding Design, Marketing )
5. Now we will query “custom post loop” in index.php
   1. Delete everything with the comment <!– single service –>
   2. Paste php codes from [wp_reset_query for Service] into the deleted area.
6. Refresh homepage to see the result
7. Give service image a fixed width to avoid layout break [.services-tiem img {max-width: 62px;}]

Neuron Widgets

1. Register widgets in functions.php [register_sidebar]
2. Create new menu from Appearance > Menu for Useful Links widget
3. Register shortcode for Latest Posts widget in functions.php [add_shortcode]
4. Install and activate the plugin Contact Form 7 for Newsletter Subscription
5. Create contact form []