# Google Drive Catalog (WordPress Plugin)
Google Drive Catalog renders a list of files from a Google Drive folder inside your WordPress site using a simple shortcode.
## What it does
- Provides a shortcode you can place in any post/page: `[drive_katalog id="FOLDER_ID"]`
- Fetches the contents of the given Google Drive folder via the Drive API and displays a clean, customizable list
- Lets you style the list from an admin Appearance page (colors, spacing, borders, etc.)
- Allows additional CSS overrides for edge cases (themes with strict styles, overflow rules, etc.)
## Installation
1. Copy the `google-drive-catalog` folder into `wp-content/plugins/`
2. Activate “Google Drive Catalog” from WordPress → Plugins
3. Go to Admin → Drive Catalog → Settings and paste your Google Drive API key
4. Use the shortcode on any page:
```
[drive_katalog id="FOLDER_ID"]
```
## Getting a Google Drive API Key
1. Open Google Cloud Console: https://console.cloud.google.com/
2. Create a new Project (or choose an existing one)
3. In “APIs & Services → Library”, search for “Google Drive API” and click “Enable”
4. Go to “APIs & Services → Credentials” and click “Create Credentials → API key”
5. Copy the generated key and paste it into Admin → Drive Catalog → Settings → Google Drive API Key
6. (Recommended) Click the key to set restrictions:
- Application restrictions: “HTTP referrers (web sites)” and add your site origin(s)
- API restrictions: “Restrict key” → select “Google Drive API”
7. Save. The key should now work for listing files.
Notes:
- The folder you reference must be visible to the API. For public sites, the folder should be shared “Anyone with the link: Viewer”, or the files must otherwise be accessible via API permissions in your project.
## Settings
- Google Drive API Key: Required to query file metadata from the Drive API.
## Appearance
Open Admin → Drive Catalog → Appearance. All options update the front‑end list.
- View Mode: List or Grid
- Colors: Background, Text (file name color), Border
- Sizing: Icon size, Text size, Gap, Row padding, Row margin, Row border, Row radius
- Container: Outer padding, Outer margin, Border radius, Container border (set 0 to remove)
- Toggles: Show icon, Show file size, Open in new tab
- Advanced → Custom CSS: Add small CSS overrides if your theme enforces conflicting styles.
Examples:
```
.drive-catalog-viewer .catalog-list { overflow: visible; }
.drive-catalog-viewer .catalog-list { padding-bottom: 4px; }
```
## Shortcode
Place the shortcode where you want the list to appear:
```
[drive_katalog id="FOLDER_ID"]
```
- `id` is the Google Drive folder ID (the part after `/folders/` in the URL)
## Folder Navigation
- Current version lists the files that are direct children of the provided folder ID.
- Built‑in subfolder navigation (drill‑down/back) is not implemented yet.
- Workarounds:
- Place multiple shortcodes with different `id` values to show specific folders
- Or add a link to open the parent folder on Drive
- Roadmap (optional): we can add a setting to list subfolders and navigate on click.
## Notes
- Script and styles are loaded only when the shortcode exists on the page
- If colors do not affect links, your theme’s link styles may override. The plugin enforces link colors inside the list; if you need further tweaks, use Advanced → Custom CSS
## Troubleshooting
- Border not visible at the bottom of rows: Some themes set `.catalog-list { overflow: hidden; }`. Override via Advanced CSS:
```
.drive-catalog-viewer .catalog-list { overflow: visible; }
```
- API errors:
- Check that your API key is valid and has access to Drive API
- Confirm the folder ID exists and is shared properly (public or accessible via API)
---
Made for streamlined Google Drive catalog embedding with flexible, theme‑friendly styling.
