{"id":381666,"date":"2026-09-16T14:21:02","date_gmt":"2026-09-16T14:21:02","guid":{"rendered":"https:\/\/colorlib.com\/wp\/?page_id=381666"},"modified":"2026-09-16T14:21:02","modified_gmt":"2026-09-16T14:21:02","slug":"documentation","status":"publish","type":"page","link":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/","title":{"rendered":"Bonkers documentation"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\">[vc_row el_id=&#8221;top&#8221; css=&#8221;.vc_custom_bkdoc00{padding-top:44px !important;padding-bottom:30px !important;background-color:#f6f7f8 !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865370459{font-size:40px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-16 wpex-text-center vcex_6ac2865370459\"><span class=\"vcex-heading-inner wpex-inline-block\">Bonkers documentation<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoc00t{text-align:center !important;font-size:18px !important;max-width:760px !important;margin-left:auto !important;margin-right:auto !important;}&#8221;]\n<style>html{scroll-behavior:smooth}.bonkers-docs{scroll-margin-top:110px}.bonkers-docs h3{font-size:20px;margin:30px 0 10px}.bonkers-docs-fig{margin:22px 0 30px}.bonkers-docs-fig img{display:block;width:100%;height:auto;border:1px solid #e6e8eb;border-radius:8px}.bonkers-docs-fig figcaption{font-size:14px;line-height:1.55;color:#6b7280;margin-top:9px}.bonkers-docs-tip{background:#f6f7f8;border-left:4px solid #1e63b8;border-radius:4px;padding:14px 18px 2px;margin:22px 0}.bonkers-docs-steps li{margin-bottom:8px}.bonkers-docs-table{overflow-x:auto;margin:18px 0 24px}.bonkers-docs-table table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}.bonkers-docs-table th,.bonkers-docs-table td{border-bottom:1px solid #e6e8eb;padding:9px 10px;text-align:left;vertical-align:top}.bonkers-docs-table th{background:#f6f7f8}.bonkers-docs code{font-size:.9em;background:#f6f7f8;padding:1px 5px;border-radius:3px;word-break:break-word}.bonkers-docs pre{background:#f6f7f8;padding:16px 18px;border-radius:6px;overflow-x:auto;font-size:14px;line-height:1.6;white-space:pre}.bonkers-docs-toc{columns:2;column-gap:40px;max-width:720px;margin:0 auto;text-align:left;padding-left:22px}.bonkers-docs-toc li{margin-bottom:6px;break-inside:avoid}@media (max-width:640px){.bonkers-docs-toc{columns:1}}<\/style>\n<p>Everything you need to take Bonkers from install to a finished one-page site, in the order you will need it, with a screenshot or a short animation for every step. Bonkers is a free WordPress theme for studios, agencies and freelancers.[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_bkdoc00b{text-align:center !important;margin-top:22px !important;}&#8221;][vc_btn title=&#8221;Download Bonkers&#8221; style=&#8221;flat&#8221; color=&#8221;green&#8221; link=&#8221;url:https%3A%2F%2Fupdates.colorlib.com%2Fdownload%2Ftheme%2Fbonkers.zip|title:Download%20Bonkers|target:_blank&#8221; css=&#8221;.vc_custom_bkdoc00c{display:inline-block !important;vertical-align:middle !important;margin-right:12px !important;margin-bottom:10px !important;}&#8221; i_icon_fontawesome=&#8221;fa fa-download&#8221; add_icon=&#8221;true&#8221;][vc_btn title=&#8221;Live demo&#8221; style=&#8221;flat&#8221; color=&#8221;grey&#8221; link=&#8221;url:https%3A%2F%2Fcolorlibhub.com%2Fbonkers%2F|title:Live%20demo|target:_blank&#8221; css=&#8221;.vc_custom_bkdoc00d{display:inline-block !important;vertical-align:middle !important;margin-right:12px !important;margin-bottom:10px !important;}&#8221; i_icon_fontawesome=&#8221;fa fa-eye&#8221; add_icon=&#8221;true&#8221;][\/vc_column_text][vc_column_text css=&#8221;.vc_custom_bkdoc00m{text-align:center !important;font-size:14px !important;color:#6b7280 !important;margin-top:6px !important;}&#8221;]Written for Bonkers 1.1.1 on WordPress 7.1. Also on <a href=\"https:\/\/wordpress.org\/themes\/bonkers\/\" target=\"_blank\" rel=\"noopener\">WordPress.org<\/a>.[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;contents&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc0c{padding-top:34px !important;padding-bottom:4px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac28653706cd{font-size:24px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-16 wpex-text-center vcex_6ac28653706cd\"><span class=\"vcex-heading-inner wpex-inline-block\">On this page<\/span><\/h2>[vc_column_text]\n<ol class=\"bonkers-docs-toc\">\n<li><a href=\"#quick-start\">The short version<\/a><\/li>\n<li><a href=\"#install\">Install Bonkers<\/a><\/li>\n<li><a href=\"#front-page\">Build the front page<\/a><\/li>\n<li><a href=\"#sections\">How the front page is put together<\/a><\/li>\n<li><a href=\"#customizer\">Change text, images and buttons<\/a><\/li>\n<li><a href=\"#order\">Reorder or hide sections<\/a><\/li>\n<li><a href=\"#widgets\">Fill sections with widgets<\/a><\/li>\n<li><a href=\"#work\">The work grid<\/a><\/li>\n<li><a href=\"#video\">Phone and video sections<\/a><\/li>\n<li><a href=\"#contact\">Contact: form, details and map<\/a><\/li>\n<li><a href=\"#subscribe\">Newsletter sign-up<\/a><\/li>\n<li><a href=\"#menus\">Menus and links to sections<\/a><\/li>\n<li><a href=\"#styles\">Logo, colours and fonts<\/a><\/li>\n<li><a href=\"#footer\">The footer<\/a><\/li>\n<li><a href=\"#blog\">Blog, pages and page templates<\/a><\/li>\n<li><a href=\"#blocks\">Block patterns and styles<\/a><\/li>\n<li><a href=\"#addons\">Coming from Bonkers Addons<\/a><\/li>\n<li><a href=\"#updates\">Updates, translations and customising<\/a><\/li>\n<li><a href=\"#troubleshooting\">If something is not where you expect<\/a><\/li>\n<\/ol>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;quick-start&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc01{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac286537089d{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac286537089d\"><span class=\"vcex-heading-inner wpex-inline-block\">The short version<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct01{max-width:860px !important;}&#8221;]\n<p>If you read one section, read this one. Each step links to the full explanation further down.<\/p>\n<ol class=\"bonkers-docs-steps\">\n<li><strong>Install and activate Bonkers.<\/strong> <a href=\"#install\">Install Bonkers<\/a><\/li>\n<li><strong>Make a page called Home, give it the Front Page template, and make it your homepage.<\/strong> <a href=\"#front-page\">Build the front page<\/a><\/li>\n<li><strong>Change the headline, photos and buttons<\/strong> in Appearance \u2192 Customize \u2192 Front Page Sections. <a href=\"#customizer\">Text, images and buttons<\/a><\/li>\n<li><strong>Add widgets<\/strong> for your services, team, numbers, testimonials and client logos. <a href=\"#widgets\">Widgets<\/a><\/li>\n<li><strong>Write a post for each project<\/strong>, with a featured image, to fill the Work grid. <a href=\"#work\">The work grid<\/a><\/li>\n<li><strong>Pick a contact form and fill in your address, email and phone.<\/strong> <a href=\"#contact\">Contact<\/a><\/li>\n<li><strong>Build the menu<\/strong>, with links that scroll to each section. <a href=\"#menus\">Menus<\/a><\/li>\n<\/ol>\n<p>Nothing here needs code or a page builder, and Bonkers needs no companion plugin.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;install&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc02{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865370a65{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865370a65\"><span class=\"vcex-heading-inner wpex-inline-block\">Install Bonkers<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct02{max-width:860px !important;}&#8221;]\n<p>Bonkers is in the WordPress.org theme directory, so WordPress can install it for you:<\/p>\n<ol class=\"bonkers-docs-steps\">\n<li>In your dashboard, go to <strong>Appearance \u2192 Themes<\/strong> and click <strong>Add New Theme<\/strong>.<\/li>\n<li>Search for <strong>Bonkers<\/strong>, then click <strong>Install<\/strong> on it.<\/li>\n<li>When it has installed, click <strong>Activate<\/strong>.<\/li>\n<\/ol>\n<p>Downloaded the zip with the button at the top of this page instead? <strong>Do not unzip it.<\/strong> On the same screen click <strong>Upload Theme<\/strong>, choose <code>bonkers.zip<\/code>, click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/p>\n<p>Bonkers needs <strong>WordPress 6.1 or newer<\/strong> and <strong>PHP 7.4 or newer<\/strong>, and is tested up to WordPress 7.1. <strong>Tools \u2192 Site Health \u2192 Info<\/strong> shows both versions.<\/p>\n<h3>What activation does, and does not do<\/h3>\n<p>Bonkers does not create pages, posts or demo content, so it never touches a site you have already built. Instead it adds a <strong>Set up Bonkers<\/strong> checklist to the top of <strong>Appearance \u2192 Customize<\/strong>. Each step has a button that opens the right place, disappears once it is done, and can be hidden with its <strong>\u00d7<\/strong> if it does not apply to you.<\/p>\n<figure class=\"bonkers-docs-fig\" style=\"max-width:320px\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-setup-checklist.png\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-setup-checklist.png\" alt=\"The Customizer straight after activating Bonkers: a Set up Bonkers checklist with steps to set a static front page, apply the Front Page template and fill the front page sections, each with a button.\" width=\"600\" height=\"1800\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Appearance \u2192 Customize, straight after activation. Each step disappears once it is done.<\/figcaption><\/figure>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;front-page&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc03{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865370c28{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865370c28\"><span class=\"vcex-heading-inner wpex-inline-block\">Build the front page<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct03{max-width:860px !important;}&#8221;]\n<p>The Bonkers front page is a page template. It is made of up to thirteen sections, and it appears on whichever page uses the <strong>Front Page<\/strong> template.<\/p>\n<h3>1. Make the page<\/h3>\n<ol class=\"bonkers-docs-steps\">\n<li>Go to <strong>Pages \u2192 Add New Page<\/strong> and give it a title, such as <em>Home<\/em>.<\/li>\n<li>In the sidebar, open the <strong>Page<\/strong> tab, click the name next to <strong>Template<\/strong>, and choose <strong>Front Page<\/strong>.<\/li>\n<li>Click <strong>Publish<\/strong>.<\/li>\n<\/ol>\n<figure class=\"bonkers-docs-fig\" style=\"max-width:560px\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-page-template.png\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-page-template.png\" alt=\"The block editor&#039;s Page settings for a page called Home, with the Template popover open and Front Page chosen in its dropdown.\" width=\"1120\" height=\"1378\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Page tab \u2192 Template \u2192 <strong>Front Page<\/strong>.<\/figcaption><\/figure>\n<p>Leave the page itself empty: the template draws the sections, and anything typed into the page is not shown.<\/p>\n<h3>2. Make it your homepage<\/h3>\n<ol class=\"bonkers-docs-steps\">\n<li>Go to <strong>Appearance \u2192 Customize \u2192 Homepage Settings<\/strong> (or <strong>Settings \u2192 Reading<\/strong>).<\/li>\n<li>Choose <strong>A static page<\/strong>, then pick your page under <strong>Homepage<\/strong>.<\/li>\n<li>If you blog, make a second empty page, <em>Journal<\/em> say, and pick it under <strong>Posts page<\/strong>.<\/li>\n<li>Click <strong>Publish<\/strong>.<\/li>\n<\/ol>\n<figure class=\"bonkers-docs-fig\" style=\"max-width:320px\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-homepage-settings.png\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-homepage-settings.png\" alt=\"Customizer Homepage Settings with A static page selected and Home chosen as the homepage.\" width=\"600\" height=\"1274\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Appearance \u2192 Customize \u2192 <strong>Homepage Settings<\/strong>.<\/figcaption><\/figure>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;sections&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc04{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865370df2{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865370df2\"><span class=\"vcex-heading-inner wpex-inline-block\">How the front page is put together<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct04{max-width:860px !important;}&#8221;]\n<p>Some sections take their words and pictures from the Customizer, and some are filled with widgets. Once you know which is which, everything else is simple.<\/p>\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-front-page-map.jpg\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-front-page-map.jpg\" alt=\"The whole Bonkers front page in two columns, each section tagged with a number, its name and where it is edited: header, welcome, services, work, image and text, phone, call to action, video, numbers, team, testimonials, subscribe, clients, contact and footer.\" width=\"1607\" height=\"2480\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>The demo\u2019s front page, top to bottom, with where each part is edited. Click to see it full size.<\/figcaption><\/figure>\n<div class=\"bonkers-docs-table\">\n<table>\n<thead>\n<tr>\n<th>Section<\/th>\n<th>What fills it<\/th>\n<th>Shows when<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Welcome<\/strong><\/td>\n<td>Customizer: headline, background photo, button<\/td>\n<td>Always<\/td>\n<\/tr>\n<tr>\n<td><strong>Services<\/strong><\/td>\n<td><a href=\"#widgets\">Service widgets<\/a><\/td>\n<td>It has at least one widget<\/td>\n<\/tr>\n<tr>\n<td><strong>Work<\/strong><\/td>\n<td>Your <a href=\"#work\">six latest posts<\/a>; heading, intro, columns and link in the Customizer<\/td>\n<td>You have posts<\/td>\n<\/tr>\n<tr>\n<td><strong>Image and text<\/strong><\/td>\n<td>Customizer: heading, text, photo, which side it sits, button<\/td>\n<td>Always<\/td>\n<\/tr>\n<tr>\n<td><strong>Phone<\/strong><\/td>\n<td><a href=\"#widgets\">Phone Feature widgets<\/a> either side; the screen picture in the Customizer<\/td>\n<td>Either side has a widget<\/td>\n<\/tr>\n<tr>\n<td><strong>Call to action<\/strong><\/td>\n<td>Customizer: heading, background photo, button<\/td>\n<td>Always<\/td>\n<\/tr>\n<tr>\n<td><strong>Video<\/strong><\/td>\n<td>Customizer: heading, <a href=\"#video\">video address<\/a>, poster, text below<\/td>\n<td>A video address is set<\/td>\n<\/tr>\n<tr>\n<td><strong>Numbers<\/strong><\/td>\n<td><a href=\"#widgets\">Number widgets<\/a><\/td>\n<td>It has at least one widget<\/td>\n<\/tr>\n<tr>\n<td><strong>Team<\/strong><\/td>\n<td><a href=\"#widgets\">Team Member widgets<\/a>; heading in the Customizer<\/td>\n<td>It has at least one widget<\/td>\n<\/tr>\n<tr>\n<td><strong>Testimonials<\/strong><\/td>\n<td><a href=\"#widgets\">Testimonial widgets<\/a>; heading in the Customizer<\/td>\n<td>It has at least one widget<\/td>\n<\/tr>\n<tr>\n<td><strong>Subscribe<\/strong><\/td>\n<td>Customizer: heading, text, <a href=\"#subscribe\">form address<\/a>, button<\/td>\n<td>A form address is set<\/td>\n<\/tr>\n<tr>\n<td><strong>Clients<\/strong><\/td>\n<td><a href=\"#widgets\">Client Logo widgets<\/a>; heading in the Customizer<\/td>\n<td>It has at least one widget<\/td>\n<\/tr>\n<tr>\n<td><strong>Contact<\/strong><\/td>\n<td>Customizer: heading, intro, address, email, phone, <a href=\"#contact\">form<\/a>, map<\/td>\n<td>Any of those is filled in<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Every section also has a <strong>Show this section<\/strong> switch, so you can hide one without emptying it.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;customizer&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc05{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865370fac{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865370fac\"><span class=\"vcex-heading-inner wpex-inline-block\">Change text, images and buttons<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct05{max-width:860px !important;}&#8221;]\n<p>Go to <strong>Appearance \u2192 Customize \u2192 Front Page Sections<\/strong> and click a section. Its settings open on the left and the preview on the right scrolls to it.<\/p>\n<figure class=\"bonkers-docs-fig\" style=\"max-width:320px\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-sections-panel.png\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-sections-panel.png\" alt=\"The Customizer&#039;s Front Page Sections panel listing thirteen sections from Welcome to Contact, under the note: Drag a section up or down to move it on the page.\" width=\"600\" height=\"1490\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Appearance \u2192 Customize \u2192 <strong>Front Page Sections<\/strong>.<\/figcaption><\/figure>\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-welcome-section.jpg\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-welcome-section.jpg\" alt=\"The Customizer with the Welcome section open: a Show this section switch, the headline, the background image and the button text and link, beside a preview of the front page&#039;s opening banner.\" width=\"2000\" height=\"1250\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>The Welcome section\u2019s settings beside the live preview.<\/figcaption><\/figure>\n<ol class=\"bonkers-docs-steps\">\n<li>Type into a field, or use <strong>Change image<\/strong> under a photo to pick one from the Media Library or upload a new one.<\/li>\n<li>Wait a moment: the preview reloads with your change.<\/li>\n<li>Click <strong>Publish<\/strong> at the top when you are happy. Until then, visitors see the old version.<\/li>\n<\/ol>\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-edit-headline.gif\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-edit-headline.gif\" alt=\"Animation: typing a new headline into the Welcome section; the preview reloads with the new headline and the Publish button is highlighted.\" width=\"1000\" height=\"782\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Changing the headline. The preview reloads with the new words; nothing is live until you click <strong>Publish<\/strong>.<\/figcaption><\/figure>\n<ul>\n<li><strong>Headlines can break onto two lines.<\/strong> Type <code>&lt;br&gt;<\/code> where the break should go, as in <code>Every Great Company&lt;br&gt;Starts With An Idea<\/code>.<\/li>\n<li><strong>Empty a field to get the theme\u2019s default back.<\/strong><\/li>\n<li><strong>A button can scroll to a section.<\/strong> Put the section\u2019s anchor in <strong>Button link<\/strong>, such as <code>#bonkers-contact-section<\/code>. All the anchors are listed under <a href=\"#menus\">Menus<\/a>.<\/li>\n<li><strong>Photos for a full-width background<\/strong> \u2014 Welcome and Call to action \u2014 should be at least 1920 pixels wide. Keep what matters near the middle: the edges are cropped on narrow screens.<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;order&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc06{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865371165{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865371165\"><span class=\"vcex-heading-inner wpex-inline-block\">Reorder or hide sections<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct06{max-width:860px !important;}&#8221;]\n<p>The sections appear on the page in the order they are listed in <strong>Front Page Sections<\/strong>. To move one, drag it up or down the list. The preview reloads in the new order, and <strong>Publish<\/strong> keeps it.<\/p>\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-reorder-sections.gif\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-reorder-sections.gif\" alt=\"Animation: dragging Contact up the Front Page Sections list to sit under Welcome; the preview reloads with the contact section straight after the opening banner.\" width=\"1000\" height=\"782\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Dragging Contact up to sit under Welcome.<\/figcaption><\/figure>\n<p>To hide a section, open it and turn off <strong>Show this section<\/strong>. Its content is kept, so switching it back on restores it exactly.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;widgets&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc07{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac286537130e{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac286537130e\"><span class=\"vcex-heading-inner wpex-inline-block\">Fill sections with widgets<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct07{max-width:860px !important;}&#8221;]\n<p>Services, phone features, numbers, team members, testimonials and client logos are widgets, one per card. Each section has its own widget area.<\/p>\n<ol class=\"bonkers-docs-steps\">\n<li>Go to <strong>Appearance \u2192 Customize \u2192 Widgets<\/strong> and open the area, such as <strong>Front Page &#8211; Services Section<\/strong>. (Appearance \u2192 Widgets works too, without the preview.)<\/li>\n<li>Click <strong>+<\/strong> and choose the matching Bonkers widget \u2014 they are listed with the other blocks, all starting <em>Bonkers &#8211;<\/em>.<\/li>\n<li>Fill in its fields, then click <strong>Publish<\/strong>.<\/li>\n<\/ol>\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-service-widget.jpg\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-service-widget.jpg\" alt=\"Customizer, Widgets, Front Page - Services Section, with a Bonkers - Service widget open showing Image, an icon class of fa fa-camera, Title and Text, beside the six service cards it fills.\" width=\"2000\" height=\"1250\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Customize \u2192 Widgets \u2192 <strong>Front Page &#8211; Services Section<\/strong>, with one Service widget open.<\/figcaption><\/figure>\n<div class=\"bonkers-docs-table\">\n<table>\n<thead>\n<tr>\n<th>Widget<\/th>\n<th>Goes in<\/th>\n<th>Fields<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Bonkers &#8211; Service widget<\/strong><\/td>\n<td>Front Page &#8211; Services Section<\/td>\n<td>Image or icon, title, text, link text and link. Three to a row.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bonkers &#8211; Phone Feature<\/strong><\/td>\n<td>Front Page &#8211; Phone Section Left, and Right<\/td>\n<td>Image or icon, title, text. Three a side fits the phone.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bonkers &#8211; Number<\/strong><\/td>\n<td>Front Page: Numbers<\/td>\n<td>Figure (<code>240+<\/code>, <code>48h<\/code>) and caption. Four to a row.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bonkers &#8211; Team Member<\/strong><\/td>\n<td>Front Page &#8211; Team Section<\/td>\n<td>Square photo, name, position, and links to Facebook, Twitter, Instagram, Snapchat, Google Plus, LinkedIn, GitHub, WordPress, YouTube and Vimeo. Only links you fill in show an icon.<\/td>\n<\/tr>\n<tr>\n<td><strong>Bonkers &#8211; Testimonial<\/strong><\/td>\n<td>Front Page: Testimonials<\/td>\n<td>Quote, name, role or company, photo address<\/td>\n<\/tr>\n<tr>\n<td><strong>Bonkers &#8211; Client Logo<\/strong><\/td>\n<td>Front Page &#8211; Clients Section<\/td>\n<td>Logo image and an optional link<\/td>\n<\/tr>\n<tr>\n<td><strong>Bonkers &#8211; Contact Info<\/strong><\/td>\n<td>Any footer area, or the Sidebar<\/td>\n<td>Title, address, email, phone, website<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3>Icons<\/h3>\n<p>Service and phone widgets take either an image or an icon. For an icon, leave <strong>Image<\/strong> empty and type a Font Awesome 4 class into <strong>Or an icon class<\/strong>: <code>fa fa-<\/code> followed by the icon\u2019s name, as in <code>fa fa-camera<\/code> or <code>fa fa-envelope-o<\/code>. The names are listed on the <a href=\"https:\/\/fontawesome.com\/v4\/icons\/\" target=\"_blank\" rel=\"noopener\">Font Awesome 4 icons page<\/a>. Icons take the theme\u2019s colour; an image, if you set one, wins.<\/p>\n<h3>Photos in widgets<\/h3>\n<p>Click <strong>Upload Image<\/strong> to choose from the Media Library. The Testimonial widget asks for a photo address instead: open <strong>Media \u2192 Library<\/strong>, click the photo, click <strong>Copy URL to clipboard<\/strong>, and paste it in. Team photos should be square; client logos look best on a transparent or white background.<\/p>\n<p>To change the order of cards, drag the widgets within their area. To remove a card, select the widget and choose <strong>Delete<\/strong> from its <strong>\u22ee<\/strong> menu.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;work&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc08{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac28653714a3{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac28653714a3\"><span class=\"vcex-heading-inner wpex-inline-block\">The work grid<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct08{max-width:860px !important;}&#8221;]\n<p>The Work section shows your <strong>six most recent posts<\/strong> as cards: the featured image, the post\u2019s first category above its title, and a link to the post. So each project is a post.<\/p>\n<ol class=\"bonkers-docs-steps\">\n<li>Go to <strong>Posts \u2192 Add New Post<\/strong> and write up the project.<\/li>\n<li>In the sidebar, set a <strong>Featured image<\/strong> \u2014 this is the picture on the card \u2014 and pick a category, such as <em>Branding<\/em> or <em>Editorial<\/em>.<\/li>\n<li>Publish it. The newest post comes first.<\/li>\n<\/ol>\n<p>In <strong>Front Page Sections \u2192 Work<\/strong> you can change the heading and intro, show two, three or four cards to a row, and add a link under the grid \u2014 <strong>Link text<\/strong> plus <strong>Link URL<\/strong>, such as your blog page. The link only appears once it has an address.<\/p>\n<div class=\"bonkers-docs-tip\">\n<p><strong>Use a plugin that adds a Portfolio post type?<\/strong> If it registers one named <code>portfolio<\/code>, the grid shows those items instead of posts.<\/p>\n<\/div>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;video&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc09{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865371645{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865371645\"><span class=\"vcex-heading-inner wpex-inline-block\">Phone and video sections<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct09{max-width:860px !important;}&#8221;]\n<h3>The phone<\/h3>\n<p>The picture on the phone\u2019s screen is set in <strong>Front Page Sections \u2192 Phone \u2192 Screen image<\/strong>. Use a tall image \u2014 a phone screenshot is ideal, around 740 \u00d7 1560 pixels. It is cropped to fill the screen. The features either side are <a href=\"#widgets\">Phone Feature widgets<\/a>, and the section appears once either side has one.<\/p>\n<h3>The video<\/h3>\n<p>Paste an address into <strong>Front Page Sections \u2192 Video \u2192 Video URL<\/strong>:<\/p>\n<ul>\n<li><strong>YouTube<\/strong> \u2014 a normal, <code>youtu.be<\/code> or Shorts link. It plays from <code>youtube-nocookie.com<\/code>, YouTube\u2019s privacy-enhanced mode.<\/li>\n<li><strong>Vimeo<\/strong> \u2014 the video\u2019s page address.<\/li>\n<li><strong>Your own file<\/strong> \u2014 upload an MP4 to the Media Library and paste its address. Set a <strong>Poster image<\/strong> to show before it plays.<\/li>\n<\/ul>\n<p><strong>Text below the video<\/strong> accepts simple HTML, so you can link a credit or a source.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;contact&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc10{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac28653717da{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac28653717da\"><span class=\"vcex-heading-inner wpex-inline-block\">Contact: form, details and map<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct10{max-width:860px !important;}&#8221;]\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-contact-section.jpg\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-contact-section.jpg\" alt=\"The Customizer&#039;s Contact section showing the intro, address, email address, telephone and contact form fields and the Google Maps API key field, beside the contact section with its details on the left and the form on the right.\" width=\"2000\" height=\"1250\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Front Page Sections \u2192 <strong>Contact<\/strong>. Without a Maps key the address is shown as text, with a link to Google Maps.<\/figcaption><\/figure>\n<h3>The form<\/h3>\n<p>Bonkers shows a form made with one of three free plugins: <strong>Contact Form 7<\/strong>, <strong>WPForms<\/strong> or <strong>Kali Forms<\/strong>.<\/p>\n<ol class=\"bonkers-docs-steps\">\n<li>Install one from <strong>Plugins \u2192 Add New Plugin<\/strong> and create a form \u2014 each comes with a ready-made contact form.<\/li>\n<li>In <strong>Front Page Sections \u2192 Contact<\/strong>, choose it under <strong>Contact form<\/strong>, and Publish.<\/li>\n<li>Send yourself a test message from a private browser window, and check it arrives \u2014 look in the spam folder too.<\/li>\n<\/ol>\n<p>Where messages go is set in the form plugin, not in Bonkers. If none arrive, your host is probably not sending WordPress email: an SMTP plugin such as FluentSMTP or WP Mail SMTP fixes that.<\/p>\n<h3>Your details<\/h3>\n<p>Fill in <strong>Intro<\/strong>, <strong>Address<\/strong>, <strong>Email address<\/strong> and <strong>Telephone<\/strong>. The email and phone number become links that open a new message or a call, and the address gets a <strong>View on Google Maps<\/strong> link. Any you leave empty are not shown.<\/p>\n<h3>A map (optional)<\/h3>\n<p>With a Google Maps API key, the section shows a map of your address with the heading and form in a panel over it. That layout has no room for the intro and contact details, so they are not shown.<\/p>\n<ol class=\"bonkers-docs-steps\">\n<li>In the <a href=\"https:\/\/console.cloud.google.com\/google\/maps-apis\/\" target=\"_blank\" rel=\"noopener\">Google Cloud console<\/a>, create a project and add a billing account. Google charges nothing below its monthly free usage.<\/li>\n<li>Enable two APIs: <strong>Maps JavaScript API<\/strong> and <strong>Geocoding API<\/strong>.<\/li>\n<li>Create an API key and paste it into <strong>Google Maps API key<\/strong>, then Publish.<\/li>\n<\/ol>\n<div class=\"bonkers-docs-tip\">\n<p><strong>No map?<\/strong> Bonkers looks up your address from your server once and remembers where it is; the map itself loads in your visitors\u2019 browsers. A key limited to <em>websites<\/em> blocks that server lookup. Limit the key to the two APIs instead \u2014 and if you want the website limit as well, add it after the map has appeared once. Change the address later and you will need to lift it again until the map shows.<\/p>\n<\/div>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;subscribe&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc11{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865371970{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865371970\"><span class=\"vcex-heading-inner wpex-inline-block\">Newsletter sign-up<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct11{max-width:860px !important;}&#8221;]\n<p>The Subscribe section is an email field and a button that send the address straight to your newsletter service \u2014 Bonkers stores nothing. It stays hidden until you give it somewhere to send the address.<\/p>\n<p>It is made for <strong>Mailchimp<\/strong>:<\/p>\n<ol class=\"bonkers-docs-steps\">\n<li>In Mailchimp, go to <strong>Audience \u2192 Signup forms \u2192 Embedded forms<\/strong>.<\/li>\n<li>In the code it generates, find <code>action=\"\u2026\"<\/code> near the top and copy the address between the quotes. It looks like <code>https:\/\/yourname.us1.list-manage.com\/subscribe\/post?u=\u2026&amp;id=\u2026<\/code>.<\/li>\n<li>Paste it into <strong>Front Page Sections \u2192 Subscribe \u2192 Form action URL<\/strong>, set the heading, text, button and placeholder, and Publish.<\/li>\n<\/ol>\n<p>Other services work too if their sign-up form accepts the address in a field named <code>EMAIL<\/code>. A sign-up opens the service\u2019s own confirmation page in a new tab.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;menus&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc12{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865371aff{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865371aff\"><span class=\"vcex-heading-inner wpex-inline-block\">Menus and links to sections<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct12{max-width:860px !important;}&#8221;]\n<p>Bonkers has three menu locations. Create menus in <strong>Appearance \u2192 Menus<\/strong>, then assign them under <strong>Manage Locations<\/strong>:<\/p>\n<ul>\n<li><strong>Primary Menu<\/strong> \u2014 across the header. Items with sub-items get a dropdown.<\/li>\n<li><strong>Footer Menu<\/strong> \u2014 a single row under the copyright line.<\/li>\n<li><strong>Social Menu<\/strong> \u2014 icons at the bottom right of the footer.<\/li>\n<\/ul>\n<figure class=\"bonkers-docs-fig\" style=\"max-width:620px\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-menu-locations.png\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-menu-locations.png\" alt=\"Appearance, Menus, Manage Locations: Primary Menu and Footer Menu set to Main menu, Social Menu set to Social links.\" width=\"1440\" height=\"1038\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Appearance \u2192 Menus \u2192 <strong>Manage Locations<\/strong>.<\/figcaption><\/figure>\n<h3>Links that scroll to a section<\/h3>\n<p>Add a <strong>Custom Link<\/strong> whose URL is your site\u2019s address followed by the section\u2019s anchor, such as <code>https:\/\/example.com\/#bonkers-work-section<\/code>. Using the full address, not just the anchor, means the link also works from your blog and other pages.<\/p>\n<div class=\"bonkers-docs-table\">\n<table>\n<thead>\n<tr>\n<th>Section<\/th>\n<th>Anchor<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Welcome<\/td>\n<td><code>#bonkers-welcome-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Services<\/td>\n<td><code>#bonkers-services-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Work<\/td>\n<td><code>#bonkers-work-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Image and text<\/td>\n<td><code>#bonkers-image-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Phone<\/td>\n<td><code>#bonkers-phone-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Call to action<\/td>\n<td><code>#bonkers-cta-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Video<\/td>\n<td><code>#bonkers-video-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Numbers<\/td>\n<td><code>#bonkers-stats-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Team<\/td>\n<td><code>#bonkers-team-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Testimonials<\/td>\n<td><code>#bonkers-testimonials-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Subscribe<\/td>\n<td><code>#bonkers-subscribe-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Clients<\/td>\n<td><code>#bonkers-clients-section<\/code><\/td>\n<\/tr>\n<tr>\n<td>Contact<\/td>\n<td><code>#bonkers-contact-section<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>A hidden section has no anchor, so a link to it goes nowhere.<\/p>\n<h3>Social icons<\/h3>\n<p>Add a Custom Link to each profile. Bonkers picks the icon from the address, for 500px, Amazon, Behance, Dribbble, Facebook, Flickr, Foursquare, GitHub, Google+, Instagram, LinkedIn, Pinterest, Skype, Snapchat, TripAdvisor, Tumblr, Twitter, Vimeo, VK, WordPress, Yelp, YouTube, your RSS feed, <code>tel:<\/code> phone links and <code>whatsapp:<\/code> links. The link text is read out to screen reader users rather than shown, so make it the network\u2019s name.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;styles&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc13{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865371c91{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865371c91\"><span class=\"vcex-heading-inner wpex-inline-block\">Logo, colours and fonts<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct13{max-width:860px !important;}&#8221;]\n<h3>Logo and site name<\/h3>\n<p>In <strong>Appearance \u2192 Customize \u2192 Site Identity<\/strong>, click <strong>Select logo<\/strong>. For a sharp logo on high-resolution screens, upload it at twice the size you want it shown and tick <strong>Is this image retina-ready?<\/strong>: Bonkers then shows it at half its width. Without a logo, your <strong>Site Title<\/strong> is shown in its place. <strong>Site Icon<\/strong> is the little picture in the browser tab.<\/p>\n<h3>Colours<\/h3>\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-colors.jpg\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-colors.jpg\" alt=\"The Customizer&#039;s Colors section with swatches for background, featured, logo, headings, text, link, footer background and header background colours, beside the front page.\" width=\"2000\" height=\"1250\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Appearance \u2192 Customize \u2192 <strong>Colors<\/strong>.<\/figcaption><\/figure>\n<div class=\"bonkers-docs-table\">\n<table>\n<thead>\n<tr>\n<th>Colour<\/th>\n<th>Used for<\/th>\n<th>Default<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>Featured Color<\/strong><\/td>\n<td>Buttons and accents<\/td>\n<td><code>#1E63B8<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Link Color<\/strong><\/td>\n<td>Links in text<\/td>\n<td><code>#1E63B8<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Headings Color<\/strong><\/td>\n<td>Headings<\/td>\n<td><code>#24282E<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Text Color<\/strong><\/td>\n<td>Body text<\/td>\n<td><code>#50575F<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Logo Color<\/strong><\/td>\n<td>The site title, when there is no logo<\/td>\n<td><code>#222222<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Header Background Color<\/strong><\/td>\n<td>The header bar<\/td>\n<td><code>#FFFFFF<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Footer Background Color<\/strong><\/td>\n<td>The footer<\/td>\n<td><code>#222222<\/code><\/td>\n<\/tr>\n<tr>\n<td><strong>Background Color<\/strong><\/td>\n<td>The page behind everything<\/td>\n<td><code>#FFFFFF<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>The defaults meet WCAG AA contrast. If you change them, keep text dark enough to read: <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener\">WebAIM\u2019s contrast checker<\/a> should report at least 4.5:1 against the background, and white button text needs a Featured Color at least that dark. <strong>Header Image<\/strong> and <strong>Background Image<\/strong>, in the Customizer too, put a photo behind the header or the page.<\/p>\n<h3>Fonts<\/h3>\n<figure class=\"bonkers-docs-fig\" style=\"max-width:320px\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-typography.png\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-typography.png\" alt=\"The Customizer&#039;s Typography section: a font and base size for body text, and a font for headings, both set to PT Sans.\" width=\"600\" height=\"904\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Appearance \u2192 Customize \u2192 <strong>Typography<\/strong>.<\/figcaption><\/figure>\n<p><strong>Typography<\/strong> sets the font and base size for body text, and the font for headings. Choose <strong>PT Sans<\/strong>, which comes with the theme, or one of each device\u2019s own fonts: <strong>System UI<\/strong>, <strong>System serif<\/strong> or <strong>System monospace<\/strong>. None of them is fetched from Google or anywhere else.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;footer&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc14{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865371e20{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865371e20\"><span class=\"vcex-heading-inner wpex-inline-block\">The footer<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct14{max-width:860px !important;}&#8221;]\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-footer-settings.jpg\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-footer-settings.jpg\" alt=\"The Customizer&#039;s Footer Settings with the Show Footer Widgets switch on and a choice of one to four footer columns, beside the dark four-column footer.\" width=\"2000\" height=\"1250\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Appearance \u2192 Customize \u2192 <strong>Footer Settings<\/strong>, beside the four-column footer.<\/figcaption><\/figure>\n<p>The footer has up to four columns of widgets. In <strong>Appearance \u2192 Customize \u2192 Footer Settings<\/strong>, choose how many columns you want, or turn off <strong>Show Footer Widgets<\/strong> to go without. Then fill <strong>First<\/strong> to <strong>Fourth Footer Widgets Area<\/strong> in <strong>Customize \u2192 Widgets<\/strong>: a text widget about you, a menu, recent posts, and <strong>Bonkers &#8211; Contact Info<\/strong> work well. An empty column is skipped, and the others share its space.<\/p>\n<p>Under the columns sit the copyright line with your site title and the year, the <strong>Footer Menu<\/strong>, and the <strong>Social Menu<\/strong> icons.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;blog&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc15{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865371fa8{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865371fa8\"><span class=\"vcex-heading-inner wpex-inline-block\">Blog, pages and page templates<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct15{max-width:860px !important;}&#8221;]\n<p>Posts appear on the page you chose as the <strong>Posts page<\/strong>, in cards with their featured images. Posts, archives and ordinary pages show the <strong>Sidebar<\/strong> widget area on the right when it has widgets; leave it empty to use the full width.<\/p>\n<p>Pages have three templates, chosen as in <a href=\"#front-page\">Build the front page<\/a>:<\/p>\n<ul>\n<li><strong>Default template<\/strong> \u2014 the content, with the sidebar beside it when the sidebar has widgets.<\/li>\n<li><strong>Full width<\/strong> \u2014 no sidebar, and room for wide and full-width blocks. Use it for landing pages built from <a href=\"#blocks\">patterns<\/a>.<\/li>\n<li><strong>Front Page<\/strong> \u2014 the thirteen sections, and nothing from the page itself.<\/li>\n<\/ul>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;blocks&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc16{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac286537213e{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac286537213e\"><span class=\"vcex-heading-inner wpex-inline-block\">Block patterns and styles<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct16{max-width:860px !important;}&#8221;]\n<p>For pages beyond the front page, Bonkers adds ready-made layouts built from ordinary blocks. Click the blue <strong>+<\/strong> in the editor, open <strong>Patterns<\/strong>, and choose <strong>Bonkers<\/strong>.<\/p>\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-patterns.jpg\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-patterns.jpg\" alt=\"The block editor&#039;s Patterns window with the Bonkers category open, showing previews of Contact details, Call to action banner, Hero headline, Three services, Numbers band, Team row, Testimonial and Work grid.\" width=\"2000\" height=\"1250\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>Block inserter \u2192 Patterns \u2192 <strong>Explore all patterns<\/strong> \u2192 Bonkers.<\/figcaption><\/figure>\n<p>There are eight: <strong>Hero headline<\/strong>, <strong>Three services<\/strong>, <strong>Work grid<\/strong>, <strong>Team row<\/strong>, <strong>Numbers band<\/strong>, <strong>Testimonial<\/strong>, <strong>Call to action banner<\/strong> and <strong>Contact details<\/strong>. Insert one and type over it; nothing is linked to the front page\u2019s settings.<\/p>\n<h3>Block styles<\/h3>\n<p>Some core blocks gain extra looks. Select the block, open the <strong>Styles<\/strong> tab in its settings, and click one.<\/p>\n<figure class=\"bonkers-docs-fig\"><a href=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-block-styles.jpg\" target=\"_blank\" rel=\"noopener\"><img src=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-block-styles.jpg\" alt=\"An Image block selected in the block editor with its Styles panel open, offering Default, Rounded, Soft corners, Framed and Tile, with Tile applied.\" width=\"2000\" height=\"1250\" loading=\"lazy\" decoding=\"async\"><\/a><figcaption>An Image block\u2019s Styles, with the theme\u2019s <strong>Tile<\/strong> style applied.<\/figcaption><\/figure>\n<div class=\"bonkers-docs-table\">\n<table>\n<thead>\n<tr>\n<th>Block<\/th>\n<th>Style<\/th>\n<th>Looks like<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Button<\/td>\n<td><strong>Fill on hover<\/strong><\/td>\n<td>A thin outline that fills with the accent colour on hover<\/td>\n<\/tr>\n<tr>\n<td>Image<\/td>\n<td><strong>Soft corners<\/strong><\/td>\n<td>Gently rounded corners (core\u2019s <em>Rounded<\/em> makes a circle)<\/td>\n<\/tr>\n<tr>\n<td>Image<\/td>\n<td><strong>Framed<\/strong><\/td>\n<td>Rounded corners and a soft shadow<\/td>\n<\/tr>\n<tr>\n<td>Image<\/td>\n<td><strong>Tile<\/strong><\/td>\n<td>Cropped to 4:3, so a row of mixed photos lines up<\/td>\n<\/tr>\n<tr>\n<td>Group<\/td>\n<td><strong>Card<\/strong><\/td>\n<td>A white card with a thin border and rounded corners<\/td>\n<\/tr>\n<tr>\n<td>Columns<\/td>\n<td><strong>Cards<\/strong><\/td>\n<td>Each column as a card<\/td>\n<\/tr>\n<tr>\n<td>Quote<\/td>\n<td><strong>Centered<\/strong><\/td>\n<td>Centred, with no side border<\/td>\n<\/tr>\n<tr>\n<td>Separator<\/td>\n<td><strong>Short rule<\/strong><\/td>\n<td>A short, centred line in the accent colour<\/td>\n<\/tr>\n<tr>\n<td>List<\/td>\n<td><strong>Checklist<\/strong><\/td>\n<td>Ticks in the accent colour instead of bullets<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>The editor also offers the theme\u2019s colours and font sizes, so a block looks the same in the editor as on the site.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;addons&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc17{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac28653722c0{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac28653722c0\"><span class=\"vcex-heading-inner wpex-inline-block\">Coming from Bonkers Addons<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct17{max-width:860px !important;}&#8221;]\n<p>Bonkers once needed the <strong>Bonkers Addons<\/strong> plugin for its front page. Since version 1.1.0 the theme does everything itself, and updating keeps your site as it was:<\/p>\n<ul>\n<li><strong>Your content stays.<\/strong> Headlines, photos, links and the section order saved by the plugin are still shown, and the Customizer starts from them. Once you change a field and Publish, the theme keeps its own copy of that field.<\/li>\n<li><strong>Your widgets keep working.<\/strong> The theme\u2019s versions replace the plugin\u2019s, and add the icon fields.<\/li>\n<li><strong>You can deactivate the plugin<\/strong> in <strong>Plugins<\/strong>. Nothing on the front page depends on it. The one thing it adds that Bonkers does not is a WooCommerce product carousel shortcode, <code>&#091;shopapp_products_carousel&#093;<\/code>: keep the plugin if a page uses it.<\/li>\n<\/ul>\n<p>Update to Bonkers <strong>1.1.1 or newer<\/strong> if the plugin is still active: on 1.1.0, having both made <strong>Appearance \u2192 Customize<\/strong> show a critical error.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;updates&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc18{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac2865372436{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac2865372436\"><span class=\"vcex-heading-inner wpex-inline-block\">Updates, translations and customising<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct18{max-width:860px !important;}&#8221;]\n<p><strong>Updates<\/strong> come from WordPress.org and appear in <strong>Dashboard \u2192 Updates<\/strong> like any other theme. Updating changes the theme\u2019s files, never your content, widgets or Customizer settings.<\/p>\n<p><strong>Translations<\/strong> are made by volunteers on <a href=\"https:\/\/translate.wordpress.org\/projects\/wp-themes\/bonkers\/\" target=\"_blank\" rel=\"noopener\">translate.wordpress.org<\/a> and installed automatically for your site\u2019s language. To translate it yourself, use a plugin such as Loco Translate; the template is <code>languages\/bonkers.pot<\/code>.<\/p>\n<p><strong>To change the design<\/strong>, add CSS in <strong>Appearance \u2192 Customize \u2192 Additional CSS<\/strong>; it survives updates. To change templates or PHP, use a <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener\">child theme<\/a> \u2014 edits made to Bonkers\u2019 own files are lost at the next update.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=&#8221;troubleshooting&#8221; el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc19{padding-top:34px !important;padding-bottom:6px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac28653725ba{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac28653725ba\"><span class=\"vcex-heading-inner wpex-inline-block\">If something is not where you expect<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoct19{max-width:860px !important;}&#8221;]\n<p><strong>My homepage shows blog posts, not the sections.<\/strong> In <strong>Customize \u2192 Homepage Settings<\/strong>, choose <em>A static page<\/em> and pick your front page.<\/p>\n<p><strong>My homepage shows an empty page.<\/strong> The page is not using the Front Page template. Edit it and set <strong>Template<\/strong> to <strong>Front Page<\/strong>.<\/p>\n<p><strong>A section is missing.<\/strong> Check its <strong>Show this section<\/strong> switch, then what it needs to appear: Services, Phone, Numbers, Team, Testimonials and Clients need a widget; Work needs posts; Video needs a video address; Subscribe needs a form action URL; Contact needs at least one detail or a form. The table in <a href=\"#sections\">How the front page is put together<\/a> has the full list.<\/p>\n<p><strong>An icon shows as an empty square, or not at all.<\/strong> Check the class: it needs both parts, <code>fa fa-camera<\/code>, and a name from Font Awesome 4. Names from Font Awesome 5 or 6, such as <code>fa-solid fa-camera<\/code>, do not work.<\/p>\n<p><strong>My form is not in the Contact form list.<\/strong> Only Contact Form 7, WPForms and Kali Forms forms are listed. Check the plugin is active and the form has been created.<\/p>\n<p><strong>The map does not show.<\/strong> Check the key is pasted in full, both APIs are enabled, the Google Cloud project has billing, and the key is not limited to websites \u2014 see <a href=\"#contact\">A map<\/a>. Also check Google Maps can find your address as written.<\/p>\n<p><strong>A menu link to a section does nothing on other pages.<\/strong> Use the full address with the anchor, <code>https:\/\/example.com\/#bonkers-work-section<\/code>, not just <code>#bonkers-work-section<\/code>.<\/p>\n<p><strong>A social link has no icon.<\/strong> The icon comes from the address, and only the networks listed under <a href=\"#menus\">Social icons<\/a> have one.<\/p>\n<p><strong>Appearance \u2192 Customize shows a critical error.<\/strong> Bonkers Addons is active on Bonkers 1.1.0. Update Bonkers to 1.1.1 or newer, or deactivate the plugin.<\/p>\n<p><strong>I published, but visitors still see the old version.<\/strong> A caching plugin or your host\u2019s cache is serving a stored copy. Clear it from the plugin\u2019s or host\u2019s settings.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_class=&#8221;bonkers-docs&#8221; css=&#8221;.vc_custom_bkdoc99{padding-top:34px !important;padding-bottom:56px !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;]<style>.vcex-heading.vcex_6ac286537273e{font-size:28px;font-weight:700;}<\/style><h2 class=\"vcex-heading vcex-heading-plain vcex-module wpex-heading wpex-text-2xl wpex-mb-14 vcex_6ac286537273e\"><span class=\"vcex-heading-inner wpex-inline-block\">Still stuck?<\/span><\/h2>[vc_column_text css=&#8221;.vc_custom_bkdoc99t{max-width:860px !important;}&#8221;]\n<p>Ask on the <a href=\"https:\/\/colorlibsupport.com\/\" target=\"_blank\" rel=\"noopener\">Colorlib support forum<\/a>. Include your Bonkers, WordPress and PHP versions, what you did, and what you expected to happen \u2014 a screenshot helps.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"<p>[vc_row el_id=&#8221;top&#8221; css=&#8221;.vc_custom_bkdoc00{padding-top:44px !important;padding-bottom:30px !important;background-color:#f6f7f8 !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;][vc_column_text css=&#8221;.vc_custom_bkdoc00t{text-align:center !important;font-size:18px !important;max-width:760px !important;margin-left:auto !important;margin-right:auto !important;}&#8221;] Everything you need to take Bonkers from install to a finished one-page site, in the order you will need it, with a screenshot or a short animation for every step. Bonkers is a free WordPress theme for studios, agencies and freelancers.[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_bkdoc00b{text-align:center&hellip;<\/p>\n","protected":false},"author":697,"featured_media":0,"parent":144864,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/no-sidebar.php","meta":{"_yoast_wpseo_focuskw":"","_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"class_list":["page","type-page","status-publish","hentry","entry","no-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bonkers documentation - Colorlib<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bonkers documentation - Colorlib\" \/>\n<meta property=\"og:description\" content=\"[vc_row el_id=&#8221;top&#8221; css=&#8221;.vc_custom_bkdoc00{padding-top:44px !important;padding-bottom:30px !important;background-color:#f6f7f8 !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;][vc_column_text css=&#8221;.vc_custom_bkdoc00t{text-align:center !important;font-size:18px !important;max-width:760px !important;margin-left:auto !important;margin-right:auto !important;}&#8221;] Everything you need to take Bonkers from install to a finished one-page site, in the order you will need it, with a screenshot or a short animation for every step. Bonkers is a free WordPress theme for studios, agencies and freelancers.[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_bkdoc00b{text-align:center&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/\" \/>\n<meta property=\"og:site_name\" content=\"Colorlib\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/colorlib\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-setup-checklist.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@colorlib\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/documentation\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/documentation\\\/\",\"name\":\"Bonkers documentation - Colorlib\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/documentation\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/documentation\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bonkers-docs-setup-checklist.png\",\"datePublished\":\"2026-09-16T14:21:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/documentation\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/documentation\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/documentation\\\/#primaryimage\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bonkers-docs-setup-checklist.png\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/bonkers-docs-setup-checklist.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/documentation\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bonkers\",\"item\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/themes\\\/bonkers\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bonkers documentation\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"name\":\"Colorlib\",\"description\":\"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.\",\"publisher\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#organization\",\"name\":\"Colorlib\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"contentUrl\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/colorlib-logo-top-1.png\",\"width\":800,\"height\":400,\"caption\":\"Colorlib\"},\"image\":{\"@id\":\"https:\\\/\\\/colorlib.com\\\/wp\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/colorlib\",\"https:\\\/\\\/x.com\\\/colorlib\",\"https:\\\/\\\/www.instagram.com\\\/colorlib\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/colorlib\",\"https:\\\/\\\/youtube.com\\\/c\\\/Colorlib\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bonkers documentation - Colorlib","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/","og_locale":"en_US","og_type":"article","og_title":"Bonkers documentation - Colorlib","og_description":"[vc_row el_id=&#8221;top&#8221; css=&#8221;.vc_custom_bkdoc00{padding-top:44px !important;padding-bottom:30px !important;background-color:#f6f7f8 !important;}&#8221;][vc_column width=&#8221;1\/1&#8243;][vc_column_text css=&#8221;.vc_custom_bkdoc00t{text-align:center !important;font-size:18px !important;max-width:760px !important;margin-left:auto !important;margin-right:auto !important;}&#8221;] Everything you need to take Bonkers from install to a finished one-page site, in the order you will need it, with a screenshot or a short animation for every step. Bonkers is a free WordPress theme for studios, agencies and freelancers.[\/vc_column_text][vc_column_text css=&#8221;.vc_custom_bkdoc00b{text-align:center&hellip;","og_url":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/","og_site_name":"Colorlib","article_publisher":"https:\/\/www.facebook.com\/colorlib","og_image":[{"url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-setup-checklist.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@colorlib","twitter_misc":{"Est. reading time":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/","url":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/","name":"Bonkers documentation - Colorlib","isPartOf":{"@id":"https:\/\/colorlib.com\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/#primaryimage"},"image":{"@id":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/#primaryimage"},"thumbnailUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-setup-checklist.png","datePublished":"2026-09-16T14:21:02+00:00","breadcrumb":{"@id":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/#primaryimage","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-setup-checklist.png","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/bonkers-docs-setup-checklist.png"},{"@type":"BreadcrumbList","@id":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/documentation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colorlib.com\/wp\/"},{"@type":"ListItem","position":2,"name":"Bonkers","item":"https:\/\/colorlib.com\/wp\/themes\/bonkers\/"},{"@type":"ListItem","position":3,"name":"Bonkers documentation"}]},{"@type":"WebSite","@id":"https:\/\/colorlib.com\/wp\/#website","url":"https:\/\/colorlib.com\/wp\/","name":"Colorlib","description":"WordPress tutorials, theme reviews, and web design inspiration. Free themes and 1,000+ HTML templates from Colorlib.","publisher":{"@id":"https:\/\/colorlib.com\/wp\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colorlib.com\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/colorlib.com\/wp\/#organization","name":"Colorlib","url":"https:\/\/colorlib.com\/wp\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/","url":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","contentUrl":"https:\/\/colorlib.com\/wp\/wp-content\/uploads\/sites\/2\/colorlib-logo-top-1.png","width":800,"height":400,"caption":"Colorlib"},"image":{"@id":"https:\/\/colorlib.com\/wp\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/colorlib","https:\/\/x.com\/colorlib","https:\/\/www.instagram.com\/colorlib\/","https:\/\/www.linkedin.com\/company\/colorlib","https:\/\/youtube.com\/c\/Colorlib"]}]}},"_links":{"self":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/pages\/381666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/users\/697"}],"replies":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/comments?post=381666"}],"version-history":[{"count":1,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/pages\/381666\/revisions"}],"predecessor-version":[{"id":381681,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/pages\/381666\/revisions\/381681"}],"up":[{"embeddable":true,"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/pages\/144864"}],"wp:attachment":[{"href":"https:\/\/colorlib.com\/wp\/wp-json\/wp\/v2\/media?parent=381666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}