5 Minutes Read Time | Updated: May 06, 2025
If you’ve ever needed to capture GitHub file content dynamically in WordPress, you know it can be tedious—copying, pasting, formatting, and keeping everything up to date. This quick and powerful shortcode takes the pain out of the process by pulling files straight from your GitHub repo using the GitHub API. Whether you’re creating technical tutorials, plugin documentation, or a portfolio, this lightweight solution will save you time and keep your content accurate.
Before delving into the template below, ensure you are familiar with PHP. PHP (Hypertext Preprocessor) is a widely-used open-source scripting language especially suited for web development and can be embedded into HTML. It is commonly used for creating dynamic web pages and interacting with databases. PHP code is executed on the server, generating HTML content that is then sent to the client’s web browser. It is known for its simplicity, flexibility, and ease of integration with other technologies. If you need a quick overview of PHP, you can find a summary here: [What is PHP? – Summary].
Table of Contents
Want to display code or config files from your GitHub repo directly on your WordPress site? This quick PHP shortcode lets you fetch and render file contents using the GitHub API—perfect for documentation, tutorials, or developer portfolios. Let’s walk through how it works and how to use it. [Shortcode Definition]
add_shortcode('rsgdx_github_api_file_content', 'rsgdx_github_api_file_content_func');
function rsgdx_github_api_file_content_func() {
$endp = get_field('github_api_endpoint_to_retrieve_file_contents');
$path = get_field('github_path_file');
$repo = get_field('github_repository');
$tokn = get_field('github_token');
if (empty($endp) || empty($path) || empty($repo) || empty($tokn)) {
return 'Missing required data to capture Github content';
}
$response = wp_remote_get('https://api.github.com/repos/' . $repo . '/contents/' . $path, [
'headers' => [
'Authorization: token ' . $tokn,
'User-Agent: WP_Git_API_For_Components'
]
]);
if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) {
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (isset($data['content'])) {
return '<pre><code>' . htmlspecialchars(base64_decode($data['content'])) . '</code></pre>';
} else {
return 'File not found or empty.';
}
} else {
return 'Error retrieving content from GitHub.';
}
}
How This Shortcode Helps You Capture GitHub Files Easily
This shortcode function retrieves or capture GitHub content from a repository based on the data provided via Advanced Custom Fields (ACF). It constructs a request to the GitHub API using the specified endpoint, repository, file path, and token. If the request is successful, it returns the content of the specified file wrapped in pre or code tags. If there’s an error or the file is not found, it returns an appropriate error message.
- Paste the shortcode function into your theme’s functions.php file or a custom plugin file.
- Use the [rsgdx_github_api_file_content] shortcode in your WordPress content, providing the necessary data via Advanced Custom Fields (ACF) or other means:
- github_api_endpoint_to_retrieve_file_contents: The GitHub API endpoint.
- github_path_file: The path to the file in the repository.
- github_repository: The GitHub repository (in the format username/repository).
- github_token: Your GitHub personal access token.
- Publish a post or page containing the shortcode and view it on your WordPress website. The content of the specified file from the GitHub repository should be displayed.
Please make sure to replace the placeholders with the actual data from your GitHub repository and access token. Let me know if you encounter any issues or if you have any questions along the way!
Security Note
Make sure your GitHub token has read-only access and is stored securely. Avoid exposing it in public posts or client-side code.
Use Cases
This shortcode isn’t just a neat trick—it’s a powerful tool for developers, educators, and content creators. Here are some real-world scenarios where it shines:
- Developer Documentation
- Embed live versions of README.md, changelogs, or configuration files directly from your GitHub repo. This ensures your documentation stays up to date without manual copy-pasting.
- Plugin or Theme Demos
- Showcase snippets of your plugin’s code or theme templates in blog posts or landing pages. Readers can view the actual source without leaving your site.
- Technical Tutorials
- If you’re writing a tutorial that references a config file, script, or JSON structure, you can pull it straight from GitHub. This keeps your tutorial clean and ensures the code is always current.
- Portfolio Showcases
- Freelancers and devs can use this to display parts of their GitHub projects on their personal websites—great for demonstrating coding style and project structure.
- Collaborative Content
- If you’re working with a team or open-source contributors, this shortcode allows you to reflect updates made to shared files in real time on your site.
- Educational Platforms
- Online course creators or tech bloggers can use this to embed lesson files, exercises, or starter templates directly from GitHub, reducing redundancy and improving version control.
Conclusion
This shortcode is a lightweight yet powerful way to capture GitHub and integrate the content into your WordPress site. Whether you’re showcasing code, sharing documentation, or building a developer-focused blog, it’s a handy tool to have in your kit. Happy coding!
Some Reference Links
- GitHub REST API: Get repository content – Official documentation on the endpoint used.
- Using Personal Access Tokens – Guide to generating a GitHub token.
- Advanced Custom Fields (ACF) – For readers unfamiliar with ACF.
Something to Look Forward to
If working with code snippets feels a bit outside your comfort zone, no worries—I’m working on turning this functionality into a plugin to make it even easier to use. The goal is to provide a clean, user-friendly interface where you can simply paste your GitHub file path and display it without touching any PHP. Keep an eye out for updates if you’d prefer a plug-and-play solution instead of customizing templates.
The goal behind this plugin is to streamline the workflow not just for developers, but also for bloggers, educators, and site owners who want to showcase GitHub content without writing a single line of code. Whether you’re managing documentation, teaching code concepts, or curating examples from open-source projects, this tool aims to make integration effortless. It’s all about simplifying the process while keeping everything dynamic and up to date.
