{"id":18685437,"url":"https://github.com/wpbones/pure-css-tabs","last_synced_at":"2026-03-17T12:08:26.643Z","repository":{"id":57082151,"uuid":"72206195","full_name":"wpbones/pure-css-tabs","owner":"wpbones","description":"A WP Bones less/css files used to implement a pure css tabs","archived":false,"fork":false,"pushed_at":"2024-10-24T16:45:39.000Z","size":30,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T11:12:31.107Z","etag":null,"topics":["css-tabs","laravel","wordpress","wordpress-development","wp-bones","wp-bones-packages"],"latest_commit_sha":null,"homepage":"","language":"Less","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wpbones.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-10-28T12:39:55.000Z","updated_at":"2024-10-24T16:45:43.000Z","dependencies_parsed_at":"2024-10-24T21:04:56.427Z","dependency_job_id":"a7734928-c982-4cde-b6c0-7c6123fda3d8","html_url":"https://github.com/wpbones/pure-css-tabs","commit_stats":{"total_commits":7,"total_committers":3,"mean_commits":"2.3333333333333335","dds":0.4285714285714286,"last_synced_commit":"b9c8177d316c95bb7ae60eb80d91c42da4007578"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpbones%2Fpure-css-tabs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpbones%2Fpure-css-tabs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpbones%2Fpure-css-tabs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wpbones%2Fpure-css-tabs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wpbones","download_url":"https://codeload.github.com/wpbones/pure-css-tabs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248517383,"owners_count":21117442,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-tabs","laravel","wordpress","wordpress-development","wp-bones","wp-bones-packages"],"created_at":"2024-11-07T10:22:32.659Z","updated_at":"2026-03-17T12:08:21.607Z","avatar_url":"https://github.com/wpbones.png","language":"Less","readme":"# Pure CSS Tabs for WP Bones\n\n\u003cdiv align=\"center\"\u003e\n\n[![Latest Stable Version](https://poser.pugx.org/wpbones/pure-css-tabs/v/stable?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-tabs) \u0026nbsp;\n[![Latest Unstable Version](https://poser.pugx.org/wpbones/pure-css-tabs/v/unstable?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-tabs) \u0026nbsp;\n[![Total Downloads](https://poser.pugx.org/wpbones/pure-css-tabs/downloads?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-tabs) \u0026nbsp;\n[![License](https://poser.pugx.org/wpbones/pure-css-tabs/license?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-tabs) \u0026nbsp;\n[![Monthly Downloads](https://poser.pugx.org/wpbones/pure-css-tabs/d/monthly?style=for-the-badge)](https://packagist.org/packages/wpbones/pure-css-tabs)\n\n\n\u003c/div\u003e\n\nThis package provides a simple way to create tabs with pure CSS for WordPress/WP Bones.\n\n![Pure CSS Tabs for WP Bones](https://github.com/user-attachments/assets/e8143a4c-8694-420b-b281-c0fb0d080f5a)\n\n ## Requirements\n\nThis package works with a WordPress plugin written with [WP Bones framework library](https://github.com/wpbones/WPBones).\n\n## Installation\n\nYou can install third party packages by using:\n\n```sh copy\nphp bones require  wpbones/pure-css-tabs\n```\n\nI advise to use this command instead of `composer require` because doing this an automatic renaming will done.\n\nYou can use composer to install this package:\n\n```sh copy\ncomposer require  wpbones/pure-css-tabs\n```\n\nYou may also to add `\" wpbones/pure-css-tabs\": \"~0.7\"` in the `composer.json` file of your plugin:\n\n```json copy filename=\"composer.json\" {4}\n  \"require\": {\n    \"php\": \"\u003e=7.4\",\n    \"wpbones/wpbones\": \"~1.9\",\n    \"wpbones/pure-css-tabs\": \"~1.1\"\n  },\n```\n\nand run\n\n```sh copy\ncomposer install\n```\n\n## Enqueue for Controller\n\nYou can use the provider to enqueue the styles.\n\n```php copy\npublic function index()\n{\n  // enqueue the minified version\n  PureCSSTabsProvider::enqueueStyles();\n\n  // ...\n\n}\n```\n\n## PureCSSTabsProvider\n\nThis is a static class autoloaded by composer. You can use it to enqueue or get the styles path:\n\n```php copy\n// enqueue the minified version\nPureCSSTabsProvider::enqueueStyles();\n\n// enqueue the flat version\nPureCSSTabsProvider::enqueueStyles( false );\n\n// return the absolute path of the minified css\nPureCSSTabsProvider::css();\n\n// return the absolute path of the flat css\nPureCSSTabsProvider::css();\n```\n\n## HTML markup\n\n```html copy\n\u003c!-- main tabs container --\u003e\n\u003cdiv class=\"wpbones-tabs\"\u003e\n\n  \u003c!-- first tab --\u003e\n  \u003cinput id=\"tab-1\" type=\"radio\" name=\"tabs\" checked=\"checked\" aria-hidden=\"true\"\u003e\n  \u003clabel for=\"tab-1\" tabindex=\"0\"\u003e\u003c?php _e( 'Database' ) ?\u003c/label\u003e\n  \u003cdiv class=\"wpbones-tab\"\u003e\n    \u003ch3\u003eContent\u003c/h3\u003e\n  \u003c/div\u003e\n\n  \u003c!-- second tab --\u003e\n  \u003cinput id=\"tab-2\" type=\"radio\" name=\"tabs\" aria-hidden=\"true\"\u003e\n  \u003clabel for=\"tab-2\" tabindex=\"0\"\u003e\u003c?php _e( 'Posts' ) ?\u003e\u003c/label\u003e\n  \u003cdiv class=\"wpbones-tab\"\u003e\n    \u003ch3\u003eContent\u003c/h3\u003e\n  \u003c/div\u003e\n\n  \u003c!-- son on... --\u003e\n\n\u003c/div\u003e\n```\n\nOf course, you may use the **fragment** feature to include the single tabs:\n\n```html copy\n\u003c!-- main tabs container --\u003e\n\u003cdiv class=\"wpbones-tabs\"\u003e\n\n  \u003c!-- first tab --\u003e\n  \u003c?php echo WPkirk()-\u003eview( 'folder.tab1' ) ?\u003e\n\n  \u003c!-- second tab --\u003e\n  \u003c?php echo WPkirk()-\u003eview( 'folder.tab2' ) ?\u003e\n\n  \u003c!-- son on... --\u003e\n\n\u003c/div\u003e\n```\n In `/folder/tab1.php` you just insert the following markup:\n\n ```html copy\n\u003c!-- first tab --\u003e\n\u003cinput id=\"tab-1\" type=\"radio\" name=\"tabs\" checked=\"checked\" aria-hidden=\"true\"\u003e\n\u003clabel for=\"tab-1\" tabindex=\"0\"\u003e\u003c?php _e( 'Database' ) ?\u003e\u003c/label\u003e\n\u003cdiv class=\"wpbones-tab\"\u003e\n  \u003ch3\u003eContent\u003c/h3\u003e\n\u003c/div\u003e\n```\n\n## Customize\n\nOf course, you can edit both of CSS or LESS files in order to change the appearance of tabs.\nIn the LESS file, you'll find the color variable as well.\n\n```less copy\n@wpbones-tab-border-color : #aaa;\n@wpbones-tab-responsive-accordion-border : #ddd;\n@wpbones-tab-disabled : #ddd;\n@wpbones-tab-content-color : #fff;\n```\n\n\u003e 💡 Anyway, the best way to customize your tabs is override the default styles. Otherwise, when an update will be done you'll lose your customization.\n\n## Helper\n\nIn addition, you can use some methods provided by `PureCSSTabsProvider` class.\nIn your HTML view you might use:\n\n```php copy\n    /**\n     * Display tabs by array\n     *\n     *     self::tabs(\n     *       'tab-1' =\u003e [ 'label' =\u003e 'Tab 1', 'content' =\u003e 'Hello', 'selected' =\u003e true ],\n     *       'tab-2' =\u003e [ 'label' =\u003e 'Tab 1', 'content' =\u003e 'Hello' ],\n     *       ...\n     *     );\n     *\n     * @param array $array\n     */\n    WPKirk\\PureCSSTabs\\PureCSSTabsProvider::tabs(\n      'tab-1' =\u003e [ 'label' =\u003e 'Tab 1', 'content' =\u003e 'Hello', 'selected' =\u003e true ],\n      'tab-2' =\u003e [ 'label' =\u003e 'Tab 1', 'content' =\u003e 'Hello' ],\n      ...\n    );\n```\n\nAlso, you can use `openTab()` and `closeTab()` methods:\n\n```php copy\n  /**\n   * Display the open tab.\n   *\n   * @param string|array  $label    The label of tab or un array with [label, group]\n   * @param null          $id       Optional. ID of tab. If null, will sanitize_title() the label.\n   * @param bool          $selected Optional. Default false. TRUE for checked.\n   * @param string        $group    Optional. Group of tabs when you want to handle multiple tab in the same view. Default 'tabs'\n\n   */\n   public static function openTab( $label, $id = null, $selected = false ) {}\n```\n\n```html copy\n\u003cdiv class=\"wpbones-tabs\"\u003e\n\n  \u003c?php WPKirk\\PureCSSTabs\\PureCSSTabsProvider::openTab( 'Tab 1', null, true ) ?\u003e\n    \u003ch2\u003eHello, world! I'm the content of tab-1\u003c/h2\u003e\n  \u003c?php WPKirk\\PureCSSTabs\\PureCSSTabsProvider::closeTab ?\u003e\n\n  \u003c?php WPKirk\\PureCSSTabs\\PureCSSTabsProvider::openTab( 'Tab 2' ) ?\u003e\n    \u003ch2\u003eHello, world! I'm the content of tab-2\u003c/h2\u003e\n  \u003c?php WPKirk\\PureCSSTabs\\PureCSSTabsProvider::closeTab ?\u003e\n\n\u003c/div\u003e\n```\n\nYou may also use the hook approach by using `::useTabs()`\n\n```php copy\n\u003c?php [$openTabs, $closeTabs] = WPKirk\\PureCSSTabs\\PureCSSTabsProvider::useTabs() ?\u003e\n\n\u003cdiv class=\"wpbones-tabs\"\u003e\n\n  \u003c!-- first tab --\u003e\n  \u003c?php $openTabs(['Settings', 'hook'], null, true); ?\u003e\n\n  \u003cdiv\u003e\n    \u003ch3\u003eContent for Settings\u003c/h3\u003e\n  \u003c/div\u003e\n\n  \u003c?php $closeTabs(); ?\u003e\n\n  \u003c!-- second tab --\u003e\n  \u003c?php $openTabs(['Dashboard', 'hook']); ?\u003e\n\n  \u003cdiv\u003e\n    \u003ch3\u003eContent for Dashboard\u003c/h3\u003e\n  \u003c/div\u003e\n\n  \u003c?php $closeTabs(); ?\u003e\n\n  \u003c!-- son on... --\u003e\n\n\u003c/div\u003e\n```\n\n\u003e 👆 Remember, in the example above I have used `WPKirk` base namespace. You should replace it with your own namespace.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpbones%2Fpure-css-tabs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwpbones%2Fpure-css-tabs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwpbones%2Fpure-css-tabs/lists"}