--- title: How to Show a List of Google Drive Files with Download Buttons description: "Do you want visitors to see a tidy list of your Google Drive files, then preview or download any of them with one click? You can easily do this with **DriveHub**. The **List** module shows your files in a clean…" url: "https://sovlix.com/docs/how-to-show-a-list-of-google-drive-files-with-download-buttons/" updated: "2026-10-07" category: DriveHub / Modules --- # How to Show a List of Google Drive Files with Download Buttons Do you want visitors to see a tidy list of your Google Drive files, then preview or download any of them with one click? You can easily do this with **DriveHub**. The **List** module shows your files in a clean table with the file name, size and date, plus a preview and a download button on every row. It is super useful for proposals, price lists, forms or any documents you share again and again, because you update the files in Google Drive and the page follows. Here is an easy, step-by-step guide to help you set it all up! ## Step 1: Install DriveHub and Connect Google Drive First, make sure DriveHub is installed and your Google account is connected: - From your WordPress admin, click on **Plugins** > **Add New**. - Search for **DriveHub**. - Click **Install** and then **Activate**. - Follow the setup screen to add your Google account. [![Search for DriveHub in Add Plugins, then click Install Now and Activate](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-00-install-drivehub.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-00-install-drivehub.webp) Read our [step by step setup guide](https://sovlix.com/docs/drivehub-manual-google-drive-connection-setup-guide/) to avoid any confusion. ## Step 2: Add a New Module Every list you show on your website is a module. Let's create one: - Go to **DriveHub** > **Modules** from your WP-Admin. - Click on **Add module** at the top right. [![The Add module button on the DriveHub Modules page](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-01-add-module.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-01-add-module.webp) ## Step 3: Choose the List Module A window opens with all the module types: - Under **Browse & Search**, click on **List**. [![Choosing the List module type](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-02-choose-list.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-02-choose-list.webp) The module editor opens on the **Source** step. Give your module a name you will recognise later: - Click on the name at the top and type a new one (for example, **Client Proposals List**). [![Naming the list module at the top of the editor](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-03-name-module.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-03-name-module.webp) ## Step 4: Choose Your Files (Source Tab) In this step, you pick what visitors see in the list: - Scroll down to **Your Drive**. - Tick the folder you want to share (we'll use **Client Proposals**). You can also tick single files instead of a whole folder. - Check the **Items Selected** panel on the right. Everything you ticked shows up here, and you can remove an item with the **x** next to it. [![Selecting the Client Proposals folder in the Source tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-04-select-folder.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-04-select-folder.webp) Above **Your Drive** you will also see a few switches: - **All Folders & Files:** shows every folder and file of your linked Google Drive accounts. Leave it off to share only what you ticked. - **Use Private Files** and **Use ACF field Files:** take the files from each user's private folder or from an ACF field instead. Leave them off for a normal list. - **Merge Selected Folder Files:** shows the files from all the folders you picked together in one list. Turn on **Include Subfolder Files** to add the files inside their subfolders too. **Tip:** If you pick exactly one folder, the list opens that folder straight away, so visitors see the files without an extra click. ## Step 5: Choose File Rules (Filter Tab) Here, you can decide which files show up in the list. This tab is optional, and every rule here really changes what visitors see: - Click on **Filter** in the left menu. - Use **Show Files** and **Show Folders** to hide all files or all folders from the list. - **Allowed Extensions:** to show only some file types, turn off **Allow all**, type a type (like pdf) and click **Add**. Repeat for each type you want. To hide just a few types instead, keep **Allow all** on and type them in **Except** (like zip). - **Allowed Names:** works the same way for file and folder names, and you can use wildcards such as `*proposal*`. - **Maximum Item Count:** the most files the list shows. Folders are not counted. Leave it empty to show them all. [![Showing only PDF files with Allowed Extensions in the Filter tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-05-filter-tab.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-05-filter-tab.webp) **Note:** While **Allow all** is on, DriveHub ignores the types you added above it and only hides the ones in **Except**. ## Step 6: Change How the List Looks (Advanced Tab) Now let's set up the columns and buttons: - Click on **Advanced** in the left menu. - Under **Module Container**, you can set a **Width** and **Height** (for example, 100% or 800px). Leave them empty for auto. - In **List Settings**, choose what each row shows: - **Show Table Header:** shows the Name, Size and Modified titles above the list. - **Show File Size Column:** shows how big each file is. - **Show Modified Date:** shows when each file was last changed. - **Allow File Downloads:** adds a download button to every row. Turn it off and the download buttons disappear from the list and the preview window. [![The List Settings card in the Advanced tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-06-list-settings.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-06-list-settings.webp) Scroll down to **Sorting** to choose the order of the files: - **Sort By:** pick **Name**, **Size**, **Created Date**, **Modified Date** or **Random**. - **Sort Direction:** pick **Ascending** or **Descending**. - **Enable Initial Files Sorting:** applies this order as soon as the list loads. Turn it off to keep the order the files have in Google Drive; the sort button then just reads **Sort**. [![The Sorting card in the Advanced tab](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-07-sorting.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-07-sorting.webp) Visitors can still change the order themselves with the sort menu at the top of the list. ## Step 7: Choose Who Can Do What (Permissions Tab) Here, you decide what visitors can do with your files: - Click on **Permissions** in the left menu. - Keep **Preview** on so visitors can open a file in a preview window. Below it you can set **Inline Preview**, **Allow Pop-out**, **Media Preview Mode** and **Show Preview Thumbnails**, and limit previews to some users with **Filter Users & Roles**. [![The Preview permission card](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-09-preview.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-09-preview.webp) - Keep **Download** on so visitors can save files to their computer. Use **Filter Users & Roles** if only some users should be able to download. [![The Download permission card](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-10-download.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-10-download.webp) Further down, you will find a few more cards. A **List** only uses preview and download, so you can leave the other action cards (Delete, New Folder, Rename and so on) as they are. - **Usage Limits:** caps how many files each user can download per day, week or month. - **Password Protection:** asks visitors for a password before they see the list. - **Visibility:** under **Display For**, choose **Everyone** or **Logged In**. [![The Password Protection and Visibility cards](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-11-password-visibility.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-11-password-visibility.webp) ## Step 8: Save Your Module Don't forget to save your work: - Click on **Save changes** at the top right. [![The Save changes button in the module editor](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-12-save-changes.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-12-save-changes.webp) ## Step 9: Add the List to a Page You can copy the shortcode, or let DriveHub add it to a page for you: - Click on **Embed** at the top of the editor. - To place it yourself, click **Copy shortcode** and paste it into any page or post. It looks like `[drivehub id="27"]`; your number may be different. - Or click on **Add to a page**, then on **Create a new page**. (Pick **Choose an existing page** instead to add the list to a page you already have.) [![The Embed menu with Add to a page open](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-13-add-to-page.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-13-add-to-page.webp) The **Create New Page** window opens: - Type a **Page Title** (for example, **Proposals**). - Click on **Create Page**. [![Typing the page title and clicking Create Page](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-15-create-page.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-15-create-page.webp) DriveHub creates a draft page with the shortcode already in it and shows **Shortcode added to the page.** Open the page with **Edit Page**, then click **Publish** when you are ready. You can also use the [block editor](https://sovlix.com/docs/how-to-add-google-drive-files-with-the-block-editor-gutenberg/) or the [classic editor](https://sovlix.com/docs/how-to-add-google-drive-files-in-the-classic-editor/) to add the module. ## Step 10: See the List on Your Website And that's it. Visit your page and you will see your Google Drive files in a clean list, with the size and date of each one: [![Frontend View of the Client Proposals list](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-16-front-end-list.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-16-front-end-list.webp) Visitors click the eye icon (or the file name) to open a file in the preview window. They can move to the next file with the arrows, open it in Google Drive with **Open**, or save it with the download button: [![A proposal open in the preview window](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-17-front-end-preview.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-17-front-end-preview.webp) On a phone, the list folds the size and date under each file name, so it still reads well on a small screen: [![The Client Proposals list on a phone](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-18-front-end-phone.webp)](https://sovlix.com/wp-content/uploads/2026/10/drivehub-list-18-front-end-phone.webp) ## Benefits of Showing Google Drive Files as a List - **Always up to date:** Replace a file in Google Drive and the list shows the new version. - **Save WordPress storage:** Your documents stay in Google Drive instead of your Media Library. - **Easy for visitors:** Preview and download buttons sit right next to every file. - **You stay in control:** Choose who can preview, download or even see the list. - **Works anywhere:** Use the shortcode in any page, post or page builder. With **DriveHub**, sharing a whole folder of documents on your website takes just a few minutes. **Related guides:** - [How to Show a Google Drive Photo Gallery on Your Website](https://sovlix.com/docs/how-to-show-a-google-drive-photo-gallery-on-your-website/) - [How to Embed Google Drive Documents on Pages and Posts](https://sovlix.com/docs/how-to-embed-google-drive-documents-on-pages-and-posts/)